[Resolved] WooCommerce product gallery and variation swatches layout

[Allan]

Hello,

I have found that the single product page clashes with multiple WooCommerce product gallery and variation swatch plugins. I’ve stumbled upon the issue upon testing 5 different plugins including this by InnovativeWP, this by CartFlows, and this by WeLaunch.

For example, see the layout of this single product page. Screenshot here. For contrast, the plugin behaves differently on a different theme here.

Hope to spot the culprit, so we can work with the best WooCommerce product gallery and variation swatch plugins.

Cheers! 🙏

[Fernando]

Hi Allan,

On what view is your screenshot? Is it on Desktop, tablet, or mobile?

I can’t seem to replicate the issue from my end. Do you have the plugin activated still?

[Allan]

Heya! Thanks for the feedback. Was able to fix a little bit with the following CSS:

.woocommerce-product-gallery {
width: 50%;
float: left;
}

.single-product .entry-summary {
width: 50%;
float: left;
}

But please see here, it’s still quite wonky: https://staging11.workgadgets.ph/product/hootchaos/

On desktop, the two columns lack a gap between them.

On mobile, there’s massive empty space under the Woo Product Gallery and above the Product Entry Summary.

The workaround above helped, but introduced new issues 🤔

—-

EDIT:

How it actually appears on smartphone (not just in slim browser window on PC): https://d.pr/i/XFs9kQ

[Ying]

Hi Allan,

It’s because GP Woocommerce module adds CSS to the Woocommerce pages which might result conflicts with other plugins that also adds CSS to Woo pages.

If you want, you can remove all the CSS added to Woo pages by GP using below PHP snippet:

add_action( 'wp_enqueue_scripts', function() {
  
        wp_dequeue_style( 'generate-woocommerce' );
        wp_dequeue_style( 'generate-woocommerce-mobile' );
    
}, 101 );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Or try adding this CSS to override the GP CSS for this issue only:

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    width: 48%;
    float: right;
    clear: none;
}

@media(max-width:768px) {
    .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary {
    float: none;
    width: 100%;
    }
}

[Allan]

Ooh, that explains it. Thank you!

I’m going with the following:

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    width: 48%;
    float: right;
    clear: none;
}

@media(max-width:768px) {
    .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary {
    float: none;
    width: 100%;
    }
}

Cheers!! 🙏

[Ying]

You are welcome ：）

[Author]

Posts