Complete guide to WooCommerce shortcodes

WooCommerce shortcodes

WooCommerce shortcodes let you display information from your shop in new and exciting ways. The WooCommerce plugin comes pre-built with shortcodes, and you can install plugins to add more. Whether you want to list products in a table, display the cart anywhere on your site, or something else - you've come to the right place!

You've probably come across shortcodes before, whether you’re new to WordPress or have been using it for some time. Shortcodes are, as the name suggests, short pieces of code that perform some sort of function. WooCommerce shortcodes, for example, let you add neat WooCommerce-related functions to WordPress pages, posts, sidebars, and widgetized areas on your website.

An example of a WooCommerce Product Table with variations.
This store uses the WooCommerce Product Table shortcode to create a quick one-page order form

If you’re looking for a way to simplify the shopping experience on your online business store, you can do this using WooCommerce shortcodes. They can help you improve purchasing user flows and optimize your online store for conversions.

For example, you can use WooCommerce shortcodes to:

  • Display a list of your top rated products on your homepage.
  • Showcase related products whenever a customer expresses an interest in a product.
  • Highlight featured products in Gutenberg blocks, sidebars, other widgetized areas.

With this in mind, in this complete guide, we’ll explain how you can use WooCommerce shortcodes to deliver better user experiences and grow your bottom line. Along the way, we’ll also explain when (and why) you should use each shortcode. We'll look at the shortcodes that come with WooCommerce itself, and shortcodes that you can add with other plugins.

What are WooCommerce shortcodes?

A shortcode is a specially formatted text tag that opens and closes with square brackets. You can insert shortcodes into WordPress posts and pages as well as other areas (such as the sidebar) that support shortcodes.

As mentioned earlier, shortcodes are short pieces of code that perform some sort of function. In the context of a WooCommerce store, a WooCommerce product shortcode will let you display products anywhere on your site using its product ID, SKU, categories, or attributes.

Similarly, the ecommerce platform has a variety of other shortcodes that can be broadly categorized as WooCommerce product shortcodes and WooCommerce page shortcodes.

In fact, the WooCommerce plugin can’t function properly without the WooCommerce shop page shortcode, WooCommerce cart shortcode, and the WooCommerce checkout shortcode placed somewhere on your site.

How to use WooCommerce shortcodes

Shortcodes look and sound a bit technical, but they're actually designed for anyone to use. You don't need any coding skills.

Simply insert the shortcode into any text editor within WordPress, or to a 'Shortcode' block if you're using Gutenberg or a page builder such as Elementor or Visual Composer:

WooCommerce Product Table Gutenberg Block
This website has added the WooCommerce Product Table shortcode (discussed later in this tutorial) to a 'Shortcode' Gutenberg block.

You can combine shortcodes and display multiple shortcodes on a single page. For example, you might combine the order tracking shortcode with the user account shortcode. All you have to do is insert both shortcodes on the same page. It would look something like this:

WooCommerce One Page Checkout Plugin
This website uses the WooCommerce checkout and WooCommerce Product Table shortcodes to create a one-page shopping experience

What are the use cases for WooCommerce shortcodes?

Different WooCommerce stores follow different business models, have different sets of requirements, and operate in different niches. This is why you can’t use a generic template to build your online store and grow it. At some point, you’ll need to break out of the mold and differentiate your store to match your sales strategy.

This is where WooCommerce shortcodes come in.

WooCommerce shortcodes make it easy for store owners to customize the look and feel of their online store. Using shortcodes, store owners can experiment with their online store’s design, functionality, and user flows to enhance the user experience.

For example, you might want to display your WooCommerce products differently than how the default WooCommerce plugin does it. This is possible with the right WooCommerce shortcodes.

WooCommerce shortcodes also let you select exactly which types of products (or which specific products) you want to show in certain areas. This is a particularly neat use case for anyone that wants to create a Bestsellers page or a New Arrivals page.

WooCommerce shortcodes are also useful for displaying a single product in a page or post. For example, if you want to write a review of a particular product on your blog, you might want to include the product (with purchase options) directly in the blog post. This is possible with a WooCommerce product shortcode.

Another important use case for WooCommerce shortcodes is displaying products by their attributes. For example, you might want to list all dresses that are the color red or pink for Valentine’s Day. You can do this using a WooCommerce product shortcode and specifying products with the color attribute red or pink.

WooCommerce product list shortcodes

There are also shortcodes to list products in different ways in your store. These add extra flexibility, so you're not stuck with the restricted views that you get on the shop and category pages. Instead, you can use WooCommerce shortcodes to list one or more products literally anywhere on your WordPress site - either in a grid or table-based list view.

WooCommerce products shortcode

WooCommerce has a shortcode that lets you list specific products in a grid layout:

[products ids="83,68,70,66,64,62"]. You can also add other parameters to it (such as orderby and columns) to customize the front-end appearance.

Displaying multiple WooCommerce products

You can choose the number of products to list per row. For example, if you wanted to display six products in three columns ordered by date in ascending order, you would use the shortcode: [products ids="83,68,70,66,64,62" orderby="date" columns="3" order="ASC"]. Similarly, for displaying products in descending order, you would simply replace ASC with DESC.

WooCommerce quick view shortcode

A WooCommerce quick view shortcode provides an excellent way to learn more about products, choose options and add them to the cart without leaving the current page.

Install the WooCommerce Quick View Pro plugin and choose between two ways to add quick view buttons via a shortcode:

1. Add quick view buttons to the [products] shortcode

As we saw above, you can list one or more products using the WooCommerce [products] shortcode. This shortcode works seamlessly with WooCommerce Quick View Pro, which adds quick view buttons to the list of products like this:

Displaying multiple WooCommerce products with quick view buttons

Customers can open the lightbox to see/choose attributes and variations. They can then add to cart without having to visit the single product page.

Quick view lightbox
A quick view lightbox, accessed via a shortcode

2. Individual quick view button shortcode

The Quick View Pro plugin also comes with its own WooCommerce quick view shortcode. This displays quick view buttons individually, so that you can easily insert them into other content on your site:

A blog post with quick view buttons added manually using a shortcode
  1. Simply add the shortcode [quick_view id="123"] shortcode, replacing "123" with the product ID.
  2. The button text is controlled from the WooCommerce Quick View plugin settings page. You can change it in the quick view shortcode like this: [quick_view id="123" text="Buy Hoodie"]

WooCommerce product table shortcode

While the built-in WooCommerce products shortcode is pretty flexible, it only lets you display them in a grid layout. That's not ideal for stores wanting to show more products per page, for example if you're creating a quick one-page order form or wholesale store. In that case, you might be better off with a product table shortcode.

While WooCommerce itself doesn't have a product table shortcode, you can easily add one with the WooCommerce Product Table plugin. The basic shortcode is [product_table] and you can configure this using over 50 shortcode options. You can display absolutely any type of product data, including all the built-in data and custom fields.

WooCommerce add to cart shortcode

The WooCommerce plugin comes with a built-in [add_to_cart] shortcode which lets you insert an add to cart button for a specific product anywhere you like. Simply add the ID and/or SKU of the product you want to display the add to cart button for:

[add_to_cart="68"]

If you want to include the product price, then use:

[add_to_cart="68" show_price="true"]

Price/Cart button option in WooCommerce Shortcodes plugin

For simple products, this will display an add to cart button.

For variable products, it will show a 'Select options' button:

Preview of Price/Cart button on the front-end

Personally, I don't like this because customers have to visit the single product page to choose their variations. It's better to use WooCommerce Product Table to list one or more variable products in a table, complete with variation dropdowns:

WooCommerce pricing table plugin with variation dropdowns

That way, customers can select options and add to the cart from the page they're currently on.

Product category shortcode

The Product category shortcode lists products from a specific category in a standard grid layout.

Display products from a specific category with quick view buttons

This is the shortcode for it:

[product_category category="clothing" per_page="12" columns="4" orderby="default" order="asc" operator="in"]

If you don't like the grid layout, or if you want more control over what information to display about each product, then you can use the WooCommerce Product Table shortcode instead. The WooCommerce Product Table plugin comes with a category shortcode option, which you can use to list products from specific categories only:

[product_table category="clothing"]

Unlike the built-in [product_category] shortcode that comes with WooCommerce,  you can choose which columns of information to display about each product, and allow customers to select variations and choose quantities directly from the product table. This makes shopping much faster and boosts your conversion rate.

WooCommerce product categories shortcode

The Product categories shortcodes lists your product categories, instead of the products within them. For example:

[product_categories limit="4" orderby="name" order="ASC"] will list any 4 of your WooCommerce categories, ordered by name.

Showcasing WooCommerce product categories using a shortcode

Let’s take a look at some of the attributes and the shortcodes that go with product categories:

  • limit controls the number of categories that are displayed.
  • orderby controls the sort order; "name" and "date" are valid options.
  • order represents the order of product categories, i.e. "ASC" or "DESC".
  • columns show the number of columns the categories are arranged into.
  • hide_empty is used for hiding product categories with no products.
  • parent lets you only showcase top-level product categories.
  • Ids represent that category IDs can be set according to only output specified results.

Recent products

The WooCommerce Recent products shortcode displays the products you've recently added to your ecommerce store.

Most recent products on the front-end

This is the shortcode for recent products:

[recent_products per_page="8" columns="4" orderby="date" order="ASC"]

However, if you want to display the actual date the product was added to your online store, or if you want more control, then you can use the WooCommerce Product Table plugin instead.

Simply order the product table by date in descending order, and use the product limit number to control how many products to include:

[product_table sort_by="date" sort_order="desc" product_limit="5"]
Display WooCommerce recent products by date

If you include a date column in the table, then customers can easily see which products were recently added to the store.

Featured products

The Featured products shortcode for WooCommerce lets you list featured products separately from the rest of your store. Use it to list featured products anywhere you like, for example in blog posts or other pages. For example, you might want to feature specific tshirts or caps.

Featured products are WooCommerce products that have a blue star icon next to them on the All Products page:

Featured WooCommerce products back-end

This is the shortcode for showcasing featured products: [featured_products per_page="6" columns="3" orderby="date" order="DESC"]. The output should look something like this:

Listing featured products front-end using WooCommerce shortcodes

Again, if you don't like the image grid then you can list featured products using the WooCommerce Product Table plugin shortcode instead:

[product_table term="product_visibility:featured"]

This lists featured products in a table layout, with whichever columns of information you chose on the plugin settings page.

WooCommerce sale products shortcode

The Sale products shortcode let you showcase products currently on sale. You can easily display them using the shortcode:

[sale_products per_page="6" columns="3" orderby="date" order="DESC"]
List all WooCommerce products on sale

Bestselling products shortcode

Use the following WooCommerce shortcode to display your all-time best selling products in a grid:

[best_selling_products per_page="6" columns="3" orderby="date" order="ASC"]
List all best-selling products using WooCommerce shortcodes

The quick view buttons appear on the front-end if you have the WooCommerce Quick View Pro plugin installed to your WordPress site.

If you'd prefer a table layout then you can also list bestselling or popular products with the WooCommerce Product Table shortcode like this:

[product_table sort_by="popularity" sort_order="desc" product_limit=5]

Top rated products

You can use the Top Rated Products shortcode along with WooCommerce’s built-in reviews and ratings feature to showcase your top rated products. Use the shortcode:

[top_rated_products per_page="6" columns="3" orderby="date" order="ASC"]
WooCommerce shortcode for top rated products

You can also list top rated products in a table view using the WooCommerce Product Table shortcode:

[product_table columns="image,name,reviews,price,buy" sort_by="reviews" sort_order="desc" product_limit="5"]

Related products shortcode

Related products are a list of products that are similar to the product that the customer is browsing. These will show up directly under the main product on the single product page. There are two ways to use a WooCommerce related products shortcode to list upsells and/or cross-sells elsewhere in your store.

WooCommerce related products shortcode

The WooCommerce related products shortcode lists related products anywhere on your WordPress site. To use it, add the shortcode [related_products per_page="3"].

This related products shortcode uses the same layout as the single product page:

Related products on single product page
A single product page with related products listed at the bottom

As you can see, this layout takes up a lot of space per product. Customers have to click through to each product page to choose quantities and add the related products to the cart, which is bad user experience. If you're concerned about this, then consider using the related products table shortcode instead. I'll tell you about that next.

Related products table shortcode

The WooCommerce Product Table plugin offers a more user-friendly way to list related products. You can use a shortcode to display related products anywhere on your site. They are listed in an order form layout, complete with quantity pickers, variation dropdowns and add to cart buttons. As a result, customers can choose options and add related products to the cart without leaving the current page.

WooCommerce related products table plugin
A product page with a related products table shortcode in the main description

For full instructions, read our tutorial How to add a WooCommerce related products table to your site (in 3 steps).

Add to cart button shortcode

The [product id="60"] WooCommerce shortcode lets you show the price and add to cart button for a single product based on its ID. Here’s what it looks like on the front-end:

Add to cart page WooCommerce

You might consider adding this to a widgetized area on your online store or a blog post.

Add to cart button in a blog post
Example of the add to cart button shortcode within a blog post

This shortcode works with the WooCommerce Quick View Pro plugin. When you use both plugins together, quick view buttons will appear alongside the add to cart buttons. This is ideal if you're displaying variable products or if you want customers to be able to change the quantity before adding to the cart. Customers can view extra information about the product, choose quantities and variations and add to the cart from a quick view lightbox. This keeps them on the original page instead of taking them to a separate product page.

If you'd rather display add to cart buttons for multiple products, or if you don't like the default format with the large image, then you can use WooCommerce Product Table instead.

Choose which columns you wish to include in the product table (make sure you include the add-to-cart column!) and use the [product_table] shortcode to insert it anywhere you like. Use the include option to choose which products to include, for example: [product_table include="123,456"]

Can I show shortcodes within shortcodes?

Sometimes, you might want to nest shortcodes - for example, to add the WordPress audio player shortcode so that it adds an embedded music player to the list of products.

You can't normally nest the WooCommerce shortcodes. However, you can achieve this by using the WooCommerce Product Table shortcode to list products, and add other shortcodes to the fields that you're displaying within the product table.

For example, let's say that you want to list 8 products, with an embedded audio player for each one. You can add the audio player to the product short or long description fields and display these as columns in the table. You then use the WooCommerce Product Table shortcode to list those specific products, including the short or long description column which contains the audio players.

WooCommerce audio store table

To make shortcodes from other plugins work within the product table, make sure you enable the 'Shortcodes' option on the WooCommerce Product Table settings page:

Shortcodes option in WooCommerce Product Table

WooCommerce page shortcodes

Let’s start by taking a look at some of the most common WooCommerce page shortcodes. These automatically create entire pages, such as the cart or checkout.

WooCommerce shopping cart

The WooCommerce shopping cart shortcode - [woocommerce_cart] - lets you display the customer’s shopping cart on your WordPress website’s front-end. You can add it to WordPress pages or posts or display it in widgetized areas (such as the sidebar).

It will look something like this on the front-end:

Front-end preview of the WooCommerce shopping cart

When you install and activate WooCommerce to your WordPress website, it automatically creates some pages for you – including the Cart page, which uses this shortcode. You can use the shortcode to add the cart to additional parts of your site.

WooCommerce checkout page

You can use the WooCommerce checkout shortcode - [woocommerce_checkout] - to generate a complete checkout page on your e-commerce website. This page is also automatically created for you when you install WooCommerce. You can also use the shortcode to insert the checkout elsewhere (for example, under a product table to create one-page shopping).

Preview of the WooCommerce checkout page

The WooCommerce checkout shortcode includes billing details, order details, and the option to ship to a different address.

WooCommerce order tracking

WooCommerce lets store owners create an order tracking page using the [woocommerce_order_tracking] shortcode. Although this page doesn’t come with WooCommerce out of the box, you can simply create a new page and insert the shortcode in the text editor to create your own. It should look something like this on the front-end:

Order tracking page in WooCommerce

WooCommerce user account page

WooCommerce automatically creates a My Account page when you first install it on your website. This is done using the [woocommerce_my_account] shortcode. You can use the shortcode to insert the account area in additional locations throughout your site.

The My Account shortcode doubles as a login and registration form for logged out users. As a result, you can also use this as a WooCommerce login shortcode.

My Account page in WooCommerce

Add WooCommerce shortcodes more easily with a toolbar button

While you can find all sorts of WooCommerce shortcode plugins on the web, we recommend using the free WooCommerce Shortcodes plugin by WooThemes. Once installed and activated, this plugin adds a TinyMCE drop-down button to the WordPress text editor to give you easy access to all the built-in WooCommerce shortcodes. This saves you having to copy and paste the shortcodes.

After activating the WooCommerce Shortcodes plugin, you’ll see a new shortcode button in your WordPress text editor. Once you click on this button, a drop-down list will appear containing all the standard WooCommerce shortcodes:

WooCommerce Shortcodes icon in the text editor

Troubleshooting WooCommerce shortcodes

Sometimes, you paste the correct WooCommerce shortcode into the text editor but it doesn’t display the correct output. In this case, check to make sure you didn’t accidentally embed the shortcode within <pre> tags. You can remove these tags by going into the HTML text editor.

Best WooCommerce shortcodes for Product Table

Before we finish, here’s a quick breakdown of the most useful built-in WooCommerce shortcodes that you can use with the WooCommerce Product Table plugin and the WooCommerce Quick View Pro plugins:

WooCommerce shortcodes

Plugin Required Shortcode name WooCommerce shortcode Description
None Shopping Cart [woocommerce_cart] Displays a shopping cart on the front-end of the website
None Checkout Page [woocommerce_checkout] Displays a complete checkout page. 
None Order Tracking [woocommerce_order_tracking] Displays an order tracking form for your e-commerce website. 
None User Account Page [woocommerce_my_account]  Displays a ‘My Account’ page for users

Shortcodes to use with WooCommerce Product Table

Plugin Required Shortcode name WooCommerce shortcode Description
WooCommerce Product Table Product Price/Cart Button [add_to_cart="68" sku="woo-long-sleeve-tee"] Adds a product price (or add to cart) button to the product table.

Shortcodes to use with WooCommerce Quick View Pro

Plugin Required Shortcode name WooCommerce shortcode Description
WooCommerce Quick View Pro Multiple Products Shortcode [products ids="83,68,70,66,64,62" orderby="date" columns="3" order="ASC"] Displays multiple (selected) products on a page or post with quick view buttons.
WooCommerce Quick View Pro Product Category [product_categories number="4" orderby="name" order="ASC"] Displays specific product categories on the front-end of the website.
WooCommerce Quick View Pro Product Category by Slug [product_category category="clothing" per_page="12" columns="4" orderby="default" order="ASC" operator="IN"] Displays products from a specific product category along with quick view buttons.
WooCommerce Quick View Pro Recent Products [recent_products per_page="8" columns="4" orderby="date" order="ASC"] Displays a list of the most recent products you’ve added to your online store along with quick view buttons.
WooCommerce Quick View Pro Featured Products [featured_products per_page="6" columns="3" orderby="date" order="DESC"] Displays a list of the featured products with quick view buttons.
WooCommerce Quick View Pro Sale Product [sale_products per_page="6" columns="3" orderby="date" order="DESC"] Displays a list of all products on sale with quick view buttons.
WooCommerce Quick View Pro Best Selling Product [best_selling_products per_page="6" columns="3" orderby="date" order="ASC"] Displays a list of your best selling products with quick view buttons.
WooCommerce Quick View Pro Top Rated Product [top_rated_products per_page="6" columns="3" orderby="date" order="ASC"] Displays a list of your top rated products with quick view buttons.
WooCommerce Quick View Pro Related Product [related_products per_page="3"] Displays a list of related products with quick view buttons on single product pages.
WooCommerce Quick View Pro Add To Cart [product id="60"] Displays an 'Add To Cart' button on a single product, using the product ID

Supercharge your WooCommerce store with shortcodes!

WooCommerce shortcodes are tiny code snippets let you add neat features to your online store. You can add them to shop pages, posts, or widgetized areas on your website (such as the sidebar). Some WooCommerce shortcodes also support parameters that you can use to customize the output.

However, not all WooCommerce shortcodes deliver a good user experience. Instead of pasting them as-is, you might consider using them alongside the WooCommerce Product Table plugin or the WooCommerce Quick View Pro plugin.

For example, it's the only way to allow customers to choose quantities and variations outside of the product page, and it lets you show extra information about each product and control the image size. If you want extra flexibility, then you can install WooCommerce Product Table and start experimenting with its 50+ shortcode options. This will give you a more neat and organized look on the front-end while ensuring your site improves the customer’s shopping experience.

To recap, WooCommerce shortcodes let you improve the buyer’s journey, see more products at once, and makes it easy for customers to quickly navigate through the checkout process. You can also try out other WooCommerce shortcode plugins (like WooCommerce Coupon Shortcodes) that let you leverage advanced features like adding coupon codes to your online store.

What features are you thinking about adding to your online store using WooCommerce shortcodes? Lets us know by commenting below.

24 Comments

  1. Kudos to the author for demystifying shortcodes. This guide turns what seemed complex into a straightforward and valuable tool.

    • Hi Usman. Thanks for dropping by. I'm glad that you found this article helpful and straightforward.

  2. Thank you for this post.
    Can you say me what is the shortcode of the page my-account/edit-address/billing/ ?
    The my-accout/edit-address page shortcode is: [my_account_section section="edit-address"] but I cannot find the sub-page's shortcode for billing edit-address.
    Thank you in advance.

    • Hi Kambro, Did you ever find a solution to this? I would like to use the edit address in a separate area using shortcode but I cannot figure this one out.

      • Hi, Pete. Thanks for your follow-up question. I'm not sure whether we'll hear from Kambro, so I suggest you also contact official WooCommerce Support for this. I'd be keen to hear how this goes, to help anyone else looking to do the same.

    • Hi, Kambro. You're correct that you can edit the address section of the My Account page. I'm afraid I don't know whether you can edit the specifically/only the billing address section. I suggest that you contact official WooCommerce Support for the best advice about the Shortcodes included with WooCommerce.

      I hope this helps point you in the right direction. Cheers.

  3. Hi,
    Thanks for sharing. In section ¨WooCommerce product categories shortcode¨ parent shortcode is mentioned. If I may ask, is there a shortcode to hide parent and only show child (sub) product categories?

    • Hi Yvette! Child categories by default will inherit the protection settings of the parent category. Thanks for asking about the option for the child category to have different password/protection settings with the parent category. While we don’t have any immediate plans to implement this, a few other people have previously requested this feature and we’re tracking the amount of demand to help us decide whether to prioritize it in future.

      I have added your ‘vote’ to our feature request list, and we will let you know if we add this to a future version of the plugin.

      In the meantime, I'm sorry that this isn't possible.

Please share your thoughts...

Your email address will not be published. Required fields are marked *