product shortcode woocommerce

WooCommerce Tutorials

How to Use Product Shortcodes in WooCommerce

By the end of this article, you’ll know exactly how to use product shortcodes in WooCommerce and the best ones to use depending on your situation.

Product shortcodes are one of the most useful and powerful ways to customize your WooCommerce store.

These chunks of text and brackets may seem simple, but by using them in strategic ways, you’ll be able to showcase the right products to your customers and increase your sales. All without having to learn any complicated code.

So let’s start with the basics – what are WooCommerce shortcodes? Especially if you’re new to them.

Want to jump to a specific section? Click one of the links below:

What are shortcodes in WooCommerce?

WooCommerce shortcodes are what they say they are, short pieces of code.

They’re small pieces of text wrapped in square brackets that look a little something like [this].

These shortcodes allow for huge amounts of code to be condensed within a shorter phrase for the average WooCommerce store owner to put to use.

Shortcodes can achieve anything from making a whole page appear like a checkout, to showing a list of products and even displaying video and audio.

For example:

  • Display your checkout on any page – [woocommerce_checkout]
  • Show all of your products – [products]

Because they’re so user-friendly, these shortcodes can be placed in pages and posts without you having to understand any code whatsoever. 

So with the basics of shortcodes understood, how do you add them to your store?

How to add shortcodes to your WooCommerce store

Adding a shortcode to your WooCommerce store is fairly straightforward. But if you’re new to shortcodes, it can seem a little daunting. 

So we’ll walk you through adding a very simple shortcode to WooCommerce in the following steps. Specifically, we’re going to add the [products] shortcode to a new page on our WooCommerce store.

Note: This presumes you have WooCommerce installed on your site. If you don’t, you can download WooCommerce here.

To do this, take the following steps:

  1. From your WordPress dashboard go to Pages > Add New. We’re going to create a new page called ‘Products’ but you could edit an old page if you’d prefer.
  2. Next, you’ll need to create a block by clicking the black + button in the content area.
    • This black + displays if you have the Gutenberg editor active on WordPress.
add product block
  1. Then search ‘shortcode’ in the block widget, to find the shortcode block, and click to add it.
search woocommerce shortcodes
  1. Once added, all you need to do is type in your shortcode.
add product shortcode woocommerce
  1. Click the blue Publish or Update button at the top right of the page and your products will now show on your new page.
product list using shortcode

WooCommerce product shortcodes and what they’re used for

Of course, this isn’t the only shortcode you can use in your WooCommerce store, there are so many possibilities.

So in the following section, we’ll show you some product shortcodes you can use for your WooCommerce store, and why they might be useful.

Product shortcodes and how to use them

As a WooCommerce store owner, you might be looking to customize your store a little more. No matter what theme you’re using, each store’s needs are different.

So if you’re looking to display specific groupings of products on a page, customize your homepage a little more, or simply experiment with how your store looks without having to learn code, then the shortcodes below are for you.

Display products from a specific product category

While building your online store, you might want the flexibility to show products from specific categories on different pages.

For example, if you want to showcase a new category of products or product range, showing just that category as a section on say, your homepage, would be very useful.

To achieve this, you’d need to create a product shortcode that asks for all products from a specific category to be shown.

This category shortcode would look something like this: [products category="clothing"]

This shortcode asks WooCommerce to show products in the category ‘Clothing’. You can add more categories by creating a comma-separated list like so: [products category="clothing, shoes"]

Display products by their attribute

Depending on what your store sells, you may have a lot of products that share similar attributes.

What are attributes? WooCommerce product attributes are the different characteristics of each item you sell in your store. For example, color, size, weight, brand, and material.

If this is the case, you might want to group these products together to create a ‘look book’, or collection to appeal to customers.

For example, let’s say a new trend has emerged for concrete plant pots. You just so happen to already have lots in stock but you want to display them all on your store’s homepage without fuss.

To achieve this, all you’d need to do is create a product shortcode that asks for all concrete plant pots to be shown.

This shortcode would look something like this: [products tag="plantpot" attribute="material" terms="concrete"]

This shortcode asks WooCommerce to show products with the tag ‘plantpot’, in the material concrete on the frontend of your site.

product attribute shortcodes woocommerce

You can customize this even further by restricting how many will display, in what order, and more. For more customization examples, check the official WooCommerce shortcode docs.

Display sale products

Now let’s say you have a big sale on but you want to entice customers in by showing off the sale products that are the most popular. 

You might be looking to show a small selection of these products on the homepage but don’t have time to get a developer in and/or you have no coding knowledge. 

If this is the case, you can put together a simple shortcode to do the work for you. In this case, WooCommerce will decide which products show based on their popularity (how many you’ve sold). Which means they’ll update on their own without you having to do a thing.

It would look something like this: [products limit="4" columns="4" orderby="popularity" on_sale="true" ]

This shortcode shows 4 of your most popular on-sale products. It also displays them in 4 columns to make it look even better.

sale product shortcode

Display best-selling products 

In a similar scenario, you might want to showcase your best-selling products to customers on the homepage, regardless of if you have a sale on or not.

To do this, you’d use the shortcode: [products limit="3" columns="3" best_selling="true" ]

This shortcode shows 3 of your best-selling products. It displays them in 3 columns to make it neater. 

best selling product shortcodes

To customize this even further, you could specify which category of best-selling products you’d like to show. For example: [products limit="3" columns="3" best_selling="true" category="hoodies, t-shirts" ]

best selling hoodies shortcodes woocommerce

Display a single product on a page or post

Now let’s say your WooCommerce store also publishes a lot of blog posts talking about your products. In this situation, you might want to embed one of the products you’re talking about directly in the post.

To do this, you could use a specific shortcode to show one product like this: [product id=“22”]

In this case, the shortcode displays one product with the product ID of 22. 

shortcodes product in a post woocommerce

To find the ID of the product you want to show, go to Products > All Products and hover over the name of one of your products. You’ll see ‘ID:’ followed by some numbers. The numbers are the product ID.

get product ID

Alternatively, you could showcase this product in a much cleaner and more effective way using a button that when clicked, opens a popup containing all the product information and a way to buy.

This can be achieved using the plugin WooCommerce Quickview. By using WooCommerce Quickview, you’re able to use a similar shortcode to display your product as a clickable button.

quickview button in post

The shortcode will look a little something like this: [quickview-button product-id="22"]

Once added to your post, customers can then click the button to be shown all the product information and add it to their cart with ease. 

quickview popup woocommerce

Better yet, you can customize all the information shown within the quickview to make your products even more appealing.

Start Your Free Trial of WooCommerce Quickview

Use WooCommerce Quickview to add a product preview lightbox to pages and posts.

or learn more

Display new or recent products

You might simply want to showcase your newest products on your homepage or even the shop page right before your main products. This would be particularly useful at the start of a new season or if you want a clear way for regular customers to see what you’ve recently stocked.

To do this, you can use the following shortcode: [products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"]

This shortcode uses the product ID to list your newest products. Because WooCommerce automatically generates product IDs, this shortcode uses them and then puts them in descending order (DESC), so you’ll showcase the newest products first.

It also tells WooCommerce the number of columns you’d like the number of products to be displayed in.

newest product shortcodes woocommerce

This can be further customized to show the newest products in a certain category by adding category to the shortcode like this: [products limit="4" columns="4" orderby="id" order="DESC" visibility="visible" category="hoodies"]

newest products hoodies

Show related products on the single product page

While customizing your WooCommerce store, you might be looking to change the position of the related products widget on the single product page.

If this is the case, you can remove related products using this tutorial and then re-position it using the following shortcode:

[related_products limit="4"]

The ‘limit’ part of the shortcode will tell WooCommerce how many (number of products) related products you want to show.

This shortcode is particularly useful if you’re using a page builder or customizable theme/template.

Other WooCommerce shortcodes

WooCommerce doesn’t just use shortcodes for products though. If you’re looking for some additional WooCommerce shortcodes, the following may help.

WooCommerce add to cart shortcode

If you’re looking to show the price and add to cart button of a single product on any page, you can do so with the following shortcode:

[add_to_cart id="99"]

This shortcode will display the product price and add to cart button for a specific product. The ‘id=’ section contains the product ID of that specific product.

This can be found by going to Products > All Products and hovering over the product you want the ID for.

This button will function like any other add to cart button. Taking you to the cart page and eventually the checkout page.

Add the My Account page, to any page

If you want to add the My Account page of your WooCommerce store to any page on your site, you can do so with a shortcode.

This page shortcode will display the whole My Account page, so you don’t need to code a thing. To use this shortcode, follow our My Account shortcode tutorial.

Start using shortcodes to increase sales

So there we have it, how to use WooCommerce shortcodes in your ecommerce store.

With these on hand, you’ll be able to customize your store’s sales-boosting potential by making sure customers see what you want them to see.

The plugin mentioned in this article:

  • WooCommerce Quickview – Add a quickview button to your WooCommerce store with a simple shortcode to let customers preview and buy products with ease.

Start Your Free Trial of WooCommerce Quickview

Use WooCommerce Quickview to add a product preview lightbox to pages and posts.

or learn more

Avatar

Gina is our in-house content creator and partnership manager. She’s passionate about working with plugin companies with copywriting/storytelling, content creation & marketing.

She can typically be found tending to her vegetable garden, writing, and travelling to mainland Europe.

4 Responses

Avatar
Anthony Ferrara 9 months ago

Hi Gina, Thanks for your precious article on the WooCommerce shortcodes. I just tried to set up the checkout out page and facing some trouble. If I add [woocommerce_checkout] shortcode to my checkout page it only displays the text of the shortcode. Although, [woocommerce_cart] and [woocommerce_my_account] are showing the real content and there is no problem. Could you please help me to solve this problem?

Jhim
Jhim admin 9 months ago

Hello Anthony,

It is possible that there is something conflicting for the WooCommerce checkout shortcode to render. Please try deactivating other plugins or switch to a default theme to isolate what is causing the issue.

I hope this helps!

Avatar

Hi!

I find it very annoying that the [products] shortcode does not work with pagination and a max limit for instance for recent products. If I don't have a limit all products are shown.
Do you know a way around that?
Say I want to show all the latest 60 products in a certain category with pagination of 20 products per page.

Thanks!
Ben

Avatar
Kenneth admin 9 months ago

Hi Ben,

You may use the "paginate" attribute to activate the pagination using WooCommerce shortcodes.
Doc: https://docs.woocommerce.com/document/woocommerce-shortcodes/#display-product-attributes

Hope that helps.
Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *