WordPress added support for shortcodes about 15 years ago. You can use shortcodes to easily add complicated features to your website that would otherwise have required you to write a lot of code yourself. Basically, shortcodes are short snippets of text whose behavior depends on more complicated code written in the backend.
Although WordPress has some predefined shortcodes, many plugins also create their own custom shortcodes to help you customize web page content more effectively. WooCommerce is one of those plugins. In this post, we will give you a quick guide on how to use WooCommerce shortcodes.
The short code of the products
Short code of the product categories
Related products shortcodes
Shortcode for WooCommerce cart and checkout
WooCommerce Add to cart Shortcode
The short code of the products
You can use the [products] shortcode in WooCommerce to display a list of products. It becomes much more powerful with the help of various arguments or attributes.
| Attribute | Usage |
|---|---|
limit |
Specify the number of products to show. |
columns |
Specify the number of columns in which to display products. |
paginate |
Specify if you want to split the products across multiple pages. |
category |
Specify a comma-separated list of categories from which you want to view products. |
tag |
Specify a comma-separated list of tags you want to view products from. |
ids |
Display only products with specific post IDs. |
skus |
Display only products with specific SKUs. |
Let’s see some examples of [products] shortcode in action. We will use a variety of attributes to control which products or how many products are shown. The shortcode below will show six products from our store in two rows and three columns. The products will be sorted alphabetically by default.
[products limit="6" columns="3"]
You can also use the paginate attribute in order to limit the vertical space occupied by the products. Keep in mind that paginate must be used together limit for it to work.
[products limit="4" columns="4" paginate=true]
You also have control over the order in which the products are displayed on the web page using the orderby And order attributes orderby the attribute can have several possible values listed below.
| Value | Sorting criteria |
|---|---|
title |
Sort the products by their title. |
date |
Sort products by publication date. |
id |
Sort products based on their Post ID. |
popularity |
Sort products based on the number of sales. |
rating |
Sort products based on the average product rating. |
rand |
View products in random order. |
You can set the order attribute value to ASC or DESC to view the products in ascending or descending order.
[products limit="4" columns="4" orderby="title" order="ASC"]
There are three other attributes you can use to show top selling, top rated, or currently on sale products.
| Attribute | Usage |
|---|---|
top_rated |
Show the most popular products. Not meant to be used with best_selling or on_sale. |
best_selling |
Show the best-selling products. Not meant to be used with top_rated or on_sale. |
on_sale |
Show only products currently on sale. Not meant to be used with top_rated or best_selling. |
[products limit="4" columns="4" best_selling]
You can also use a class attribute in the product shortcode to add a wrapper to the list of products with that specific class name to customize their appearance.
Short code of the product categories
The [product_categories] shortcode is useful if you want to display product categories on a web page. There are several attributes you can use with this shortcode.
| Attribute | Usage |
|---|---|
ids |
Show only specific categories based on IDs. |
limit |
Specify the number of categories to display. |
parent |
Display only child categories of a specific parent. |
orderby |
Specify the sort order for the categories. This can be name, id, slug or menu_order. |
order |
Specify whether the categories are displayed in ascending or descending order. |
columns |
Specify the number of columns to display the categories. |
hide_empty |
Hide empty categories or categories with zero products. |
Let’s see an example of using [product_categories] shortcode to display only the child categories under the main toy category.
[product_categories parent="22"]
Almost all of these attributes will work with the [product_category] shortcode that displays a list of products of a particular category using the category attribute. Here is an example to display 4 products in the toys category.
[product_category category="toys" limit="4"]
The default is to sort the products by name and create 4 columns.
Related products shortcodes
Another shortcode I’d like to mention here is the [related_products] shortcode which is used to display a list of related products. You can pass three attributes to this shortcode called limit, columns And orderby which we have already discussed. We used it in a tutorial on creating custom WooCommerce product pages.
[related_products limit="4" columns="4"]
Shortcode for WooCommerce cart and checkout
Some WooCommerce shortcodes integrate important features into your website to display your cart, checkout or account page. Each WooCommerce-based website will require three different shortcodes: [woocommerce_cart], [woocommerce_checkout] And [woocommerce_my_account] somewhere on the website to work properly. These will usually be added automatically by WooCommerce.
| Short code | Page |
|---|---|
woocommerce_cart |
View a section of the shopping cart on the web page. |
woocommerce_checkout |
View a payment section on the web page. |
woocommerce_my_account |
View the user account section on a web page. |
woocommerce_order_tracking |
View the order tracking form. |
For example, adding the [woocommerce_checkout] shortcode on any page will produce something like the image below
You can also show an entire product page wherever you want by using the [product_page] shortcode that accepts a id or sku attribute to determine which product to show.
WooCommerce Add to cart Shortcode
There is also a [add_to_cart] shortcode to display a functional Add to Cart button on your website. The product you want to add to your cart can be identified using either the id or sku attribute.
| Attribute | Usage |
|---|---|
id |
Identify the product using the id provided |
sku |
Identify the product using a certain sku |
show_price |
Specify whether or not to display the product price |
quantity |
Specify the number of products to add to the cart |
class |
Add a custom class to the cart button |
style |
Apply a CSS style to the button |
You can use the [add_to_cart_url] shortcode to simply produce the relative URL to add an item to the cart. Here is an example:
[add_to_cart_url id="90"] // Outputs: ?add-to-cart=90
Another useful WooCommerce shortcode is [shop_messages] which gives you the ability to view any WooCommerce related notifications on non-WooCommerce pages. One such example could be seeing a message about adding products to the cart after someone clicks the Add to Cart button.
Final thoughts
WooCommerce shortcodes give you an easy way to add dynamic features like product suggestions natively without using third-party plugins. You can add the shortcodes to any post or page you like. We used a few ourselves to customize the WooCommerce shop page.
Also, don’t forget that you can also use WooCommerce blocks to get many of these features while editing posts in the Gutenberg editor.
However, knowing all of these shortcodes is still useful and may come in handy from time to time.
