Woocommerce not displaying properly

[Boans]

Hey you all, recently after an update to your product, the woocommerce product (or both) we are having a product display issue.

Our sites used to look like this with the additional product thumbnails lined up nicely underneath the main image:

http://www.neworleansgaslights.com/product/flame-bulb/

Now that our other sites have been updated the product thumbnails are displaying as tiny squares over the main image and are impossible to even find on some backgrounds. You can view this on a test site here:

http://liverealms.com/product/gardner-denver-t-300-m/

We’ve noticed that this only happens with X theme and we need to find a way to revert back to displaying the thumbnails below the main image as this is now affecting multiple sites. The thumbnails need to be larger to even be usable and we would like to have lightbox back as well.

[lely]

Hi There,

That is how works now using Woocommerce 3.0. A lot has change on Woocommerce files on 3.0 version. Zoom and gallery feature was added. Lightbox now can be access by clicking the magnifying icon on the upper left part of the product image. Product page our now using woocommerce image settings. See this for complete details: https://woocommerce.com/2017/04/woocommerce-3-0-release/. On X theme 5.0.2, we have added the compatibility to Woocommerce 3.0.3. See our changelog here:https://theme.co/changelog/. That is the new style by WooCommerce. The old layout was WooCommerce’s layout too. It was only styled a bit in X.

This issue happens because WooCommerce displays 400x400 image size as your single product image now. You won’t find the image dimension settings because it was remove by X. To have more control over the product images and to get this settings back, please add the following code on your child theme functions.php file:
// Do Not Remove Woocommerce Plugin Settings // ============================================================================= function x_woocommerce_donot_remove_plugin_setting(){ if ( ! is_admin() ) { return; } remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings', 10 ); } add_action('init', 'x_woocommerce_donot_remove_plugin_setting');

By default Woocommerce has set the default single product image size. If you want to make it bigger, please change the “Single Product Image” to at least 1024 x1024. See this: https://prnt.sc/6eysla

After changing the settings, regenerate all your thumbnails using a plugin like Forced Regenerate Thumbnails.

Hope this helps.

[noizepro]

I am having the same issue with the images on my product pages.
I tried adding the above code to functions.php in my child theme as suggested, but it didn’t change.

I do also have a message in the dashboard after a recent WooCommerce update:
“Your theme (X – Child Theme) contains outdated copies of some WooCommerce template files. These files may need updating to ensure they are compatible with the current version of WooCommerce. You can see which files are affected from the system status page. If in doubt, check with the author of the theme.”

Here is a link to a page that is showing the issue:
http://kindofbluemusic.com/product/womens-t-shirt-2/

Same issue on this site that I just updated the theme and plug-ins on today:
http://imatteryoumatter.com/product/i-matter-you-matter-t-shirt/

Please advise.
Thanks!

[ruenel]

Hello There,

Thanks for updating in! With the latest release of WooCommerce, they have changed the way the product image is displayed. They added product slider and gallery zoom. In the latest release of X, we have accommodated the changes as well so that user will have the option of using these new features of WooCommerce. And this is enabled by default.

If you just want the basic product images (assuming that the child theme is set up), please add the following code in your child theme’s functions.php file

// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
function remove_woo_three_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-slider' );
}
// =============================================================================

We would loved to know if this has work for you. Thank you.

[noizepro]

Thank you! This new code seems to have corrected the issue and put the images back to the way they were before. Will this be addressed in a future update, so that the template files will match the demos?

[paul.r]

Hi,

Please note that the demos are still using the older version of the theme.

I will forward your concern as a feature request wherein you may be able to disable this features from the dashboard.

Thanks

[noizepro]

Thank you! That would be greatly appreciated.

[nabeel]

You’re most welcome!