There support,
I currently have four rows in my woocommerce archive page or shop page. I wish to increase this to 6 rows, how can I archieve this?
See page pix below:
http://www.screencast.com/t/UJvAlYai
Thanks
Hello,
Please check this topic: https://forum.tagdiv.com/topic/more-products-on-shop-and-shop-category/
https://www.screencast.com/t/SOj7BujVkjZN
Thank you!
Please the above did not addressed my problem.
This link will show what exactly I am talking about:
https://premium.wpmudev.org/forums/topic/changing-of-woocommerce-columns-on-category-pages
I will need the solution for both 5 columns and six columns.
Thanks
The same method as exemplified above works just fine: https://www.screencast.com/t/9vhTPr1nc
before modifying the number: https://www.screencast.com/t/3scp1iGeooc
After increasing the number to 40: https://www.screencast.com/t/2bEh2Xyf
Thank you!
Could you be so kind to read what I sent you on this link:
https://premium.wpmudev.org/forums/topic/changing-of-woocommerce-columns-on-category-pages
I am not talking about increasing the product number, but increasing the numbers of columns for category design from the default 4 column to 5 column on the shop or archive page.
By the way, I have done what you asked me from your first response, that only affects the product number, and not the category column number.
If you even check what you sent to me now on the increasing from 4 to 40, you will discovered the columns on the archive page remains 4, but the product number is 40.
I am concern with increasing the column and the product number.
The solution was tackled in the link above by using css to reduce the width of the archive page to accommodate more columns.
Looking forward to your action.
Thanks
Hi,
It is misleading because you mentioned rows in 2 replies and the main title of this post so I figured rows is what you are after not columns.
Unfortunately there is no simple solution for increasing the column count. Rows can be easily changed but columns are much more complicated. You will have to hire a freelancer to help out as all of the css will have to be rewritten and it takes quite a bit of time and effort to do . Unfortunately we do not have a customization department. We try to help out where we can but we cannot offer any custom work, sorry
Thank you for your understanding.
I was able to make some level of progress with this css code
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left;
width: 18%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 2%;
position: relative;
}
What is left is for the 5th column image to show up.
See image below.
https://www.screencast.com/t/UV6M7QQItxO
See image links below:
https://www.screencast.com/t/0yvo5KXfvWw
https://www.screencast.com/t/PQwKoWzlvaXW
https://www.screencast.com/t/xPCbHowCI
I appreciate your effort.
Thanks
NOTE BEFORE
When I implemented this css code in the theme, the 5th column was created, but with empty space. What should I add to the CSS Code for a product image/category image to show up.
Thanks.
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left;
width: 18%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 2%;
position: relative;
}
Hello pstgibson,
Try to use the following code and place it in Theme panel -> Custom CSS area.
The code is ->
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left;
width: 18%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 2%;
position: relative;
clear:none;
}
The result is here -> https://www.screencast.com/t/wSqowVvo
Thanks for the message!
Catalin,
Thanks, it worked.
I want this effect to only apply to desktop only.
Pls assist with the css code.
Thanks.
Hello pstgibson,
If you want to target only the desktop viewport you should use a media queries for this width. To achieve this, please place the above code in that area from Advanced Custom CSS code here -> https://www.screencast.com/t/MuUJe9O3c
Thanks for the message!
Hellow Catalin,
I thought we finally solved this column issue. But the product images in a category are scattered, there are white empty product image space. See pix below
https://www.screencast.com/t/Yrflv7lvBB
https://www.screencast.com/t/CbZwNBCvkua
I will need a css code to further correct this issue.
Thanks
Hi,
Please provide a link to the page where this is happening so we can inspect the issue further.
Thanks
Kindly take a look, maintenance mode is now temporary disable.
https://w.warrimarket.com/product-category/electronics-stores/
This is to notify you that the problem is now solved.
Thanks
