WooCommerce Shortcodes – A Complete Overview

As you might well know, Shortcodes gives us the ability to add special content, almost anywhere on our website. 

Unlike widgets, we are not limited to sidebars or footers or pre-assigned widget areas. You can add the shortcodes anywhere.

I am sure you would know a shortcode when you see it because it would be surrounded by square brackets, just like the one below:

[Shortcode]  

WooCommerce also comes with various shortcodes that allow you to add their various functionalities inside a post, page, sidebar, widget, etc..

In this article, we will see the various WooCommerce shortcodes, their usage and how to add those WooCommerce shortcodes inside posts and pages.

How to Add WooCommerce Shortcodes

Before seeing the various WooCommerce shortcodes, let’s first discuss how to add those shortcodes inside your post or pages.

We can add the WooCommerce Shortcodes in two different ways:

1. Paste the shortcode in your editor
2. Using WooCommerce Shortcodes plugin.

Paste the Shortcode in your editor

If you are using a classic editor, you can simply paste the shortcode in your editor which will generate the required result.

If you are using the Gutenberg block editor, you need to use the Shortcode block available in their editor.

Select the + button search for the ‘shortcode’ block.

Then write or paste the shortcode inside the box shown below:

WooCommerce Shortcodes plugin

You can also add all the WooCommerce shortcodes using the WooCommerce shortcodes plugin. 

This plugin adds a WooCommerce shortcode generator that will automatically generate the shortcodes instead of you typing it. 

Once installed and activated, you will see a WooCommerce TinyMCE dropdown button added to the top of your editor.

 

In the case of Guttenberg block editor, search for “WooCommerce” in its block and will find all the WooCommerce shortcodes that you could use.

Adding shortcodes using this plugin is much simpler than the first method as you don’t need to write the shortcode; instead, you could just use its WooCommerce shortcode generator that will automatically generate the shortcode.

WooCommerce Shortcodes

Having seen how to use the WooCommerce shortcodes, let’s discuss the various shortcodes that are available in WooCommerce. 

There are various shortcodes for WooCommerce pages, WooCommerce products, Product categories, etc. 

Let’s discuss each one separately.

WooCommerce Product Shortcodes

WooCommerce product shortcode is one of their most powerful and robust shortcodes.

[products] 

This Shortcode will allow you to display WooCommerce products. You can display a single product or multiple products by their post Id, SKU, categories and much more.

Let’s look at some examples on how we can use these product shortcodes

WooCommerce Product Shortcode examples

• Display a single product by ID or SKU 
  

  [products ids="15"]
  [products skus="F012"]

• Display multiple products by ID or SKU
  

  [products ids="1,15,13,14"]
  

  You can also add various attributes like order by, columns, order, etc..
  

  [products ids="1,15,13,14" columns=”2” orderby=”rating” order=”Asc”]

• Display Recent products
  If you want to display the recent products, you can use the below shortcode:
  

  [recent_products per_page="12" columns="4" orderby="date" order="ASC"]

• WooCommerce Featured products shortcode
  You can display your featured products using the shortcode:
  

  [featured_products per_page="12" columns="4" orderby="date" order="ASC"]

• Display Sale Products
  You can display your products that are on sale using the shortcode:
  

  [sale_products per_page="12" columns="4" orderby="date" order="ASC"]

• Display Best selling products
  Display best selling products using the shortcode:
  

  [best_selling_products per_page="12" columns="4" orderby="date" order="ASC"]

WooCommerce Product category Shortcodes

If you are looking for WooCommerce product category shortcodes, here it is:

[product_category]  

This Shortcode will display the products of a particular product category.

[product_categories] 

This Shortcode displays the product categories.

There are a total of seven attributes that you could use in displaying product categories: Number, Order By, Order, Columns, Hide empty, Parent Id, Id’s

i) Set the Number of categories that should be displayed.

[product_categories number="3"]

 ii) Order the categories by Name. You can also order it by Id, count, and slug.

[product_categories orderby="name"]

 iii) Order it in the Ascending or Descending format.

[product_categories orderby="name" order="ASC"]

 iv) Set the Number of columns in which the categories should be displayed.

[product_categories columns="2"]

 v) Set False to hide categories that have no products.

[product_categories hide_empty="true"]

 vi) This will display all the child categories of the parent category that belongs to Id 1.

[product_categories parent="1"]

vii) Display the categories by their Id’s.

[product_categories ids="2,4,25"]

WooCommerce Page Shortcodes

• WooCommerce cart shortcode
  

  [woocommerce_cart]

  This Shortcode will display the customer’s cart content and also all other elements of the cart like having an interface for coupon codes, etc..

• WooCommerce my account shortcode
  

  [woocommerce_my_account] 

  
  Using this shortcode, you could display the ‘my account’ page of the customer where they could have a look at their past orders and update their details.

• WooCommerce Checkout shortcode
  

  [woocommerce_checkout] 

  You could display the checkout page using this shortcode.

• Order Tracking form shortcode
  

  [woocommerce_order_tracking] 

  
  This will display the order tracking form where the user could see the status of an order by entering their order details.

WooCommerce Product Page Shortcode

You can display your full Product page by their Id or SKU using the shortcode:

[product_page id="25"]

[product_page sku=”FOO”]

WooCommerce product search shortcode

[woocommerce_product_search] 

This Shortcode will display a live product search that will provide instant search results while the customer types.

You can also add attributes like order, title, limit, show description, etc..

[woocommerce_product_search show_description="no" limit="20"]

Bonus

As a bonus for you, I would like to mention a plugin that would really surprise you and be extremely useful in building your WooCommerce store.

While WooCommerce does have shortcodes to use their functionality, it is very limited. WooCommerce does not have default shortcodes for certain functions like having a login form, customer reviews, etc..

This is where Woo Shortcodes Kit has done an amazing job.

Woo Shortcodes Kit

Woo Shortcodes Kit comes as a free add-on for WooCommerce that gives you more shortcodes which WooCommerce don’t offer by default, and also gives you more customization option with more than 60 functions.

Let’s look at some shortcodes that this plugin offers

WooCommerce login shortcode

[woo_login_form]

This Shortcode will help you to display a login form on any page. You can also choose the page to redirect the user after the login using their settings option.

WooCommerce Reviews shortcode

[woo_review_products]

Using this shortcode, you could display the customer reviews of the product along with the link to the product.

There are many more options available in this plugin which is definitely worth a try.

Hope this article helps you in getting a clear understanding of the WooCommerce shortcodes and how to use them.

If you have any questions,  feel free to ask in the comments section.