WooCommerce with Poloray Theme

Discussion in 'Poloray WordPress Theme' started by traeonna, May 25, 2014.

  1. traeonna

    traeonna Guest

    Joined:
    May 16, 2014
    Messages:
    12
    Likes Received:
    0
    There seems to be issues using WooCommerce with Poloray Theme...specifically with images. The fix that was suggested was to use hooks. The instructions given are as follows:

    ---

    By inserting a few lines in your theme’s functions.php file, First unhook the WooCommerce wrappers;

    Code:
    remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
    remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
    
    Then hook in your own functions to display the wrappers your theme requires;

    Code:
    add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
    add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
    
    function my_theme_wrapper_start() {
      echo '<section id="main">';
    }
    
    function my_theme_wrapper_end() {
      echo '</section>';
    }
    
    Make sure that the markup matches that of your theme. If you’re unsure of which classes or ID’s to use take a look at your theme’s page.php for a guide.

    ---

    My question: Is there an easier way to deal with the image issues? If not, what information would I need to change in order to get these two things to play nice?
     
  2. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    traeonna likes this.
  3. traeonna

    traeonna Guest

    Joined:
    May 16, 2014
    Messages:
    12
    Likes Received:
    0
    Sadly, I already tried that route (that was my first attempt and why I asked if perhaps the hooks would do better). Unfortunately, the fix you suggested (and the one I had already found via WooCommerce) did not solve the issues I was having.

    However, I broke down and did some digging around in woocommerce.css and found the following (posting here for the benefit of any future users that may be having the same issue).

    Code:
    .woocommerce div.product div.images img, .woocommerce #content div.product div.images img, .woocommerce-page div.product div.images img, .woocommerce-page #content div.product div.images img {
        display:block;
        width:100%;
        height:auto;
        box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.3);
        -webkit-box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-transition:all ease-in-out .2s;
    -moz-transition:all ease-in-out .2s;
    -o-transition:all ease-in-out .2s;
    transition:all ease-in-out .2s
    }
    
    CHANGED
    width:100%;
    TO
    width:auto;
     
  4. traeonna

    traeonna Guest

    Joined:
    May 16, 2014
    Messages:
    12
    Likes Received:
    0
    Also considering changing woocommerce-layout.css and woocommerce-smallscreen.css as well. Sigh. I don't understand why WooCommerce was trying to pin this issue on themes when it looks like now it is their issue.
     
  5. traeonna

    traeonna Guest

    Joined:
    May 16, 2014
    Messages:
    12
    Likes Received:
    0
    The "related products" can be fixed in woocommerce-layout.css

    Code:
    /* CHANGED width:100%; to width:auto; */
    .woocommerce .related ul li.product img, .woocommerce .related ul.products li.product img, .woocommerce .upsells.products ul li.product img, .woocommerce .upsells.products ul.products li.product img, .woocommerce-page .related ul li.product img, .woocommerce-page .related ul.products li.product img, .woocommerce-page .upsells.products ul li.product img, .woocommerce-page .upsells.products ul.products li.product img {
        width:auto;
        height:auto
    }
     

Share This Page