Complete guide to 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.

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:

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:

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.

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:

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.

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:

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"]

Read our complete guide to the WooCommerce Quick View Pro shortcode.

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.

View the complete list of shortcode options that you get with WooCommerce Product Table.

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"]

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

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

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:

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.

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.

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.

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"]

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:

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:

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"]

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"]

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]

Read our full tutorial on how to list popular products with WooCommerce Product Table.

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"]

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:

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.

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:

You might consider adding this to a widgetized area on your online store or 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.

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:

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:

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

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:

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.

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:

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.