WooCommerce comes with several shortcodes that can be used to insert content inside posts and pages. Shortcodes simplify the addition of features to a WordPress (and WooCommerce) site. By using shortcodes, the HTML and other markup is added dynamically directly into the post or page where the user wants them to appear. And that’s without modifying any tempalte file.
WooCommerce shortcodes allow you to easily set your My Account, Cart, Checkout, Shop pages and other or add embed for example single or several product in a separated landing page.
Table of Contents
- Using WooCommerce Shortcodes
- Page Shortcodes
- Product Category
- Product Page
- Related Products
- Add to Cart
- Add to Cart URL
- Display WooCommerce notifications on pages that are not WooCommerce
- Troubleshooting WooCommerce Shortcodes
Using WooCommerce Shortcodes
Shortcodes can be used on pages and posts (including custom post types). If you are using the block editor, there is a shortcode block you can use to paste the shortcode in.
Some of the shortcodes can include “Args”. Adding an Argument to the shortocde makes it more specific. For example, by adding
id="99" to the
[add_to_cart] shortcode, it will create an add-to-cart button for the product with ID 99.
WooCommerce Page Shortcodes
WooCommerce Page Shortcodes are the ones that display the basic pages of your store and without them WooCommerce cannot function properly without the first three shortcodes being placed on three different pages on your site.
[woocommerce_cart] – shows the cart page
[woocommerce_checkout] – shows the checkout page
[woocommerce_my_account] – shows the user account page
[woocommerce_order_tracking] – shows the order tracking form
In most cases, these shortcodes will be added to pages automatically via our onboarding wizard and do not need to be used manually.
1. WooCommerce Cart Shortcode
Used on the cart page, the cart shortcode displays cart content and interface for coupon codes and other cart bits and pieces.
2. WooCommerce Checkout Shortcode
Used on the checkout page, the checkout shortcode displays the checkout process.
3. WooCommerce My Account Shortcode
Shows the ‘my account’ section where the customer can view past orders and update their information.
You can specify the number of orders to show. By default, it’s set to 15 (use -1 to display all orders.)
4. WooCommerce Order Tracking Form Shortcode
Lets a user see the status of an order by entering their order details.
This page doesn’t come with WooCommerce out of the box, but you can 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 Products Shortcodes
Since WooCommerce 3.6, WC Core includes several product blocks which are easier to configure than shortcodes, so if you are using the WordPress block editor, you may want to read more about WooCommerce Blocks first.
[products] shortcode allows you to display products by post ID, SKU, categories, attributes, with support for pagination, random sorting, and product tags.
Available Product Attributes
The following attributes are available to use in conjunction with the
[products] shortcode. They have been split into sections for primary function for ease of navigation, with examples below.
Display Product Attributes
limit– The number of products to display. Defaults to and
-1(display all) when listing products, and
-1(display all) for categories.
columns– The number of columns to display. Defaults to
paginate– Toggles pagination on. Use in conjunction with
limit. Defaults to
trueto paginate .
orderby– Sorts the products displayed by the entered option. One or more options can be passed by adding both slugs with a space between them. Available options are:
date– The date the product was published.
id– The post ID of the product.
menu_order– The Menu Order, if set (lower numbers display first).
popularity– The number of purchases.
rand– Randomly order the products on page load (may not work with sites that use caching, as it could save a specific order).
rating– The average product rating.
title– The product title. This is the default
skus– Comma-separated list of product SKUs.
category– Comma-separated list of category slugs.
tag– Comma-separated list of tag slugs.
order– States whether the product order is ascending (
ASC) or descending (
DESC), using the method set in
orderby. Defaults to
class– Adds an HTML wrapper class so you can modify the specific output with custom CSS.
on_sale– Retrieve on sale products. Not to be used in conjunction with
best_selling– Retrieve the best selling products. Not to be used in conjunction with
top_rated– Retrieve top-rated products. Not to be used in conjunction with
Content Product Attributes
attribute– Retrieves products using the specified attribute slug.
terms– Comma-separated list of attribute terms to be used with
terms_operator– Operator to compare attribute terms. Available options are:
AND– Will display products from all of the chosen attributes.
IN– Will display products with the chosen attribute. This is the default
NOT IN– Will display products that are not in the chosen attributes.
tag_operator– Operator to compare tags. Available options are:
AND– Will display products from all of the chosen tags.
IN– Will display products with the chosen tags. This is the default
NOT IN– Will display products that are not in the chosen tags.
visibility– Will display products based on the selected visibility. Available options are:
visible– Products visible on shop and search results. This is the default
catalog– Products visible on the shop only, but not search results.
search– Products visible in search results only, but not on the shop.
hidden– Products that are hidden from both shop and search, accessible only by direct URL.
featured– Products that are marked as Featured Products.
category– Retrieves products using the specified category slug.
tag– Retrieves products using the specified tag slug.
cat_operator– Operator to compare category terms. Available options are:
AND– Will display products that belong in all of the chosen categories.
IN– Will display products within the chosen category. This is the default
NOT IN– Will display products that are not in the chosen category.
ids– Will display products based on a comma-separated list of Post IDs.
skus– Will display products based on a comma-separated list of SKUs.
Special Product Attributes
These attributes cannot be used with the “Content Attributes” listed above, as they will likely cause a conflict and not display. You should only use one of the following special attributes.
best_selling– Will display your best selling products. Must be set to
on_sale– Will display your on-sale products. Must be set to
If the product is not showing, make sure it is not set to “Hidden” in the “Catalog Visibility”.
Products Shortcodes Examples
You can use single or multiple arguments with [products] shortcode.
Note: To find the Product ID, go to the Products screen, hover over the product and the ID appears as shown below:
Display three top best selling products in one row.
[products limit="3" columns="3" best_selling="true"]
Display only products with tag “hoodie”
WooCommerce Product Category Shortcodes
The Product category shortcode will list products from a specific category or categories in a standard grid layout on any page.
[product_category]– Will display products in a specified product category.
[product_categories]– Will display all your product categories.
Product Category Shortcode Attributes
ids– Specify specific category ids to be listed
limit– The number of categories to display
columns– The number of columns to display. Defaults to 4
hide_empty– The default is “1” which will hide empty categories. Set to “0” to show empty categories
parent– Lets you only showcase top-level product categories. Set to a specific category ID if you would like to display all the child categories
orderby– The default is to order by “name”, can be set to “id”, “slug”, or “menu_order”. If you want to order by the ids you specified then you can use
order– States whether the category ordering is ascending (
ASC) or descending (
DESC), using the method set in
orderby. Defaults to
How To Display Top Level Categories Only
If you only want to show top level categories on a page and exclude the sub categories do it with the following shortcode:
[product_categories number="0" parent="0"]
WooCommerce Product Page Shortcode
The Product page shortcode displays a full single product page by ID or SKU.
WooCommerce Related Products Shortcode
Related product shortcode displays the list of all the similar products. You need to use this shortcode for it:
Related Products Shortcode accepts 3 arguments:
- limit – this argument will determine how many products are shown on a page and will not add pagination to the shortcode.
[related_products limit="6" columns="3" orderby="Title"]
WooCommerce Add to Cart Shortcode
Show the price and add to cart button of a single product by ID.
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 Shortcode accepts 6 arguments:
- id (of the product)
- style – like border:4px solid #ccc; padding: 12px;
- show_price – TRUE or FALSE
- class – CSS class name
- quantity – how much quantity to be added to cart
If you want to include the product price, then use:
WooCommerce Add To Cart Url Shortcode
This shortcode allows you to add to cart button of a single product by ID or SKU.
Display WooCommerce notifications on pages that are not WooCommerce
[shop_messages] allows you to show WooCommerce notifications (like, ‘The product has been added to cart’) on non-WooCommerce pages. Helpful when you use other shortcodes, like
[add_to_cart], and would like the users to get some feedback on their actions.
Troubleshooting WooCommerce Shortcodes
A common issue with WooCommerce Shortcodes is when you correctly pasted your shortcodes, but the display looks incorrect. If you face this issue, you need to check your code and make sure you did not embed the shortcode between <pre></pre> tags. To remove these tags, edit the page, and click the Text tab:
Need help with WooCommerce Shortcodes?
If you have any problems using the WooCommerce shortcodes, leave a comment below and we’ll try to help. You may also post a new question in our Community forums.