Question

WooCommerce Product Widget not respecting columns set


Userlevel 1

I think I may have spotted a bug in the latest release of Elementor…

When using the WooCommerce Product Widget, when setting the number of columns for either mobile or tablet views, this is not being correctly rendered on the live website view. As an example, setting the column count to 1 in mobile view still results in 2 columns being shown when viewing the website. An example is on the following website: Facial Oils Archives - ES Skincare

In the example above, on mobile view, the visitor should only see one column but instead are seeing 2 columns.


13 replies

Userlevel 1

Having the same problem here since updating Elementor and Elementor pro. When I set the products per row it has no effect. I set tablet to 2 - it shows 3. I set mobile to 1 - it shows 2. 
 


You can hack around it by hardcoding some css to set the columns:

@media (max-width: 480px) {
.elementor-element.elementor-products-grid ul.products {
    grid-template-columns: repeat(1,1fr);
}
}

However we shouldn’t have to do this when elementor should just respect what we are setting it to. 

Am I missing something? 

Having the same problem.  Has anyone heard from elementor on fixing this?

 

Userlevel 1

I’ve just logged it as a bug with support. I’d hope that someone from the dev team reads these posts in the community… but just in case they don’t, thought I’d best log it as a bug!! :thinking::nerd::grinning:

When I hear anything back I’ll post back here.

Userlevel 7
Badge +4

Update 3.3.5 is out for this issue:

https://github.com/elementor/elementor/issues/15773

@Abner Rojas 

Thank you, but the issue is not resolved.  Please see these:

https://github.com/elementor/elementor/issues/15857

And

https://github.com/elementor/elementor/issues/15773

Userlevel 7
Badge +4

@Abner Rojas

Thank you, but the issue is not resolved.  Please see these:

https://github.com/elementor/elementor/issues/15857

And

https://github.com/elementor/elementor/issues/15773

Darn it! 

:grinning:

Still have the same problem

 

Hi @WebsitesByDave 

It looks like this problem of yours was resolved, or? Can you share what did you do? I have the same problem with the mobile view as well, so it would be very helpful :slight_smile:

Hi!

I have the same problem! Elementor V 3.4.4  and Elementor Pro V 3.4.1

is there a solution?

thx

Michael

Badge +1

Hi guys.

I have the same problem too!

On the desktop I put 3 columns and on the mobile 2 columns, but it keeps showing in 3 columns on the mobile

Elementor - 3.4.5

Elementor Pro - 3.4.2

Please using this, it’s can work for me.

Desktop: column 5

TableLet: column 3

Mobile: column 2

if you want modify other column, change the number desktop 5, tablet 3, mobile 1

/* for desktop view */
body[data-elementor-device-mode="desktop"] selector ul.products{
grid-template-columns: repeat(5, 1fr);
}
/* for tablet view */
body[data-elementor-device-mode="tablet"] selector ul.products{
grid-template-columns: repeat(3, 1fr);

} /* for mobile view */
body[data-elementor-device-mode="mobile"] selector ul.products{
grid-template-columns: repeat(2, 1fr);
}

Paste this code in elementor edit panel for “Custom CSS”, if panel show css error “Unknown property grid-template-columns”, don’t worry, it’s work!

 

 

Please using this, it’s can work for me.

Desktop: column 5

TableLet: column 3

Mobile: column 2

if you want modify other column, change the number desktop 5, tablet 3, mobile 1

/* for desktop view */
body[data-elementor-device-mode="desktop"] selector ul.products{
grid-template-columns: repeat(5, 1fr);
}
/* for tablet view */
body[data-elementor-device-mode="tablet"] selector ul.products{
grid-template-columns: repeat(3, 1fr);

} /* for mobile view */
body[data-elementor-device-mode="mobile"] selector ul.products{
grid-template-columns: repeat(2, 1fr);
}

Paste this code in elementor edit panel for “Custom CSS”, if panel show css error “Unknown property grid-template-columns”, don’t worry, it’s work!

 

 

it works for me, thanks

Reply