WooCommerce Hack #4 – changing the display order of products.

This is what I have done to make it easier to show your favourite products on the home page of your WooCommerce store.

Featured products.  As your default site install, it shows you the 12 most recent products you’ve added to your store.  I wasn’t happy with this from very early on.  I changed the code to use the featured products function and show them in the order that I want them, not have to try to figure out the date order I added them.

So lets get in and start editing.

If you are doing this on a live site, with potential visitors, the first step is to choose the order of your products, then we’ll go change the code in the backend afterwards, so we don’t show a blank home screen.

The quickest way is to use the Quick Edit function.  Open your first product using quick edit, enter number 1 in the order box and then click the featured tick box.  This will be the very first product that shows in the top left of your screen, or the first in the mobile view list.

hack 4 - featured productGo through and edit the next 19 other products that you’d like to show on your home page.  I say 19 because I increased my front page from 12 to 20 products, but you can make it whatever your like.

Now lets go change the front page.

Go to Pages, and click edit on the Home – Front Page.

hack 4 - edit page

Select the single line of existing code and replace it with this code.   If you like, keep a copy of the original line of text, just for later reference.


[featured_products per_page="20" columns="4" orderby="menu_order" order="asc"]

It should now look something like this…

You can see that we are showing featured products, we’re going to show 20 of them, in 4 columns, we are going to sort them by the number we entered in the order box, in an ascending order.  Pretty simple stuff.

hack 4 - editing home pageHere’s something else I like to do to make it look a little neater.

Go to your Appearance / Shop Settings.

hack 4 - shop settings

Then scroll down and adjust your product spacing to 70.  This makes your products sit evenly if they have up to 4 lines of text.  I personally prefer the white space over the jumbled mess.

hack 4 - product spacing

Good luck and enjoy…

 

 

Leave a Reply