WooCommerce with Poloray Theme

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?

 

Hello,
Follow the link given below
http://www.inkthemes.com/how-to-make-inkthemes-compatible-with-woocommerce/04/

I hope it will help you.

Thanks & Regards
Gourav Shrivastava

 

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;

 

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.

 

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
}