7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress

WooCommerce Shortcodes Cheatsheet

Scroll to top
Read Time: 6 mins

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 back end.

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, I'll give you a quick guide on how to use WooCommerce 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.

Let's 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.

WooCommerce Product ShortcodeWooCommerce Product ShortcodeWooCommerce Product Shortcode

You can also use the paginate attribute to limit the vertical space taken up by products. Keep in mind that paginate has to be used alongside limit for it to work.

WooCommerce Paginated Product ShortcodeWooCommerce Paginated Product ShortcodeWooCommerce Paginated Product Shortcode

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 the order attribute to ASC or DESC to display products in ascending or descending order.

WooCommrce Products Shortcode PopularityWooCommrce Products Shortcode PopularityWooCommrce Products Shortcode Popularity

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 top-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.
WooCommerce Product Shortcode BestsellingWooCommerce Product Shortcode BestsellingWooCommerce Product Shortcode Bestselling

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.

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

WooCommerce Product Category ShortcodeWooCommerce Product Category ShortcodeWooCommerce Product Category Shortcode

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 four products under the toys category.

WooCommerce Toy Product CategoryWooCommerce Toy Product CategoryWooCommerce Toy Product Category

The default is to sort the products by name and create four 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, which we have discussed already in a tutorial about creating customized WooCommerce product pages.

Related Products ShortcodeRelated Products ShortcodeRelated Products Shortcode

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.
woocommerce_my_account Display the user account section.
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.

WooCommerce Checkout ShortcodeWooCommerce Checkout ShortcodeWooCommerce Checkout Shortcode

You can also show an entire product page anywhere you like by 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 a given ID.
sku Identify the product using a given SKU.
show_price Specify whether to display the product price or not.
quantity Specify the number of products to add to the 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 the cart. Here is an example:

Another useful WooCommerce shortcode is [shop_messages], which lets you display any WooCommerce-related notifications on non-WooCommerce pages. One such example would be displaying a message about adding products to the cart after someone clicks on the Add to Cart button.

Final Thoughts

WooCommerce shortcodes give you an easy way of adding dynamic functionality like product suggestions natively, without using any third-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.

WooCommerce Gutenberg BlocksWooCommerce Gutenberg BlocksWooCommerce Gutenberg Blocks

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.