WooCommerce Shortcodes Cheatsheet

WooCommerce Shortcodes Cheatsheet

WordPress added support for shortcodes around 15 years ago. You can use shortcodes to easily add complicated functionality to your website which otherwise would have required you to write a lot of code yourself. Basically, shortcodes are short text snippets whose behavior depends on some more complicated code written in the backend.

While WordPress has some default shortcodes, a lot of plugins also create their own custom shortcodes to help you customize webpage 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 Products Shortcode

Product Categories Shortcode

Related Products Shortcode

WooCommerce Cart and Checkout Shortcodes

WooCommerce Add to Cart Shortcodes

Shortcode	Purpose
[products]	display a list of product thumbnails
[product_categories]	display a list of product categories
[related_products]	display a list products related to the current page
[woocommerce_cart]	show the user's cart
[woocommerce_checkout]	show the checkout form for the current cart
[add_to_cart]	add an item to the cart

The Products Shortcode

You can use the [products] shortcode in WooCommerce to display a list of products. It becomes a lot 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 the 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 display the products.
tag	Specify a comma-separated list of tags from which you want to display the products.
ids	Only display products with specific post IDs.
skus	Only display products with specific SKUs.

Lets see some examples of the [products] shortcode in action. We will use a variety of attributes to control which products or how many products are shown. The below shortcode will display 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 taken up by products. Keep in mind that paginate has to be used alongside limit for it to work.

[products limit="4" columns="4" paginate=true]

You also have control over the order in which products are shown on the webpage by using the orderby and order attributes.The orderby attribute can have several possible values listed below.

Value	Sorting Criteria
title	Sort products based on their title.
date	Sort products based on the date when they were published.
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	Display the products in a random order.

You can set the value of order attribute to ASC or DESC in order to display products in ascending or descending order.

[products limit="4" columns="4" orderby="title" order="ASC"]

There are three more attributes that you can use to show the best selling, top rated or currently on sale products.

Attribute	Usage
top_rated	Show the most highly-rated products. Not meant to be used with best_selling or on_sale.
best_selling	Show the most selling products. Not meant to be used with top_rated or on_sale.
on_sale	Only show products which are 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 around the list of products with that specific class name in order to customize their appearance.

Product Categories Shortcode

The [product_categories] shortcode is helpful if you want to display product categories on a webpage. There are several attributes that 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	Only display child categories of a specific parent.
orderby	Specify the sorting order for categories. This can be name, id, slug or menu_order.
order	Specify whether the categories are shown 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.

Lets see an example of using the [product_categories] shortcode to only display child categories under the main toy category.

[product_categories parent="22"]

Almost all of these attributes will also work with the [product_category] shortcode which shows a list of products from a particular category using the category attribute. Here is an example to display 4 products under the toys category.

[product_category category="toys" limit="4"]

The default is to sort the products by name and create 4 columns.

Related Products Shortcode

Another shortcode that I would 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 that we have discussed already. We have used it in a tutorial about creating customized WooCommerce product pages.

[related_products limit="4" columns="4"]

WooCommerce Cart and Checkout Shortcodes

Some WooCommerce shortcodes integrate important functionality into your website to display the cart, checkout or account page. Every WooCommerce-based website will require three different shortcodes: [woocommerce_cart], [woocommerce_checkout] and [woocommerce_my_account] somewhere on the website to function properly. These will usually be added automatically by WooCommerce.

Shortcode	Page
woocommerce_cart	Display a cart section on the webpage.
woocommerce_checkout	Display a checkout section on the webpage.
woocommerce_my_account	Display the user account section on a webpage.
woocommerce_order_tracking	Display the order tracking form.

As an example, adding the [woocommerce_checkout] shortcode on any page will output something similar to the image below

You can also show an entire product page anywhere you like using the [product_page] shortcode which accepts an id or sku attribute to determine which product to show.

WooCommerce Add to Cart Shortcodes

There is also an [add_to_cart] shortcode to display a functional Add to Cart button on your website. The product that you want to add to the cart can be identified by using either the id or sku attribute.

Attribute	Usage
id	Identify the product using given id
sku	Identify the product using given sku
show_price	Specify whether to display product price or not
quantity	Specify the number of products to add to cart
class	Add a custom class to the cart button
style	Apply some CSS styling to the button

You can use the [add_to_cart_url] shortcode to simply output the relative URL to add an item to 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 display any WooCommerce related notifications on non-WooCommerce pages. One such example would be displaying a message about adding products to cart after someone clicks on the Add to Cart button.

Final Thoughts

WooCommerce shortcodes provide you an easy way of adding dynamic functionality like products suggestions natively without using any 3rd party plugins. You can add the shortcodes to any post or page that you like. We have used some of them ourselves for customizing the WooCommerce shop page.

Also don't forget that you can also use WooCommerce blocks to achieve a lot of this functionality when editing posts in the Gutenberg editor.

However, knowing about all these shortcodes is still helpful and might come handy every now and then.