Complete guide to WooCommerce shortcodes

August 7, 2020 2 comments

WooCommerce shortcodes

WooCommerce shortcodes let you display information from your shop in new and exciting ways. WooCommerce 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 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.

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

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

The [products] shortcode works seamlessly with the WooCommerce Quick View Pro plugin. This adds quick view buttons to the list of products as a quick way to allow people to make their purchase without leaving the current page:

Displaying multiple WooCommerce products with quick view buttons

All you have to do is install the WooCommerce Quick View Pro plugin to your WordPress site and it’ll automatically add quick view buttons to the front-end. This way, customers can see product attributes and variations and add products to cart without navigating to the single product page.

Quick view lightbox
WooCommerce Quick View
Add quick view buttons to your WooCommerce products 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.

WooCommerce add to cart shortcode

WooCommerce 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 online 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.

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.

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,add-to-cart" sort_by="reviews" sort_order="desc" product_limit="5"]

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, but you can use the WooCommerce related products shortcode to list related products elsewhere.

Related products on single product page

Use the shortcode [related_products per_page="3"] to display related products anywhere on your WordPress site.

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:

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

WooCommerce Product Table
Display WooCommerce shortcodes in a neat and organized way!

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.

Maria Ansari

From C++ to PHP, the language Maria thinks in is code, and translates it to English for humans to understand. She has a degree in Computer Science and is the writer of choice for many organizations. She is also The Big Boss at BloggInc., calling all the shots and personally supervising every word and piece of content.

2 Comments

  1. Viresh
    September 12, 2020 Reply

    I want to know the difference between
    [recent_products per_page="12" columns="4" orderby="date" order="desc"]
    and
    [Newest_products per_page="12" columns="4" orderby="date" order="desc"]
    and
    [Top_products per_page="12" columns="4" orderby="date" order="desc"]

    Please can you explain in Detail

    • Edge
      September 14, 2020 Reply

      Hi, Viresh. Thanks for your comment.

      The WooCommerce shortcode for recent_products will display a list of the most recent products you've added to your store, as mentioned in our article, which I hope is pretty straightforward.

      I'm afraid I'm not familiar with the newest_products WooCommerce shortcode that you mention. We've not discussed in here, nor is it in the official list of Shortcodes included with WooCommerce. What is mentioned are other ways that you can use WooCommerce shortcodes to display your products sorted in the way you want, such as in Scenario 4 – Newest Products and Scenario 6 – Attribute Display.

      I'm not sure about the top_products that you mention as well, but you can instead use top_rated_products to display or retrieve top-rated products (which are of course products that have received the best ratings from your customers via WooCommerce's built-in reviews and ratings feature). Note that Available Product Attributes mentioned that it is not to be used in conjunction with the on_sale nor best_selling shortcodes.

      Best regards,

Please share your thoughts...

Your email address will not be published.