WooCommerce Shortcodes: A Comprehensive Guide

by Saud Razzak  April 3, 2018

Shortcodes in WooCommerce allows you to add a various type of functionality to your post, pages, widget, sidebar, etc without any type to write a code. For example, you can add creative slider by using a shortcode.

WooCommerce Shortcodes

In this guide, we are going to cover the shortcodes included with WooCommerce. These help you embed content like a future product or even specific products into pages, post, widget, sidebar, etc. There are a few useful shortcodes for WooCommerce and it is important that we cover them all. You can read about every single one in this tutorial. Apart from WooCommerce, you can use these shortcodes for your Cart, Checkout and My Account pages etc. to display the content.

Table of Contents

  1. Page Shortcodes
  2. WooCommerce Shortcodes Plugin
  3. The Requirement of the Plugin
  4. Plugin Usage
  5. Product Price/Cart Button
  6. Multiple Product Shortcode
  7. Product Category
  8. Product Category by Slug
  9. Recent Product
  10. Featured Product
  11. Sale Product
  12. Best Selling Product
  13. Top Rated Product
  14. Related Product
  15. Add to Cart
  16. Add to Cart URL
  17. Order Tracking
  18. Product Search Field Shortcode
  19. Live Product Filter Shortcode
  20. Troubleshooting Shortcode

1. Page Shortcode

[woocommerce_cart]  – This shortcode will demonstrate the customer’s cart.

Page Shortcodes

[woocommerce_checkout] – This shortcode will display the checkout page.

WooCommerce Checkout

[woocommerce_order_tracking] – This shortcode will display the Order Tracking page.

WooCommerce Order Tracking

[woocommerce_my_account] – This shortcode will display the My Account Page.

WooCommerce My Account

You should also note that you can use combined shortcodes with each page. For example, you can set up a form page with [woocommerce_my_account], [woocommerce_order_tracking] on one page.

WooCommerce Myaccount

2. WooCommerce Shortcodes Plugin

Although, some of the plugins are available on the Internet, but I would like to suggest to choose WooCommerce Shortcodes plugins. This plugin provides a TinyMCE drop-down button for you use all WooCommerce shortcodes.

3. The Requirements of the Plugin

  • WordPress 3.9 or later.
  • WooCommerce 2.2 or later.

4. Plugin Usage

Now first thing first, you need to add the WooCommerce shortcode plugin. For installing this plugin just follow these few steps:

Go to your admin dashboard and click on Plugin > Add New on the right side. Then search for WooCommerce shortcodes, and then you just have to install and activate it.

Plugin Installation

When you install a shortcode plugin for WooCommerce, you will find a new shortcode button in your page editor and post editor. Just click on the button and you’ll see all the shortcodes in the drop-down list. See the screenshot below.

WooCommerce DropDown

5. Product Price/Cart Button

When you click on the Price/Cart button, it will ask you for your product ID and SKU. After filling the instructions it will generate the following shortcode  [add_to_cart id=”21″ sku=”21″].

This is used to show the price and add to cart button for a singular product, either by ID or SKU.

For Example:

I am adding a new page and add the shortcode for price/cart button.

Product Price/Cart Button
After click on this, the pop-up appears on your screen, now add the ID whatever you want to display.

Product Price
Clicking the OK button will generate a shortcode like in the screenshot below:

Shortcode
Click the publish button and you’ll see that the shortcode is generated successfully as shown in this screenshot below.

Purchase ProductThis is the one example I am showing you, you can also use any other shortcodes as well like List, add to cart, etc.

6. Multiple Product Shortcode

Similar to the previous example, you can also add multiple products while using this shortcode: [products ids=”1, 2, 3, 4, 5″]. You can also use the following arguments: order=” “, columns=” “, orderby=” “.

This shortcode, [products ids=”1, 2, 3″ orderby=”date” columns=”3″ order=”desc”], will output six products in 3 columns ordered by date in descending order. You can also use “ASC” for ascending and title for ordering.

7. Product Category

Product Categories allow you to add product categories loop and output with this shortcode:

[product_category category=”one”]. For the purpose of categories section, here are seven more attributes you can apply to this shortcode:

‘number‘ => ‘null‘, – This shortcode represents the number of categories.

‘orderby‘ => ‘name‘, – This shortcode represents the order, “name” and “date” are valid options.

‘order‘ => ‘ASC‘, – This shortcode represents how product categories are ordered, “ASC” or “DESC“.

‘columns‘ => ‘4′, – This shortcode defines the number of columns categories are organized into.

‘hide_empty‘ => ‘1‘, – This shortcode represents Set to 1 to hide categories with no products or 0 to show them.

‘parent‘ => ”, – This shortcode represents Set to 0 to only display top-level categories.

‘ids‘ => ” – This shortcode represents that IDs can be set to only output specified results.

8. Product Category by Slug

This is similar to product categories but this allows you to add all your products within the defined category and can be adjusted with the per_page=”” and columns=”” parameters. Here is the shortcode: [product_category category=”” per_page=”16″ columns=”3″ orderby=”date” order=”desc”].

9. Recent Product

The Recent product will show you the products you may have added recently. Here is the shortcode: [recent_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”].

Recent Product

If you need to see the result after, add this shortcode to your page/post or anywhere else:

10. Featured Product

Feature products allow you to add your favorite products to your web page. Just go to your admin site dashboard, Products > Products and you will see an icon like this:

Featured Image

If you want to add featured products, just click on the icon. See the screenshot below:

Featured Product
Here is the shortcode:

[featured_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]

Here’s what it will look like now:

Featured Product

11. Sale Product

Sale products allow you to add products currently on sale.

Sale Product Data

Here is the shortcode: [sale_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]

After you have added this shortcode, you can see the result as demonstrated below:

Sales Product

12. Best Selling Product

If you want to show your best selling product, you need to use this shortcode:

[best_selling_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]

Best Selling Product

13. Top Rated Product

If you use the reviews and ratings feature built into WooCommerce, then this shortcode can be useful for displaying your best products. Here is the shortcode: [top_rated_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”].

14. Related Product

Related product shows you the list of all the similar products. You need to use this shortcode for it: [related_products per_page=”12″].

15. Add to Cart

This shortcode allows you to show the price and add to cart button of a single product by ID. See the below shortcode.

16. Add to Cart URL

This shortcode allows you to add to cart button of a single product by ID. See the below shortcode.

17. Order Tracking

This is given to you on your receipt and in the confirmation email you receive.

Order Tracking

18. Product Search Field Shortcode

WooCommerce product search allows you to insert live search and live filtering facilities inside pages and posts. You need to use this shortcode for it. [woocommerce_product_search].

19. Live Product Filter Shortcode

You can also customize the filtration by using the following WooCommerce shortcodes.

[woocommerce_product_filter] — This allows you to shows a live Product Search Filter.

[woocommerce_product_filter_attribute] — This allows you to shows a live Product Attribute Filter.

[woocommerce_product_filter_category] — This allows you to shows a live Product Category Filter.

[woocommerce_product_filter_price] — This allows you to shows a live Product Price Filter.

[woocommerce_product_filter_tag] — This allows you to shows a live Product Tag Filter.

20. Troubleshooting Shortcode

Sometimes you paste a shortcode correctly but it will display incorrectly if you face this issue, you need to check your code and make sure you did not embed the shortcode between <pre> tags. To remove this tags go to your text editor and remove it.

Troubleshooting Shortcode

Wrapping Up!

That is all there is to it. I hope you will encounter no issues while using these shortcodes on your WooCommerce Store and hopefully this tutorial has proved to be of help. If you have any query or suggestion about this tutorial, leave a comment below and we’ll sort it out!

In the meantime, you can also check it out Must-Have WooCommerce Plugins In 2018. Here you can get the awesome WooCommerce extensions which you will filter and add in your WooCommerce store and make your store faster and smarter.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Saud Razzak

Saud is the WordPress Community Manager at Cloudways – A Managed WooCommerce Hosting Platform. Saud is responsible for creating buzz, spread knowledge, and educate the people about WordPress in the Community around the globe. In his free time, he likes to play cricket and learn new things on the Internet. You can email him at m.saud@cloudways.com

Stay Connected:

You Might Also Like...