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.
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:
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 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:
- Simply add the shortcode
[quick_view id="123"]shortcode, replacing "123" with the product ID.
- 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
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:
If you want to include the product price, then use:
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:
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.
The WooCommerce Recent products shortcode displays the products you've recently added to your online 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.
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:
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:
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
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
[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.
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:
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:
|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.
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.
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.
Nguyễn Đức Trung
Wow, I love you.
We're glad you find the article helpful, Nguyễn! Cheers!
It was a great help from you. Thank you so much!
Thanks for your comment and for saying so, Rotnoraj. I'm glad to hear this guide was helpful!
Thank you for guidance. But I want to get the price of the product to include in the article. When I change the price in the product, the price in the article also changes. So do it like this?
Hi, Dzung. Using WooCommerce shortcodes will pull and display the same product data values that is stored in your products. So yes, if you use these shortcodes to display your product price in an article, when you change the product price in WooCommerce, the price displayed in the article will also change.
I'd like to add an extra product description tab. Can I use any shortcodes in this case?
I use the plugin , "Custom Product Tabs for WooCommerce" to add new tabs, but I hope I can also use csv. file to import the contents.
Hi, Jean. We've not tested that plugin, but you can add vertical or horizontal tabs, toggles, and accordions that come from your theme or another plugin. Popular WordPress themes such as Avada and Divi come with built-in styles for tabs, accordions, etc. If your theme comes with these, then we recommend using them because they will match the overall design of your site.
Alternatively, you can use the free Shortcodes Ultimate or Tabs plugins.
As for importing from a .csv file to either add/create new products or update the data of existing products, you can refer to the official WooCommerce Docs article about the built-in Product CSV Importer and Exporter.
Hello and thanks for the awesome article. I am trying to find a shortcode that shows the upsell products that have the same attribute. Does something like that exist?
Hi, Karim. Thanks for your kind words. You can use the related products shortcode [related_products per_page="3"] to show the related products.
Hey! is there any shortcode available to get the wooCommerce product description, and rating
Hi, Nabe. You can find the full official documentation for the Shortcodes included with WooCommerce at https://docs.woocommerce.com/document/woocommerce-shortcodes/ .
What is the shortcode for cheapest products?
While I'm not sure what you mean exactly by cheapest products, below is how you can either sort or filter products by price:
Sort Products by Custom Meta Fields - You can sort products by custom meta fields using this code (e.g order/sort products by price).
Filter Products by Price via Gutenberg WooCommerce Blocks.
An easier way would be to use our WooCommerce Product Table plugin, which allows you to:
Use the Product table sort option to sort products by price.
Use the Product Table: Filter Products by Price WooCommerce filter widget to add a price range slider. Customers can drag it to set a budget and view products within their price range.
I hope this helps. Let me know if you have any other questions. Thanks.
I want to know the difference between
[recent_products per_page="12" columns="4" orderby="date" order="desc"]
[Newest_products per_page="12" columns="4" orderby="date" order="desc"]
[Top_products per_page="12" columns="4" orderby="date" order="desc"]
Please can you explain in Detail
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.