Two Product Columns Error in Wootique

October 9th, 2014 | 16 Comments |

three columns in wootiqueSo, I’m not quite sure what our friends over at Woo are up to, but it seems like the last update of woocommerce wasn’t as compatible with their Wootique theme as they had probably hoped it to be. I’ve run into several issues that shouldn’t even be issues when dealing with a “WooCommerce compatible theme” designed by the designers of WooCommerce!

End of rant.

Moving on.

The issues I ran into were blurry thumbnails in the featured section and product lists aligned in only two columns instead of three columns.

So here’s the solution to the blurry featured product images:

Go to your WooCommerce settings >> products >> and change the product image size to 550×550. Once you’re done changing those numbers, install the ‘Regenerate Thumbnails’ plugin, activate it and then regenerate your thumbnails.

Easy fix.

Now, on to fixing the columns issue:

To show three columns on your default shop page and ‘recent products’ section of your home page, simply paste the code below into your ‘custom.css’ file.

.woocommerce ul.products li.last, .woocommerce-page ul.products li.last
{
margin-right: 0;
}

Problem solved!

16 Comments »

  1.  Comment by Nitin Kejriwal — November 1, 2014 @ 9:03 pm

    Thanks Guys that was really helpful

  2.  Comment by Chrissy — November 4, 2014 @ 2:05 pm

    Thanks so much for this!

  3.  Comment by Len — November 17, 2014 @ 8:03 pm

    Hi David,

    Thanks a mil for this! I pasted your code into my ‘custom.css’ file, yet, it remained 2 columns. Did I miss something perhaps? Also, is there a way to bring it down from 12 items in the ‘Recent Products’ to, say, 9 instead? I’ve looked everywhere, yet can’t seem to find a way.

    Thanks again :)

    L

  4.  Comment by Magnus — December 17, 2014 @ 1:10 am

    Thanks for the tip. Worked great!

  5.  Comment by Sophie Cussen — December 17, 2014 @ 7:04 pm

    Thank you so much for posting the solution to this update for Wootique. It worked a charm, almost!
    Unfortunately I’m still having problems with the three column layout and wondered if you might know what is causing the issue? It’s on my website – http://houseofmouse.org.uk/ .
    Many thanks,
    Sophie

  6.  Comment by Vijay — December 29, 2014 @ 8:03 am

    You are great sir. thank you very much for posting valuable information. I become a big fan of you once again thank u.

  7.  Comment by Mark — January 14, 2015 @ 5:33 pm

    Hey, Michael. I’m having the same problem with the 2 products per column instead of 3 issue on Wootique. I pasted your code into my custom css file and hit update and it’s still not working. I deleted my cache, thinking that might do it, but nothing.

    Your instructions are very straight forward, but I’m super new at this so maybe I’m doing “stupid” that I am not aware of.

    Thanks, so much! Mark

  8.  Comment by Mark — January 14, 2015 @ 8:05 pm

    Hey, Michael. One more piece of info. Originally there were some instructions and I believe a small amount of code on my “custom css” page, but now it is completely blank. I’m wondering if I somehow accidently deleted it. If that’s the problem, then besides the line

    .woocommerce ul.products li.last, .woocommerce-page ul.products li.last
    {margin-right: 0;}

    Do I need the code that was originally on my css page?

    Thanks again! Mark

  9.  Comment by Mark — January 15, 2015 @ 12:05 pm

    Hey, Miachel.

    I was able to retrieve the missing code that I accidentally deleted, and your fix works perfectly now. Thanks so much for your help! Cheers.

  10.  Comment by Keppi — January 16, 2015 @ 10:33 am

    Thanks, this finally solved the issue!

  11.  Comment by Alberto — January 18, 2015 @ 12:02 am

    Thank you very much , I lost a long time until I found this solution.

    I have another question , I hope you can help me .
    On page Store (shop) I can not put full width .
    Any solution?

    And finally , you can put 4 columns on page Store

  12.  Comment by Shannon — February 3, 2015 @ 5:42 am

    Life saver! Thank you! I could not figure out how to get the three columns!

  13.  Comment by ria.india — February 7, 2015 @ 11:05 pm

    Thank you for solution with 3 columns 😉

  14.  Comment by Emon — March 11, 2015 @ 7:18 pm

    you are the best man!!! it worked fine.

  15.  Comment by YM/california — March 21, 2015 @ 6:18 am

    Thank you so much! I tried so many ways, adding codes/plug-ins, deleting codes, revised numbers etc…in the end my website got crushed and wiped out completely. I had to reinstall wordpress and wootique, started to build the website all over again…You are the best!!

  16.  Comment by Matt — March 24, 2015 @ 5:51 am

    Thank you!!!

RSS feed for comments on this post. TrackBack URI

Leave a comment