Woocommerce product page images are wrong & incorrect zoom

I have followed this: https://theme.co/apex/forum/t/resizing-woocommerce-images/1706 and https://docs.woocommerce.com/document/declare-woocommerce-support-in-third-party-theme/

But my images still don’t show slider and the zoom is showing a smaller image than what’s on the page

Site: sunnybox.net

I had added the following to my css global:
.single-product .woocommerce-product-gallery__image > a > img {
_ width:100%;_

I tried all these and still no luck…
//add woocommerce support

add_action( ‘after_setup_theme’, ‘woocommerce_support’ );
function woocommerce_support() {
add_theme_support( ‘woocommerce’ );
add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );

// Do Not Remove Woocommerce Plugin Settings
// =============================================================================

function x_woocommerce_donot_remove_plugin_setting(){
if ( ! is_admin() ) {
remove_filter( ‘woocommerce_product_settings’, ‘x_woocommerce_remove_plugin_settings’, 10 );
add_action(‘init’, ‘x_woocommerce_donot_remove_plugin_setting’);
// =============================================================================

// Disable the gallery zoom on single products
// =============================================================================
add_action( ‘after_setup_theme’, ‘removing_gallery_zoom’, 100 );

function removing_gallery_zoom() {
remove_theme_support( ‘wc-product-gallery-zoom’ );
// =============================================================================

I also like help with the grey links on bottom that I can’t seem to change colour

This is my global css:

.x-colophon.bottom {
background-color: #000000;
.x-colophon.bottom .x-colophon-content a { color:#DFB53D; }
.x-colophon.bottom .x-social-global a { color:#DFB53D; }
.x-colophon.bottom .x-nav { margin: 10px 0; }
.x-colophon.bottom .x-colophon-content .menu-terms a { color:#DFB53D; }
.x-colophon.bottom .x-colophon-content p { margin: 0 }
.single-product .woocommerce-product-gallery__image > a > img {

Hey @pandibabi,

Thanks for writing in. First, X supports the latest features of WooCommerce so you don’t have to add them the new gallery, slider and zoom. Please remove all of your custom code for a moment and disable third party plugins because I see the product featured image is being has a loader that does not come from X and this might be the one causing issues. This is for troubleshooting only and you can reactivate your third party plugins once your issues are solved.

Now that there’s nothing overriding the default feature of X and WooCommerce, tell us the issues you’re having with the defaults. It would best that you also give us WP Admin access in a Secure Note so we could login if needed.

For your other issue, please open a separate thread so we avoid confusion.


I have sent the secure note after I have removed every 3rd party plugin I can. There was a suite of one plugin that I did not removed, but it wasn’t used in this particular page.

Apologies, it looked like it was Woocommerce’s Smart Variations Images plugin which I have since disabled. Thank you for your help!

You’re welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.