How to show WooCommerce categories on the homepage

While you can always make your WooCommerce Shop page as the homepage in WordPress, sometimes you may want the shop to just occupy a section of your homepage, while the rest of it talks about other aspects of the business. In this case, it would be a good idea to display some product categories on  a section of your homepage. In this post, we will explore how to show WooCommerce categories on the homepage.

WooCommerce provides a lot of shortcodes for us to use as per our requirements. Among products and product categories, there are three shortcodes which are particularly useful viz. [product_categories], [product_category] and [products]. The shortcode [product_categories] is used to display all categories of products, while [product_category] is used to display all the products of a certain category. The shortcode [products] can be used with many parameters to show products based on a number of conditions and filters. To display WooCommerce product categories on your homepage, you have to simply insert this shortcode [product_categories] while editing your homepage:

Doing this will display the categories of products right below the two lines of text:

This shortcode accepts many parameters that you can use based on your needs:

For example, in the above screenshot, the categories which does not have products in them have been hidden by default. In our example, we have a category called as Fashion which has no products added to it yet. We will edit the shortcode to make it visible, in this way:

[product_categories hide_empty=0]

You can see that the category “Fashion” which was not visible earlier because it has no products in it, is now visible:

WooCommerce shortcodes such as this one can be used on any page, and not just on the homepage.

Showing products from a particular category

The other shortcode i.e. [product_category] is useful when you want to show products from just one category. This may be a requirement in various scenarios e.g., if you want to create a homepage having multiple sections with one section for one category of products each. Inserting [product_category category=”furniture”] in the homepage of  our example will display all the products from the furniture category. The text “furniture” is the name of the category slug, which you will find under Products->Categories.

The result of this will be:

As you can see in the image above, you can only view products from the category which has the slug “furniture”. You can add a title before inserting the shortcode to make it easier for the user to understand which category these products belong to. In this way, you can use the shortcode multiple times on the page, each time with a different category slug. Let’s see what attributes this shortcode has:

We used the category parameter in our example.

Show best-selling products or on-sale items

While WooCommerce provides specfic shortcodes such as [sale_products], [best_selling_products], [top_rated_products] etc.  for various needs, the shortcode [products] clubs all this into one. You can use the [products] shortcode to display all this and more. For example, let’s see how to display products which are on sale using the shortcode [products] and one of its special attributes known as on_sale.

[products limit="5" columns="4" on_sale="true" ]

Inserting this while editing the homepage will display products which are on sale. Let’s also add a title before it that says, “On Sale”.

We had set an upper limit of 5 which means that a maximum of six products would be displayed. The store in our example has only 3 products which are on sale and hence, you can view just 3. Just like on_sale, this shortcode has one more special attribute known as best_selling which displays the best selling items of your store.

Click here to view a complete and extended list of attributes that this shortcode offers. As mentioned before, all these shortcodes can be used not just on the homepage but on any page.