Hi,
I am trying to find a way to display products in 3 columns rather than 4 on the shop pages.
Is there a quick and easy way to do this?
Thanks
Kevin
Hello Kevin,
The theme does not have an option to change the number of colums, but it can be done by modifying “functions.php” like so: http://screencast.com/t/y2x3I8JajU. (the default is set to 4).
Thank you.
Hi,
I did try that but this only gives me 1 row of 3 products and the thumbnails are still the same size as if it were 4 products per row.
http://www.screencast.com/t/UnrlN8CVk
I need 3 products per row which are resized to fill across page like this:
http://www.screencast.com/t/EznZt7jGC9I
Can this be done?
Thanks
Kevin
Hello Kevin,
Your can achieve the result you want by recreating your shop page in visual composer. Just edit the ‘products’ element and select the 3 columns layout like so: http://screencast.com/t/kyHOXXxaV.
Make sure to add your edited shop page to the woocommerce plugin settings: http://screencast.com/t/OHL0swXkwSDP
The result: http://screencast.com/t/IV7hC99l
Thank you.
Hi,
I tried that but I end up with 2 sections of products.
http://www.screencast.com/t/rPK83OrVp2m
One section which appears with 3 products per row (no pagination) after editing the page as suggested with visual composer then another section below (with pagination) outputted by woocommerce.
I am trying to get the shop page to display 3 items per row, similar to this thread I found but with 3 products per row:
https://forum.tagdiv.com/topic/woocommerce-layout/
I managed to get 3 items per row by modifying the functions.php but again the images wouldn’t resize to take account of the extra space.
I hope this helps.
Kevin
Hi again,
I have managed to get 3 products per row using the advice from this thread:
https://forum.tagdiv.com/topic/woocommerce-layout/
I also adjusted the custom css to correct the sizes and added to the “advanced css” section in the theme options.
I am not 100% sure if this is correct and I am also missing the css for the last section for “Phones”
Can you give any advice on what the css should be for the “Phone” section?
Thanks
Kevin
Hi,
Please try this custom css in Theme Panel > Custom Css for mobile device – http://screencast.com/t/KH3RKTjyiI
@media(max-width: 767px) {
body #td-outer-wrap .td-main-content .products li {
width: 32% !important;
float: left !important;
clear: none !important;
margin-left: 2%;
}
body #td-outer-wrap .td-main-content .products li.first {
clear: left !important;
margin-left: 0;
}
}Thanks!
Hi,
That is perfect.
Thank you
Kevin
hi Alin, I have a little issue with the woocommerce shop page. i set the page with vc.. use 2 column and i insert the sale product element and on the second column i insert the cart element. but what i show is always the default side bar. i have tried many ways to resolve this. could you please take a look. http://pusatjualanonline.com/shop/
my page admin screenshot http://screencast.com/t/zN7yiAwTwiEm
what i want it to be is i want to set the shop page to have 2 column with chosen element.. (i.e. Product view on first column, cart on second column)
thanks
