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

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.

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.

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.

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

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.

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.

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.