Master WooCommerce shortcodes: The complete guide
WooCommerce shortcodes display information from your shop in new and exciting ways. The core 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.
For example, you can use WooCommerce shortcodes to:
- Display a list of 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.
- Create quick one-page order forms.
In this complete guide, we’ll explain how you can use WooCommerce shortcodes to deliver better user experiences and grow your bottom line. 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.
WordPress itself comes with many shortcodes, such as the gallery shortcode. In the context of WooCommerce, the WooCommerce shop page shortcodes let you display products and other elements of your shop.
How to use WooCommerce shortcodes
If you're wondering "How to use shortcode in WooCommerce?" then it's not as hard as you might think. Shortcodes look and sound technical, but they're actually designed for anyone to use. You don't need any coding skills.
- Go to the page, post or widget where you want to add the shortcode.
- 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 Divi Builder:
You can combine shortcodes and display multiple shortcodes on a single page. For example, you might combine a product table shortcode with a WooCommerce checkout shortcode. All you have to do is insert both shortcodes on the same page. It would look something like this:
Complete list of WooCommerce shortcodes
Here’s a quick breakdown of the most useful WooCommerce shortcodes. Some of these use WooCommerce on its own, and others require a plugin. I'll tell you about each shortcode and its options in detail underneath.
Plugin Required | Shortcode Name | Basic Shortcode | Description |
---|---|---|---|
Product list shortcodes | |||
None | Products | [products] | Lists products in a grid layout |
WooCommerce Product Table | Product table | [product_table] | Lists products in a table layout |
None or WooCommerce Product Table | Product category | [product_category category="clothing"] | Lists products from a specific category |
None | Product categories | [product_categories] | Lists the categories from your store |
None or WooCommerce Product Table | Recent products | [recent_products] | Lists recently added products |
None or WooCommerce Product Table | Featured products | [featured_products] | Lists featured products |
None or WooCommerce Product Table | Bestselling products | [best_selling_products] | Lists most popular products |
None | Sale products | [sale_products] | Lists on-sale products |
None | Top rated products | [top_rated_products] | Lists top rated products |
None or WooCommerce Product Table | Related products | [related_products] | Lists related products |
None or WooCommerce Product Table | Product attribute | [product_attribute attribute="color" terms="red"] | List products with a certain attribute |
None or WooCommerce Product Table | Product tags | [product_tags] | List product tags (or products by tag) |
WooCommerce Bulk Variations | Bulk variations | [bulk_variations id="123"] | Displays an order form of variations for a specific product |
WooCommerce Product Filters | Product filters | [product_filters id="1"] | Displays a group of filters on a product listing page |
Displaying information about products | |||
WooCommerce Quick View Pro | Quick view | [quick_view id="123"] | Displays quick view buttons for a product |
None | Product page shortcode | [product_page id="123"] | Inserts the content from a product page |
None or WooCommerce Product Table | Add to cart | [add_to_cart id="123"] | Displays the add to cart button for a specific product |
None | Product reviews | [product_reviews id="123"] | Displays the reviews for a specific product |
WooCommerce page shortcodes | |||
None | WooCommerce cart | [woocommerce_cart] | Displays the content of the cart page |
None | WooCommerce checkout | [woocommerce_checkout] | Displays the content of the checkout page |
None | WooCommerce order tracking | [woocommerce_order_tracking] | Displays the content of the cart page |
None | WooCommerce my account | [woocommerce_my_account] | Displays the content of the cart page |
WooCommerce product list shortcodes
There are many shortcodes for listing products in different ways. 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 shop page shortcodes to list products literally anywhere on your WordPress site - either in a grid or table layout.
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 choosing the number of products per row, the sort order, and more.
I also like using this WooCommerce shortcode to list individual products with an add to cart button. For example, this is a good way to get more conversions for products you're discussing in blog posts:
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.
You can easily add this 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 product data and custom fields. There are lots of options for choosing which products to include, such as products by category, tag, date, and more.
Product category shortcode
The Product category shortcode lists products from a specific category in a standard grid layout, for example:
[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, 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 orderby="name" order="asc"]
will list your WooCommerce categories, ordered by name.
Shortcode options:
- 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.
Products by SKU shortcode
The WooCommerce Products by SKU shortcode creates a grid of products with specific SKU's. For example:
[products_by_sku skus="123,234,345" limit="10"]
Recent products shortcode
The WooCommerce Recent products shortcode displays the products you've recently added to your ecommerce store, for example:
[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 shortcode
The Featured products WooCommerce shortcode lists featured products separately from the rest of your store:
[featured_products per_page="6" columns="3" orderby="date" order="desc"]
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 t-shirts or caps.
Featured products are WooCommerce products that have a blue star icon next to them on the All Products page:
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 like.
Bestselling products shortcode
Use this 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, otherwise you just get add to cart buttons.
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.
WooCommerce sale products shortcode
The Sale products shortcode showcases products currently on sale, for example:
[sale_products per_page="6" columns="3" orderby="date" order="desc"]
Top rated products shortcode
You can use the Top Rated Products shortcode along with WooCommerce’s built-in reviews and ratings feature to showcase your top rated products:
[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 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 normally appear 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).
Products by attribute shortcode
You can also use a WooCommerce shortcode to create a grid of products with one or more specific attributes. For example, use this shortcode to list red or blue items:
[product_attribute attribute="color" terms="red,blue" operator="OR" limit="10" columns="3"]
Or to list products by attribute in a table layout, use the WooCommerce Product Table shortcode like this:
[product_table term="pa_color:black"]
Product tags shortcode
The tags shortcode lists the tags in your store, each one linking to the relevant tag archive.
[product_tags exclude="10,11" orderby="count" order="desc"]
This lists tags, rather than listing products with a certain tag. To do that, then you can use the WooCommerce Product Table shortcode to list products by tag in a table layout:
[product_table tag="samsung"]
Bulk variations shortcode
The [bulk_variations id="123"]
shortcode is added by the WooCommerce Bulk Variations plugin. It displays a quick-buying grid of all the variations for the selected product. You can either include quantity pickers and add to cart buttons so that customers can buy the variations; or use the shortcode to create a variation price matrix.
Product filter shortcode
The WooCommerce Product Filters plugin comes with a [product_filters id="123"]
shortcode which you can use to insert filters on any page that you're using to list products. The ID refers to the filter group which you create using the plugin.
WooCommerce page shortcodes to display individual products
You can also use WooCommerce shortcodes to embed individual products, or information about them.
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"]
WooCommerce product page shortcode
The product page shortcode displays the contents from the product page of a specific product, for example:
[product_page id="987"]
Simply enter the ID of the product that you wish to display.
WooCommerce add to cart button 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 id="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 like this:
Personally, I don't like using this shortcode for variable products 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.
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. This works with WooCommerce Quick View Pro so that when you use both plugins together, quick view buttons appear alongside the add to cart buttons.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"]
Product reviews shortcode
This shortcode displays the reviews for the product with the ID that you specify in the shortcode. For example:
[product_reviews id="123" limit="5"]
WooCommerce shop page shortcodes
Now let's take a look at some of the most common WooCommerce shop page shortcodes. When you first install WooCommerce, it automatically creates most of these pages and adds the appropriate shortcode. You can also use the shortcodes to insert the content of these pages elsewhere on your site - for example, by using the WooCommerce checkout shortcode to display a one-page checkout form underneath a product table.
WooCommerce cart shortcodes
The WooCommerce shopping cart shortcode - [woocommerce_cart]
- displays 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:
Other cart shortcodes
In addition, WooCommerce provides some further shortcodes to display specific parts of the cart:
[woocommerce_cart_contents]
- Use this shortcode to list the contents of the user's cart in a table.[woocommerce_cart_total before="Total: "]
- This shortcode will display the total price of all the items in the cart. The "before" parameter lets you choose what text appears before the total price.[woocommerce_cart_coupon placeholder="Enter coupon code"]
- Use this shortcode to insert the coupon code field which is normally found on the WooCommerce cart and checkout page. The "placeholder" parameter lets you change the text which appears in the coupon code field. You can get more shortcodes like this by installing the free Coupon Code Shortcodes plugin.[woocommerce_cart_shipping before="Shipping: "]
- This shortcode displays your store's shipping options, with an option to customize the text that appears before it.
WooCommerce checkout shortcodes
You can use the WooCommerce checkout shortcode - [woocommerce_checkout]
- to add the contents of the checkout page anywhere on your ecommerce website. For example:
[woocommerce_checkout order_review="false" terms="false" privacy_policy="true" login_form="false"]
The WooCommerce checkout shortcode optionally includes billing details, order details, and the option to ship to a different address.
Other WooCommerce checkout shortcodes
In addition, WooCommerce provides some further shortcodes to display specific parts of the checkout:
[woocommerce_checkout_fields order="billing,shipping" fields="first_name,last_name,phone,email" required="first_name,email"]
- Use this shortcode to display specific fields from the WooCommerce checkout and choose which ones are required.[woocommerce_checkout_cart show_shipping="false" show_coupon="true" show_cart="false"]
- Displays the cart contents on the checkout page, with customizable content.[woocommerce_checkout_order_review show_shipping="true" show_coupon="false" show_cart="true"]
- This WooCommerce checkout shortcode inserts the order review section from the checkout page, with customizable content.
WooCommerce order tracking shortcode
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 account shortcode
You can use the WooCommerce account shortcode - [woocommerce_my_account]
- to insert the account area in additional locations throughout your site. This doubles as a login and registration form for logged out users. As a result, you can also use this as a WooCommerce login shortcode.
Take action: Implement these WooCommerce shortcodes today 🚀
In this article, we have listed all the default WooCommerce shortcodes as well as some provided by extra plugins. These include:
- WooCommerce Product Table - Lists products in a quick one-page order form, with over 50 flexible shortcode options.
- WooCommerce Quick View Pro - Displays quick view buttons which customers can use to open user-friendly product lightboxes instead of having to visit individual product pages.
FAQ
What's the benefit of using shortcodes in WooCommerce?
Different WooCommerce stores follow different business models, have different sets of requirements, and operate in different niches. 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.
This is where WooCommerce shortcodes come in.
What are the common use cases for WooCommerce shortcodes?
Here are some example use cases where shortcodes can be helpful:
- You might want to display your WooCommerce products differently than how the default WooCommerce plugin does it.
- WooCommerce shortcodes let you select exactly which types of products (or which specific products) 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.
- 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.
- 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.
How to troubleshoot WooCommerce shortcodes
This is what to do if a shortcode isn't working:
- Have I made a syntax error?The most common cause for shortcode problems in WooCommerce is that you have made an error. With shortcodes, accuracy is essential. For example, imagine that you're using the shortcode [add_to_cart="68" show_price="true"]. If you've got the wrong product ID, used add-to-cart instead of add_to_cart or accidentally deleted a space between some of the shortcode parameters or an equals sign then it won't work. Check your shortcode carefully against the documentation.
- Am I using straight or curly quotation marks?When you copy a shortcode from one website to another, the type of quotation marks often changes and breaks the shortcode. Make sure you're using straight quotation marks like " and not the curly type.
- Is the shortcode available on my site?Some of the shortcodes listed in this article require a plugin. For example, if you've copied the [product_table] shortcode into your site then you must install the WooCommerce Product Table plugin in order to use it.
What should I do if I can't find a shortcode for my needs?
If you can't find the shortcode you're looking for then you have a few options:
- Go online and research a plugin which will provide the extra functionality.
- Hire a developer to build the shortcode for you as a custom plugin. If you don't have a developer already then you can use our customization service.
Advanced shortcode techniques
Since WordPress and WooCommerce are open source, the shortcodes that they provide are infinitely customizable. This means that you use custom CSS to restyle the shortcode output, improve their responsive design, and add more dynamic content. For example, you could use advance shortcode techniques and custom code to dynamically input the product ID instead of having to add it manually.
Again, this is a developer-level task and if you need help customizing WooCommerce shortcodes then our customization service will be happy to help.
24 Comments
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.
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.
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.