[Resolved] Woo add-on and Elementor woo product widget

[David]

Hi Tom,

I am experiencing some issues with the mobile product columns function when using elementor woo products widget. It looks to me as the rescaling affects the widget section and not the product so although it respects the number of columns you end up with significantly reduced sizes of the products. See images below

Mobile columns using CSS

Mobile columns using customiser

I am using the CSS code as a workaround so no big problem but maybe something you may want to test on your side.

David

[Leo]

Hi David,

Are you able to provide a link to your site so we can have a look and make sure it’s not an Elementor problem?

Thanks!

[David]

Hi Leo,

ill send link by email.

[Tom]

The plugin you’re using is setting the class to allow for 6 columns, but doesn’t have any mobile CSS.

You’ll need to do this:

@media (max-width: 768px) {
    .woocommerce .wc-columns-6 ul.products li.product, 
    .woocommerce-page .wc-columns-6 ul.products li.product, 
    .woocommerce-page.columns-6 ul.products li.product, 
    .woocommerce.columns-6 ul.products li.product {
        width: 48%;
        margin-left: 2%;
    }
}

[David]

Hi Tom, thanks for the feedback much appreciated.

I will test out the above, but currently the 2 product column CSS (you kindly provided way back) does work o.k for any number of columns. And it overrides the customiser. So all good there and no fix necessary – although i was quite excited to get rid of another CSS snippet in favour of using your supported plugin.

Just wanted to point out that the GP Woo add-on definitely creates a problem for the Elementor Woo Products Widget – without the CSS added so solely relying on customiser it doesn’t matter what number i set the mobile product columns to i get the exact same result as above (even if it is 1) – whereas if i switch off the GP Woo add-on then it works fine displaying the default single column. Presumably the customiser is doing something different to the way the CSS works(?)

I cant say whether this is an isolated instance and if it is a definite conflict but it looks to be the case. Might be worth you checking it out to see if GP woo and Elementor woo aren’t working correctly together. Maybe an off button on the customiser mobile product columns would be a small fix.

kind regards

David

[Tom]

The GP options work by adding a columns class to the product wrapper in WooCommerce. The issue here is the Elementor plugin is adding their own wrapper, which GP unfortunately doesn’t have access to/knows exists. You would have to use the built in options in the Elementor plugin to control the columns.

[David]

Hi Tom

thanks again – i learn something new every time we converse.
I’ll continue to use the 2 column CSS (which i am still yet to learn why this overrides the customiser) as this works for me.

We can call this one resolved.

regards

David

[Tom]

No problem! 🙂

[Author]

Posts