Tagged: products, shopping, woocommerce
Hello,
Can you tell me how I can change the mobile view to allow for 3 items to be displayed instead of one? This is in the products area of the woocommerce plugin.
Many thanks,
Graeme
Hey boxwell,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.shop_columns_3 .products .product {
margin: 0 1% 1% 0 !important;
width: 32.6% !important;
}
Best regards,
Yigit
Hello,
Thanks for your quick response. I’m afraid this has not had any effect.It is still showing one item per row on a mobile device.
Best wishes,
Graeme
Hello,
Of course, you can find the shop element here:
https://sweetheartshair.com/shop/
Best wishes,
Graeme
Hi!
That would not be easily possible since you are using 5 columns on desktop.
Please add following code to Quick CSS if you would like to display 5 columns on mobile as well
.shop_columns_5 .products .product {
margin: 0 1% 1% 0 !important;
width: 19.2% !important;
}
Cheers!
Yigit
Hi,
I used this code to display 3 product columns on mobile, however there are some rows that have 2 empty columns. I can’t seem to find the reason why this is happening. Certain pages work fine but some don’t. Please take a look at this link from mobile. Thanks in advance!
Hi blingblingsister,
You have to add this rule to your both of your mobile queries in woocommerce-mod.css
.responsive #top #main .products .product.first {
clear: both;
}
Let us know if this was helpful.
Best regards,
Victoria
Its my 6th Woocommerce and there is still not a solution in the web of an php code to switch the grid columns in tablett or in specific width. ??? :( .( ,(
Hi,
Unfortunately no, but it is a nice idea which we can provide to our development team :)
Best regards,
Basilis