Solved

Woocommerce - Product Grid issue

  • 13 August 2021
  • 18 replies
  • 623 views

Hi,

Hope you’re all doing well,

 

I’ve been experiencing a (probably) bug on my website for the last 3 days. Previously the Woocommerce Product - Widget was working fine with the correct settings of a 4x4 full width grid. However since the last 3 days the products are shown very small, justified to the right. The mobile website still displays products correctly. 

 

Since the problem occurred I’ve retraced my steps and settings but to no avail. The css code displayed seems to be the correct one relating to: display: grid; and grid-template-columns: repeat(4,1fr);. Any changes to these settings will not fix it.

 

Things I’ve tried so far:

  • Retrace steps and reapply settings
  • Tried to replicate page (same issues shows on any new instance of products widget)
  • Updated all plugins
  • Cleared all caches after every update
  • Dev tools/Custom CSS
  • Restored backups to previous dates (didn’t solve it)

I’m starting to run out of options at the moment so some possible fixes/ideas would be helpful. Screenshot of the issue attached below.

 

Any help would be appreciated :) 

icon

Best answer by Hélène Desaulniers 13 August 2021, 08:56

View original

18 replies

Userlevel 4
Badge +2

Hey Dew! 

Have you updated Elementor recently? 

The last update’s changelog is all about product grid and that update was released 3 days ago. The new update might be clashing with your site and/or you need to update Elementor Pro.

Which version of the plugin do you have?

Same problem for me.

I tried deleting that block and redo it, it gives me the same issue.

 

 

Could it be related to the product page issue that’s been happening since 3.3.4 ? and apparently not solved with 3.3.6 

Userlevel 4
Badge +2

If you have a link I could tell you what’s causing this. Worse case scenario you’ll have to submit a bug report. On Elementor’s GitHub.

Which version of the plugin do you have?

 

Hi Hélène,

Thanks for your reply.

The issue did start around that time, I’m currently running Elementor Pro Version 3.3.6.

You can visit the website here

Oh thank you for your help! 

Problem happening currently on this front page or any product grid with related products and upsells (for example here )

 

I’m following this current github thread but also checking if part of the problem could also be just me.

 

I’ve also applied the CSS temporary solution offered on this forum thread.

And priority for Dew07 who started this thread ;-)

If my issue is different, let’s focus on Dew07 for this thread :-)

No worries! I’ve also tried the CSS temporary solution from the forum thread with no result. 

When I manually try to edit the “grid-template-columns” or change the “display” value it sometimes respond but still not correctly. 

Userlevel 4
Badge +2

Hey @Dew07.

 

Looks like it’s a conflict with your WoordPress theme. More precisely this part:

The culprit is this file: 
https://wntt.store/wp-content/cache/min/1/wp-content/themes/konte/woocommerce.css?ver=1628829664

 

To fix it, just add this CSS snippet to an Elementor Custom Code and apply it on all pages where you see that problem. (Where you apply this snippet will be prompted to you as you save it.)

 

@media (min-width: 992px){
ul.products.columns-4 li.product {
width: 100%;
}
}

 

Let me know!

Userlevel 4
Badge +2

 @alx314 

However for you, it seems to be a problem with WooCommerce + Elementor itself. Not sure if it’s related to what you are seeing in the GitHub thread you linked here though.

Short answer, add this to your pages with an Elementor Custom Code (CSS) and it should fix all issues no matter the grid you use (or at least I assume so).

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 100% !important;
}

Let me know!

Thank you so much for looking into it.

No success at first With Elementor Code > Custom Code > Entire Site.

But then I applied it specifically to the problematic area and it worked!

I’ll keep checking news on this if it is indeed Elementor related.

 

Merci beaucoup!

Alex.

Thank you so much @Hélène Desaulniers. Really appreciate you looking into it.

 

After copying the code into the Elementor Additional CSS it fixes it immediately. However the homepage is still displaying the same issue, even after clearing/purging all caches. I’ll dig a little bit further to see whats causing that.

 

Userlevel 4
Badge +2

Did you apply the code site-wide? @Dew07 

Code works fine, but when will have a stable fix?

Userlevel 4
Badge +2

@dimikoza Gotta ask WooCommerce/Elementor about that. On their GitHub, likely.

Hello !

 

Some updates on this.

The related github page seems to be https://github.com/elementor/elementor/issues/16001

and 3.3.8 has fixed the issue https://elementor.com/pro/changelog/

  • Fix: Products grid width issue when adjusting columns and rows in Products widget (#16001)

I have deleted the css fix and it is still displaying fine.

I did update one of my sites and the fix works fine , thanks!

Badge

Hi all, despite I have inserted the various css that you have proposed I can not solve the problem. I use the Hello theme, Elementor Pro and Woocommerce, all updated to the latest version. Can you manage to help me? Thank you very much

 

Badge

solved, it was the fault of a plugin that optimized js and css 

Reply