Search the site:

Home Blog How to show WooCommerce categories on the homepage

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:

show WooCommerce categories on the homepage - Using the product_category shortcode to display all categories on the homepage

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

show WooCommerce categories on the homepage - Categories displayed on the homepage

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

Parameter Accepted Value Description Default Value
number 12 Number of categories that you want to display All categories with products
orderby ID | title | name  Order the product by name
order ASC, DESC Determines the order of the categories, whether ascending or descending. ASC
columns 4 Number of columns 4
hide_empty 0 | 1 0 to show empty categories and 1 to hide categories which don’t have any products listed under them. 1 i.e. true
parent 0 | 1 0 to display only the parent categories and 1 to display all the categories (with sub-categories). However, upon testing, it was found that on manually assigning the value as 1 to this parameter, no categories get displayed. 1
ids 12 comma separated list of category IDs of categories that you want to display

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]

show WooCommerce categories on the homepage - Using the product_categories shortcode with the hide_empty parameter to display all categories including empty categories.

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

show WooCommerce categories on the homepage - All categories including empty categories displayed on the homepage

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.

show WooCommerce categories on the homepage - Category slugs

show WooCommerce categories on the homepage - Using the product_category shortcode to display products from a particular category

The result of this will be:

show WooCommerce categories on the homepage - Products from the furniture category displayed

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:

Parameter Accepted Value Description Default Value
per_page 12 Number of products that you want to display per page. 12
orderby title| name| date| ID| parent| rand| menu_order Order the product by title
order ASC, DESC Determines the order of the categories, whether ascending or descending. ASC
columns 4 Number of columns 4
category slug Name of the category that you want to display products from.

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”.

show WooCommerce categories on the homepage - Using the products shortcode to display items on sale

show WooCommerce categories on the homepage - On Sale items displayed

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.

Browse more in: WooCommerce How Tos, WooCommerce Tutorials

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
from purchased

Subscribe Now