A Simple Guide on WooCommerce Shortcodes (Updated)

Why? Because shortcodes power much of the plugin’s functionality, including all of the pages like the cart page, checkout page, product pages, product category pages, My Account page.

And if you better understand how WooCommerce shortcodes work, you can easily create highly-customized sales pages and build an incredibly powerful online store site for any situation.

What are WooCommerce shortcodes, why to use them, how you can use them…we’ll cover all of them in this article.

What are WooCommerce shortcodes?

In layman’s terms, shortcodes in WooCommerce are short pieces of code/text wrapped in square brackets that look something like [this].

These shortcodes are actually huge amounts of code condensed within a shorter phrase for a non-techie WooCommerce store owner to put to use.

Shortcodes can achieve anything for you like:

Display checkout on any page
Showcase best-sellers on your homepage
Pitch related products when customers show an interest in a product
Display video and audio
Add a creative slider
Insert Add to Cart buttons
Highlight featured products in Gutenberg blocks, sidebars, other widgetized areas

…any other things

Now with the basics of shortcodes understood, let’s see how you add them to your store.

How to add shortcodes to your WooCommerce store?

Running a WooCommerce store is time-consuming for anyone. Store management, creating offers, coupons, checkout improvements…there are hundreds of tasks to look out for. To save time, shortcodes come in handy.

Shortcodes also improve accuracy, cutting down mistakes associated with writing long codes.

There are three ways to add shortcodes:

Inserting shortcodes using Gutenberg block editor

With the Gutenberg editor, adding shortcodes is easy.

Go to your WordPress Admin panel.
Click on Pages > Add New. You can also edit any existing page.

adding WooCommerce shortcodes in gutenberg

Click on the plus sign to add a new block, type ‘shortcode’ in the search bar and select the Shortcode block.
Now, type in your shortcode in the field. For example – [products].
Click the blue Publish or Update button at the top right of the page and your products will now show on your new page.

Inserting shortcodes using Classic editor/WordPress editor

Adding shortcodes with Classic editor is also easy. Simply add the shortcodes, making sure to include the brackets ([ and ]).

Inserting shortcodes using widget

adding shortcode using widget — Insert shortcode using Classic editor

To add a shortcode to a widgetized area, just add a Text widget with the shortcode. Then, load the page to see the shortcode’s content on your sidebar.

How WooCommerce shortcodes work?

While they look simple, shortcodes are actually quite powerful! Let’s cover the different parts that make up a shortcode.

The shortcode itself:
As mentioned above, shortcodes are a single word or set of words connected with underscores, like this:

[products]
[woocommerce_order_tracking]

While some shortcodes will function alone, others require some parameters.

Parameters:
Parameters or Arguments (called Args in some of WooCommerce’s documentation) are ways to make the shortcode more specific. For example, by adding id=”36″ to the [add_to_cart] shortcode, it will create an ‘Add to Cart’ button for the product with ID 36.

All WooCommerce shortcodes (built-in)

There are five essential shortcodes available with WooCommerce.

[woocommerce_cart] – shows the cart page
[woocommerce_checkout] – shows the checkout page
[woocommerce_my_account] – shows the user account page
[woocommerce_order_tracking] – shows the order tracking form
[products] – shows the products

In most cases, these shortcodes will be added to pages automatically via the WooCommerce onboarding wizard and do not need to be used manually.

Let’s look at each shortcode and how to use them.

[woocommerce_cart]

This shortcode adds the WooCommerce cart functionality to the page. It will display all of the products that the user has added to their cart. There are no parameters to add to this shortcode.

[woocommerce_checkout]

As the name suggests, this shortcode displays the checkout page. Make sure that this page is set up correctly. After all, if customers can’t find the checkout page easily or find the checkout cumbersome, they won’t buy anything.

No extra parameters to add to this shortcode as well.

[woocommerce_my_account]

This shortcode shows the My Account page containing all of the customer’s information, as well as their previous orders from your shop.

By default, the number of orders displayed is set to 15. You can change it to display all orders by making the number -1. You can add parameters or arguments to this shortcode like this:

array(
     'current_user' => ''
 )

woocommerce_my_account

Current user argument is automatically set using get_user_by( 'id', get_current_user_id() ).

[woocommerce_order_tracking]

This shortcode creates an “order tracking” page, which allows customers to see the current status of their orders. There are no other arguments.

[products]

The [products] shortcode is one of the most robust shortcodes. It allows you to display products by post ID, SKU, attributes, categories with support for pagination, random sorting, and product tags.

It replaced the need for multiple shortcodes such as [featured_products], [sale_products], [best_selling_products], [recent_products], [product_attribute], and [top_rated_products] used in WooCommerce versions below 3.2.

There are a ton of parameters that allow you to customize the types and quantities of products displayed.

To add a parameter, simply write its name, followed by the equals sign and the desired value inside quotation marks. Make sure this is inside of the [products] shortcode.

For example, to display five products from the clothing category, use this shortcode: [products limit="5" category="clothing"].

Available product attributes

The following attributes are available to use in conjunction with the products shortcode. There are a few parameters that help you control the layout of your product pages. Let’s look at them with examples, beginning with the display product attributes.

Display product attributes

limit – controls the number of products displayed. Defaults to and -1 (display all) when listing products, and -1 (display all) for categories. Example – [products limit="3"]
columns – controls the number of columns to display. Defaults to 4. although this will usually collapse into a smaller number on mobile (depending on your theme.) Example – [products columns="3"]
paginate – determines whether your product result pages will be paginated. Used in conjunction with limit. Defaults to false, set to true to paginate. Example – [products paginate="true"]
orderby – customizes how your products are ordered. Default is product title. One or more options can be passed by adding both slugs with a space between them. Available options are:
- date – the date the product was published.
- id – the post ID of the product.
- menu_order – the Menu Order, if set (lower numbers display first).
- popularity – the number of purchases.
- rand – randomly order the products on page load (may not work with sites that use caching, as it could save a specific order).
- rating – the average product rating.
- title – the product title. Example – [products orderby="date"]
skus – add specific SKUs separated with a comma. Example – [products skus="shirt-black-small, shirt-black-large"]
category – display products that have a certain category slug. You can add more than one category by placing a comma in between them. Example – [products category="watches, purses"]
tag – displays products that have a certain tag slug. You can add more than one tag by placing a comma in between them. Example – [products tag="rainy, kids"]
order – states whether the product order is ascending (ASC) or descending (DESC), using the method set in orderby. Default is ASC. Example – [products order="DESC"]
class – adds an HTML wrapper class so you can modify the specific output with custom CSS. Example – [products class="custom-element"]
on_sale – displays sale products. Do not use it in conjunction with best_selling or top_rated. Example – [products on_sale="true"]
best_selling – displays the products that sell the most. Do not use it in conjunction with on_sale or top_rated. Example – [products best_selling="true"]
top_rated – displays the products that are the most highly-rated. Do not use it in conjunction with on_sale or best_selling. Example – [products top_rated="true"]

Next up, the content product attributes.

Content product attributes

These shortcodes can be used to display products based on their attributes – size, color, etc.

attribute – displays products with a certain attribute.
terms – displays products with certain terms that are linked to the attribute. This must be used with the attribute above. For example, the attribute may be colors and the terms are red, blue or yellow.
terms_operator – allows you to perform calculations to determine which terms will be included. Likewise, they must be used with attribute and terms. Available options are:
- AND – displays products from all of the chosen attributes.
- IN – displays products with the chosen attribute. This is the default terms_operator value.
- NOT IN – displays products that are not in the chosen attributes.
tag_operator – the same as the term operator above, except for tags. Available options are:
- AND – displays products from all of the chosen tags.
- IN – displays products with the chosen tags. This is the default tag_operator value.
- NOT IN – displays products that are not in the chosen tags.
visibility – displays products depending on their visibility on your site. Available options are:
- visible – products visible on shop and search results. This is the default visibility option.
- catalog – products visible only in the shop but not in the search results.
- search – products visible only in the search results but not in the shop.
- hidden – products hidden from both shop and search and accessible only by direct URL.
- featured – products marked as Featured Products.
category – display products that have a certain category slug.
tag – displays products that have a certain tag slug.
cat_operator – allows you to perform calculations to determine which products will be included. Available options are:
- AND – displays products that belong in all of the chosen categories.
- IN – displays products within the chosen category. This is the default cat_operator value.
- NOT IN – displays products that are not in the chosen category.
ids – displays products based on a comma-separated list of Post IDs.
skus – displays products based on a comma-separated list of SKUs.

If the product is not showing, make sure it is not set to “Hidden” in the “Catalog Visibility”.

Examples of product scenarios based on attributes

Scenario 1 – Random sale items

You want to display four products on sale.

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true"]

This shortcode explicitly states four products with four columns (which will be one row), showing the most popular on-sale items. It also adds a CSS class quick-sale, which you can modify in your theme.

Scenario 2 – Featured products

You want to display your featured products, two per row, with a maximum of four items.

[products limit="4" columns="2" visibility="featured"]

This shortcode says up to four products will load in two columns, and that they must be featured. Although not explicitly stated, it uses the defaults such as sorting by title (A to Z).

Scenario 3 – Best selling products

shortcode to display best selling products

You want to display your top three best selling products in one row.

[products limit="3" columns="3" best_selling="true"]

For more examples, refer WooCommerce shortcodes documentation.

Product categories

These two shortcodes will display your product categories on any page.

[product_category] – displays products in a specified product category.
[product_categories] – displays all your product categories. This is the generic shortcode for displaying a particular category. You’ll need to add a specific parameter, listed below, in order to actually display one (or more.)

Available product category attributes

ids – displays specific categories by their ids.To be used in product_categories. Example – [products _categories ids="1,2"]
category – Can be either the category id, name or slug. To be used in [product_category]
limit – determines the number of categories that will be displayed. Example – [products _categories limit="3"]
columns – determines the number of columns that will be displayed. Default is 4.
hide_empty – this will hide empty categories. The default is “1” which will hide empty categories. Set to “0” to show empty categories. .Example – [products _categories hide_empty="1"]
parent – this will show the child categories of a specific parent category, which is targeted by id. For example, [parent=”3″] will display the child categories of the category whose id is 3. If you set parent to “0”, only the top-level categories will be displayed. Example – [products _categories parent="0"]
orderby – this controls the order in which categories are displayed. The default is to order by “name”. It can be set to “id”, “slug”, or “menu_order”. If you want to order by the ids you specified then you can use orderby=”include”. Example – [products _categories orderby="id"]
order – states whether the category ordering is ascending (ASC) or descending (DESC), using the method set in orderby. Defaults to ASC. Example – [products _categories order="ASC"]

Examples of product category scenarios

Show top level categories only
Imagine you only wanted to show top level categories on a page and exclude the sub categories, well it’s possible with the following shortcode: [product_categories number="0" parent="0"].

Other useful shortcodes

[add_to_cart]

Add to cart shortcode lets you easily create an Add to Cart button for a specific product, which is targeted by id. There are quite a few parameters. As with other shortcodes, each should be placed within two quotation marks, “like this”.

id: Choose the product by ID
style: Customize the CSS of the button directly
sku: Choose the product by SKU
show_price: Choose whether the price is displayed with the button. There are two options, “TRUE” and “FALSE”
class: Assign an HTML class to the button, so that you can target it with CSS code
quantity: Choose the product amount that will be added to the cart. In most cases, this will just be “1”

Example: [add_to_cart id="36" style="border: 1px solid #111111;" show_price="TRUE" quantity="1" class="example-cart-button"]

Add to Cart URL

This shortcode will display the actual URL of a particular product. There are only two parameters:

id: Target the product by ID
sku: Target the product by SKU

Example: [add_to_cart_url id="99"]

This will display the URL on the add to cart button of a single product by ID.

[shop_messages]

Want to display WooCommerce messages on non-WooCommerce pages? This shortcode will allow you to display notifications like “This product has been added to your cart” on any page with it.

Coupon shortcodes

WooCommerce also offers a way to display available coupons on any page and generate coupons automatically. However, you’ll need to purchase the Smart Coupons extension. Refer to the below posts to get the shortcodes:

Troubleshooting shortcodes

It may happen that the shortcodes you inserted may not work. Here’s what you need to check:

The shortcode is between tags:
When adding a shortcode to a page, make sure that it is not between tags, which are designed to display (and not execute) code.

Quotation marks are curly, not straight
Another common error is if the quotation marks (used with parameters) are angled, or “curly” (like this: “) and not straight (like this: “). Parameters won’t work with curly quotation marks.

Refer this document for more details.

List of WooCommerce shortcode plugins

Besides inbuilt and free WooCommerce shortcodes, here are some plugins that will help you to customize your store.

Conclusion

WooCommerce shortcodes are exceptionally useful and powerful. Although it may seem a little technical, it’s quite easy to use and implement.

I hope this guide helped you resolve all your queries related to WooCommerce shortcodes.

In the meantime, you can also check out our popular WooCommerce plugins that help make your WooCommerce store faster and smarter.

If you have any queries or suggestions, leave a comment below and we’ll sort it out!

FAQs

Can WooCommerce shortcodes be customized to fit specific design needs?
Yes, WooCommerce shortcodes can be customized to fit specific design needs. The appearance and functionality of the shortcodes can be modified using CSS, HTML, and PHP code. WooCommerce also provides documentation and support for developers to customize and extend the shortcodes.

Are there any limitations or compatibility issues to consider when using WooCommerce shortcodes with other plugins or themes?
Yes, there can be limitations or compatibility issues when using WooCommerce shortcodes with other plugins or themes. Some plugins or themes may not support certain shortcodes or may cause conflicts with the way the shortcodes function.

Can I use WooCommerce email shortcodes to include dynamic content in my emails, such as order details or customer information?
Yes, you can use WooCommerce email shortcodes to include dynamic content in your emails. These shortcodes allow you to easily insert information such as order details, customer information, and product information into your emails, making them more personalized and engaging for your customers.