A Comprehensive Guide to WooCommerce Shortcodes + Examples

“WooCommerce Shortcodes? Huh, never heard about the term.” This was the answer I got when asked a friend of mine who runs an eCommerce website powered by WooCommerce.

To be honest, most people don’t know about WooCommerce shortcodes, even after owning a WooCommerce-based store for a long time.

WooCommerce shortcodes are some clever use cases of WordPress shortcode features. These shortcodes can be used in posts, pages, widgets, and sidebars alike.

They help you embed important features like add to cart, product list, and many more without having to do coding. They are highly underrated, as they can amaze you with some really neat features.

In this article, we will learn in detail what WordPress and WooCommerce shortcodes are. We will also know about the most useful WooCommerce shortcodes and how to use them on our WooCommerce powered eCommerce website.

So join in for a very interesting read.

What are Shortcodes in WordPress?

A WordPress shortcode is a small piece of code that is bordered by square brackets [], and helps you add a specific function or feature on a part of your website.

You can ask me, “Isn’t this the same thing that the widgets do?”.

Well, the answer is no.

Unlike widgets, you can place a shortcode anywhere on the website. That includes inside your posts, pages, sidebars, or even inside the widgets.

While these powerful codes can do some wonders to your WordPress website with ease, the focus of this article is a bit more specific. Our article today is not about the WordPress shortcodes, but WooCommerce shortcodes.

WooCommerce shortcodes are based on WordPress shortcodes but unlike the former one, it helps you add only the eCommerce related features to your website.

The Benefit of WooCommerce Shortcodes

WooCommerce shortcodes are little known to common users, but once you get to know how they work and what you can do with the shortcodes, it’ll be on the list of your most essentials.

As we already know, WooCommerce is the largest eCommerce plugin for WordPress. It is used to create an eCommerce ecosystem on our WordPress-based sites, which is generally built for blog sites.

Once you install the WooCommerce plugin, it generates pages like Shop (where we can see all the products that are on the website), Cart, and check out Page.

Believe it or not, they are also powered by shortcodes. So you can replicate the function of the i.e. The shop page, on any page that you like, if you have the appropriate shortcode.

Here is an example of what you can see if you click on Edit for the Cart page.

See the [woocommerce_cart] on the editor? That’s a shortcode right there. In this case, the shortcode is being used to create a cart page like this.

You can replicate the code on any page and it’ll show the cart. So, by using the shortcode you can add features like this on any page or part of the page, whichever way you like.

There are WooCommerce shortcodes for many different features like Page, Product, Product Category, Related Products, etc. If you use a page shortcode, it will affect the whole page. While other shortcodes can be added to any part of your website.

Now before we get to know the use of all the WooCommerce shortcodes, we need to know how to use them on our page, or widget. So let’s take a detour and learn how we can use the WooCommerce shortcodes on our website.

How to Use WooCommerce Shortcodes

We already showed you a glimpse of how WooCommerce shortcodes are usually used on a page. Now we will dive down a little more into the detailed process.

The process of implementing a shortcode is a bit different when it comes to Classic and Gutenberg editor. As we know that some of our readers still prefer Classic editor over Gutenberg editor, we will show the process in both ways.

How to Use WooCommerce Shortcodes on a Page (Using Classic Editor)

In order to use WooCommerce shortcodes on a page using the classic editor, you’ll have to visit the respective page first. You can create a page for doing this or use an existing one.

Once you decide on which page you want to add WooCommerce shortcodes, go to WP Admin Dashboard > Pages > Your Selected Page. Now click on the Edit option.

We wanted to have a page that displays all the products that we have on the website. The shortcode for that is [products]

So we inserted the code into a test page for showing all the products on our website.

And here is the result.

That is how you can easily add a shortcode to a page using the classic editor. Keep in mind that every WordPress shortcode starts and ends with square brackets, and WooCommerce shortcodes are no different.

So make sure that the brackets are in place, whenever you are inserting a shortcode, no matter what is the editor.

How to Use WooCommerce Shortcodes on a Page (Using Gutenberg Editor)

If you are a fan of Gutenberg Editor (you have every reason to be so), adding a shortcode to a page can become even easier.

Here we will be editing the same page, but this time, using the Gutenberg editor. Just like before, visit WP Admin Dashboard > Pages > Your Selected Page. Now click on the Edit option.

As you might know, in Gutenberg, you can decorate a page by creating blocks. These blocks can contain anything like Paragraphs, Images, Videos, etc.

There is also a block for adding shortcodes. In order to add shortcodes, just click on the plus button, just like we did below.

Search for the block named shortcodes. Once you find it, select and paste the same code that we have used before.

Now click on publish and see how the page looks. Here is how our page looks.

Gorgeous, right?

How to Use WooCommerce Shortcodes on Widgets

The main body of the page is not the only place you can add the shortcodes. You can do the same for the widgets as well.

For example, we want a specific product to be visible on our sidebar, which is currently on an exciting sale. Let’s see if we can do it.

To add a shortcode on a widget, visit  WP Admin Dashboard > Appearance > Widgets.

Drag & Drop the Text where you want your widget to be. In our case, we want our widget to be on the sidebar of every page so that our sale product gets the most visibility. So we dragged & dropped the Text widget on the sidebar.

Now on the sidebar, we want our sales product. So we’ll just use our product ID on the shortcode.

[products id=”48”]

Now clicking on Publish and here is the final output.

Neat enough?

You can even add multiple products using the same method. To do that, add the following shortcode instead of the previous one [products ids=”48, 34,” columns=”2″]

The code above is resembling that we are trying to add two products, with ID 48 & 38. Which will be displayed on different columns.

Remember, you have to specify the number column to get the perfect result.

(N.B. For those who don’t know how to find the product ID, visit WP Admin Dashboard > Product > All Products. Now hover your mouse over the product you want to add to the widget and you’ll see the ID number below the product.)

ALSO READ: Top 8 Rich Snippets For WordPress in 2019

So now we know how we can add shortcodes to the page body or widget. This means, now we can implement the shortcodes on literally any part of our website and it is super easy to do that.

A widget can help you place your shortcodes on almost all corners of your website.

Now remains the question, which are the WooCommerce shortcodes that we can add to our website and make your site look awesome? Well, below is the list of the WooCommerce shortcodes and how you can apply them on your website.

Read on.

List of WooCommerce Shortcodes

Now that we know why we need shortcodes and how to use them on our eCommerce sites to add amazing features, let’s head on to the list of WooCommerce shortcodes and know which one does what.

Page Shortcuts

Page shortcuts in WooCommerce are shortcodes that generate an entire page dedicated to a specific eCommerce feature. We can find page shortcodes for –

• Cart page.
• Checkout page.
• Customer Account page.
• Order tracking page.

Below we will talk about all the page shortcodes. Keep in mind that when you install WooCommerce, most of these page shortcodes will automatically be added to your website and you’ll find some ready pages for Cart, Checkout, Account, and Order tracking page.

You might, however, need to change the pages or move them to another page for a certain reason. In that case, page shortcodes will prove to be handy.

1. Cart Page: Cart page is the dedicated page where customers can find all the products they added to the cart. Below is the shortcut code for the cart page.

[woocommerce_cart]

Here’s how our cart page will look like.

2. Checkout page: The checkout page is an essential page for any eCommerce website. Here is the shortcode to turn any page into a checkout page.

[woocommerce_checkout]

Here’s how our checkout page will look like.

3. Customer Account page: The customer account page is where customers can see their personal profile for that website. This includes the order list, address, account list, etc.

The shortcode for adding a customer account page is as follows

[woocommerce_my_account]

4. Order tracking page: This one is pretty self-explanatory. The order tracking page is where customers can track their orders. Here is the shortcode for the order tracking page.

[woocommerce_order_tracking]

ALSO READ: How to Generate and Print Invoice & Packing Slips in WooCommerce + The Reasons You Should do So

Product Shortcodes

Product shortcodes are the most robust shortcodes when it comes to the use cases. The default product shortcode is [products].

However, product shortcodes have a lot of applications, as you can use attributes along with the product shortcode.

So you won’t have to use different shortcodes for showing featured products, sale products, best selling products, recent products, and top rated products.

An attribute can help you do all these without the need of using a new shortcode. There are tons of product attributes, which can be found here.

I’ll not be able to cover all the attributes in one single post, so let’s just give you some examples of how product shortcodes work.

First of all, if you use the primary shortcode [products] within a page and include no other attributes, just like we did below. You’ll find that your page has all the products of your shop.

However, we might need to create different pages for showing only sale products, or the best selling products. So how do we do that?

Yes, you guessed that right, using attributes along with the product shortcode.

Best Selling Products: If you want to create a dedicated page for best selling products or include your best product anywhere else like widget, sidebar, you can do that by the following shortcode.

[products limit=”2″ columns=”2″ best_selling=”true” ]

You might be wondering why we are using limits and columns in the code. Well, in an understandable language, this is a code, using which you can show your top 2 best selling products, in 2 different columns.

If you change the limit to 1, it’ll show only 1 product. Unless you add more columns, products will be shown in a single column. And, the last portion of the code is there to ensure that only best selling products will be shown here.

So with all being explained, let’s see how it works in application. We’ll test it out on our side bar.

Result –

Quite fascinating, how a single line of shortcode can do wonders, right?

ALSO READ: A Comprehensive Guide on Adding Discounts in WooCommerce

Sale Products: If you want to create a dedicated page where you want to show only the products that are on sale, you can do that as well. In order to do that, you have to use the following code –

[products columns=”3″ on_sale=”true”] You can change the number of columns as you like and get the desired output.

Want to see our result? Here it is!

So now you know how product shortcode works. We hope these two different examples with different applications will help you get an idea of how you can use product shortcodes.

There are also many more attributes of product shortcode which you can find on the official WooCommerce website.

Product Category Shortcodes

If you want to create a page where products from only a specific category will appear, that is possible with product category shortcode.

Below is the shortcode for that particular feature.

[product-category = “tshirt”]

And here’s how it turns out, once it’s done.

However, keep in mind that when you want to show products from a specific category, you’ll have to use the shortcode [product-category], but if you want to show the categories on a page, you’ll have to use the shortcode [product-categories].

Now you might want to display only the top-level categories on your product category page. In order to do that, you need to add the following shortcode –

[product_categories number=”0″ parent=”0″]

Parent is a product category attribute that is being used to display only the top-level categories. There are also many more product category shortcodes that you can find on the official WooCommerce website.

Here is our result for the code –

Product Page Shortcodes

Product page is the page for a specific product. As you might already know, every product has a unique ID. So it’s quite easy to turn any page into a product page.

In order to do that, get your product ID from WP Admin Dashboard >Products > All Products. ID can be found by hovering over any product. Once you find the product ID, go to the page you want to turn into a product page and paste this shortcode –

 [product_page id=”XX”] (Change XX into the product ID)

And you’ll see something like this as a result.

Related Product Shortcodes

You might have seen that under every product of the popular sites, there is a little widget called related products, which suggests people to buy products similar to the one that the customer is buying.

You can add this feature to your website as well. What’s more, you don’t even need any plugin to do that.

All you need to do is paste this shortcode to the editor of your page.
[related_products limit=”12″]

You can tweak the product limit as per your choice.

Here is our result –

Add to Cart

Often, we see big eCommerce sites add a specific product to a blog post or a page as a CTA.

There are also many other times, we need to add a little widget called “Add to Cart” in the blog any other page, from where a customer can add the product to the cart and go straight to checkout without heading to the shop page.

This is also a feature that needs just one line using WooCommerce shortcode.

[add_to_cart id=”xx”]

Change the XX to your product ID and voila, you are good to go!
Here’s how our representation looked between a random blog.

So that was the list of most important shortcodes for WoCommerce. However, there is one little heads up that we can give you. For that, head over to the following section of our blog.

Troubleshooting Shortcodes

Sometimes, even after entering the shortcode correctly, you might not see the correct result that is expected from a shortcode. That’s where troubleshooting can come in handy.

Don’t worry, it is not a lengthy process, nor a complex one.

The problem that happens most of the time with shortcodes is that a tag named <pre> gets automatically added to the code. To check if that is the case for you, just get into the editor mode of a page and go to the Text tab.

Once you’re there, check if the pre tag exists before and after the shortcode like in our case in the image below. If it’s there, just remove the tag and your shortcode should start working fine.

Another reason that your shortcode might not work is because of the quotation mark. You might be wondering, how can quotation marks go wrong! But to be honest, it can.

WooCommerce shortcodes only work when values are wrapped inside a straight quotation mark (“), but not the curly quotation mark ( “”). So make sure that your values (ID, Limit, or whatever it might be) are inside the straight quotation mark.

Get the Best Out of Your eCommerce Website using WooCommerce Shortcodes

With custom developed HTML based sites, you can place your product literally anywhere. But they need you to learn complex coding knowledge to create or design a page.

But avoiding the need for coding to build a full-fledged eCommerce website is why you chose WooCommerce and WordPress as a whole, right?

But you also don’t want to miss out on crucial features. And placing your product wherever you like is one of the necessities, if you want to increase your conversion.

People don’t always go to the product or shop page and randomly buy a product. So if you can place your product anywhere you like, that would really increase your conversion.

Many WooCommerce powered eCommerce site owners complain that WooCommerce somewhat limits their capability of building a conversion-focused site. But this is not true at all.

Using the shortcodes, you can not only do the product placement but also present your products in creative ways. You can place your product literally anywhere on your site and insert an “Add to cart” option along with it.

If you feel this is a bit hard you can install a plugin to make it easier for you to implement these features.

But for now, let’s try to use the power of WooCommerce shortcodes and do some wonders. If you face any problem while using any shortcodes, let us know in the comment section below. We’ll be more than happy to help you out with the implementation.

Acowebs are developers of Woocommerce bulk discounts that will help you add bulk discounts to products on your stores. It also has developed various other plugins like the popular plugin for managing the checkout form fields in WooCommerce, called Woocommerce Checkout Manager, which is highly feature-oriented yet lightweight and fast. There is also a free version of this plugin available in the WordPress directory named WooCommerce Checkout Field Editor.