Woocommerce shop/sidebar proportions


I am rocking your Illdy theme on my website starthiking.nl

My webshop can be found on www.starthiking.nl/maaltijden
For this webshop, I am wondering if the layout can be changed. Now the sidebar takes in almost half of the screen, I would like to give more room to the products and possibly then show 3 or 4 collums.

Furthermore, is there a way to fix the ‘add to cart’ button so that it is on the same height for every row?

Thanks in advance,

Hi Hiker

Hope you are having a good day and thank you for your question :slight_smile:

Please add this CSS in appearance - customize - additional CSS

@media (min-width: 768px) {
.post-type-archive-product .col-sm-7 {
width: 70%;
.post-type-archive-product .col-sm-4 {
width: 30%;
.woocommerce ul.products li.product .star-rating {
position: absolute;
right: 0px;

Colorlib Support Team

Hi Noda,

Thank you! Hope you are doing well too.
You are amazing, the width is perfect (I further tuned the percentage down to 27% which is perfect).

Just a couple more things:

  1. while the shop page is perfect, the category pages still have the wide sidebar. How do I adjust the category pages too?
  2. fixing the star rating to a absolute position placed it directly next to the price, which in my opinion is not a very nice solution - especially as it’s not only the rating that is causing differences in placement: as do long titles and longer stocknotices. Is there another way to fix the ‘add to cart’ button for example?
  3. eventhough I have selected 3 product colums in the customizer, the website still continues to display two product colums.

Hope you could help me with these last things!


Another additional question that has popped up is:


How do I display the product thumbnails in the cart totals? When trying something with css I could get them in the customizer but I don’t get them visible on the actual live site.