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.
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.
||Specify the number of products to show.|
||Specify the number of columns in which to display the products.|
||Specify if you want to split the products across multiple pages.|
||Specify a comma-separated list of categories from which you want to display the products.|
||Specify a comma-separated list of tags from which you want to display the products.|
||Only display products with specific post IDs.|
||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.
[products limit="6" columns="3"]
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.
[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
order attributes. The
orderby attribute can have several possible values listed below.
||Sort products based on their title.|
||Sort products based on the date when they were published.|
||Sort products based on their post ID.|
||Sort products based on the number of sales.|
||Sort products based on the average product rating.|
||Display the products in a random order.|
You can set the value of the
order attribute to
DESC 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.
||Show the most highly rated products. Not meant to be used with
||Show the top-selling products. Not meant to be used with
||Only show products which are currently on sale. Not meant to be used with
[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
[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.
||Show only specific categories based on ids.|
||Specify the number of categories to display.|
||Only display child categories of a specific parent.|
||Specify the sorting order for categories. This can be
||Specify whether the categories are shown in ascending or descending order.|
||Specify the number of columns to display the categories.|
||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.
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.
[product_category category="toys" limit="4"]
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
orderby, which we have discussed already 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_my_account]—somewhere on the website to function properly. These will usually be added automatically by WooCommerce.
||Display a cart section on the webpage.|
||Display a checkout section.|
||Display the user account section.|
||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 by using the
[product_page] shortcode, which accepts an
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
||Identify the product using a given ID.|
||Identify the product using a given SKU.|
||Specify whether to display the product price or not.|
||Specify the number of products to add to the cart.|
||Add a custom class to the cart button.|
||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:
[add_to_cart_url id="90"] // Outputs: ?add-to-cart=90
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.
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.
However, knowing about all these shortcodes is still helpful and might come in handy every now and then.