WooCommerce Shortcodes - 2020 Guide

The WooCommerce shortcodes are a gateway towards the engine of the powerful WordPress ecommerce plugin. They can allow you to do almost anything without having to touch a line of code in WordPress.

The shortcodes for WooCommerce come in a variety of forms and shapes and to be quite frankly there are a lot of them. They can save you plenty of time if you use them properly so to make your life easier we gathered all of them categorized accordingly.

What are WooCommerce shortcodes?

Just like the shortcodes built for WordPress, the WooCommerce shortcodes are simple code shortcuts designed to display dynamic content represented in WooCommerce functions. In order to use a shortcode, you have to write it inside square brackets and usually they contain certain parameters.

Example of a simple shortcode without parameters: [woocommerce_checkout] – this will show the WooCommerce checkout box in a custom page or post created by you.

Example of a shortcode with parameters: [add_to_cart id="12"] – This will show the add to cart button in a custom page / post you created and it will associate that "Add to Cart" button with the product having the id of 12. You can see here that the value is always wrapped in quotes. These can be single quotes or double quotes.

Note: Make sure you always use single or double quotes throughout your shortcode just to ensure it will work. This means if you start with single quotes, you continue with those and vice-versa.

Things can go even further and you’ll be able to customize the output of a shortcode even more, but you’ll get used to it while reading this article.

Benefits of using shortcodes

How to insert a shortcode in a page or post?

Using shortcodes is quite easy actually. All you have to do is to copy and paste the shortcode in the WordPress content editor, modify it according to your needs and WordPress will do its job of displaying the desired result. (see the picture below)

Table of contents

  1. Product shortcodes
  2. Categories
  3. Orders
  4. Page shortcodes
  5. Add to cart shortcodes
  6. Notifications shortcodes

Product shortcodes

[product_page]

This will show a full page containing the product image, price, description and everything included in the default product template, in a page where the shortcode is used.

This shortcode requires either the product SKU or the product ID.

Example: [product_page id="10"] or [product_page sku="TEN"]

[products]

This allows you to display products based on a variety of parameters. You can display certain products by SKU, ID, categories. The products displayed using this shortcode will use the default product template and design. It also supports pagination, ordering and product tags.

Example 1: Display 6 products on 3 columns and order by date

[products columns="3" limit="6" orderby="date"]

Example 2: Display 2 products on 2 columns and exclude the categories notebooks and smartphones.

[products columns="2" limit="2" category="notebooks, smartphones" cat_operator="NOT IN"]

Keep in mind that the [products] shortcode is the most powerful and complete shortcode of WooCommerce, replacing shortcodes like:

  • [sale_products]
  • [best_selling_products]
  • [recent_products]
  • [product_attribute]

Enhancing the experience by using shortcode attributes and operators.

Besides these you can use the following to filter products using [products] shortcode:

  • limit – limit the number of items displayed
  • paginate – for multiple pages
  • sku – the product sku
  • title – the title of the product
  • category – the category of the product
  • tag – comma separated tag slugs just like categories
  • attribute – to retrieve products using specified attribute slug
  • terms – comma separated list of attribute terms to be used with attribute
  • ids – comma-separated list of product ids
  • skus – comma-separated list of product sku
  • visibility – will display products on the visibility

The list and a full explanation can be found at the official WooCommerce shortcode documentation.

[related_products]

This will show related products based on the current product id. It supports the limit, columns and orderby parameters.

Example: [related_products limit="6" columns="3" orderby="title"]

This will return a list of 6 related products displayed on 3 columns, ordered by their title.

A shorter version to display products by custom values would be to use the:

  • [recent_products]
  • [woocommerce_product_filter]
  • [featured_products]
  • [best_selling_products]
  • [top_rated_products]
  • [sale_products]

These can be sorted using:

  • menu_order
  • title
  • id
  • rand
  • date

Use these alongside the orderby and order (desc or asc) arguments.

Example: [featured_products orderby="title" order="desc"]

This will output the list of all featured products ordered descending by title.

[woocommerce_product_search]

Displays a search field for the WooCommerce products available on your store.

It works alongside other shortcodes designed to help users filter products easier.

  • [woocommerce_product_filter] – shows a live product search filter
  • [woocommerce_product_filter_attribute] – allows people to filter products based on attributes
  • [woocommerce_product_filter_tag] – filter products by tags
  • [woocommerce_product_filter_price] – filter products by price

Categories

[product_categories]

As you can see, the WooCommerce shortcodes are quite intuitive so this one will show a list of the product categories.

This shortcode supports the following arguments:

  • number – the number of products to show from a category
  • orderby – title, description, id, date etc.
  • order – ASC (ascending) or DESC (descending)
  • columns – number of columns to show
  • parent – wether or not to show only the parent categories (0 means only parents)
  • ids – a list of category ids separated by comma

Example: [product_categories number="5" parent="0" ids="1,2,3,4"]

This will show only the parent categories with the ids 1, 2, 3 and categories that are parent.

Orders

[woocommerce_order_tracking]

Displays the Order Tracking page (it includes a order id and the billing email address.

Page shortcodes

These are shortcodes you’ll see in the default WooCommerce pages. Usually they show the dashboard, orders, checkout page or login.

[woocommerce_checkout]

This displays the checkout box (billing details, name, user order etc).

[woocommerce_cart]

Shows the cart page.

[woocommerce_my_account]

Displays a page containing the user account details.

[woocommerce_order_tracking]

Shows a display containing the order tracking form.

Add to cart shortcodes

[add_to_cart]

This shortcode will display the add to cart button alongside its price associated to a single product in your WooCommerce store.

This shortcode supports the following parameters:

  • ID – the id of the product
  • quantity – the number of items to add to cart
  • show_price – can be true or false
  • sku – stock keeping unit
  • style – if you want to define a style for the add to cart button
  • class – if you want to wrap the add to cart in a CSS class

Example: [add_to_cart id="55" show_price="false"]

[add_to_cart_url]

This will generate the add to cart URL which can be used on a variety of other buttons or texts. It supports only two attributes, the ID of the product and the SKU.

Notifications shortcodes

[shop_messages]

This shortcode allows you to display WooCommerce specific messages on non-WooCommerce pages.

These messages may include "The product has been added to cart", "The product has been removed from your cart" etc.

This works pretty well alongside the [add_to_cart] shortcode.

Manage and add shortcodes visually

Did you know you can add and manage WooCommerce shortcodes visually? Well, there’s a small plugin called "WooCommerce Shortcodes" which includes a TinyMCE editor or a Guttenberg button from where you can visually add the shortcode of your needs.

The shortcodes don't work?

When the shortcodes don't seem to work there are usually two things that prevent them from working correctly.

Number 1: Some of the parameters are written correctly or the shortcode name isn't correctly implemented.

Number 2: You misused the quotes (single and double quotes). Choose one single or double quote and stick with it. Example: don't write a shortcode like this [products id="1' columns='5"]

Number 3: Sometimes when you copy and paste shortcuts the editor may wrap the code in the pre tag. This will treat the shortcode as a snippet in the editor and will not trigger the function.