product shortcode woocommerce

WooCommerce Tutorials

How to Use Product Shortcodes in WooCommerce

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, 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.

But first, let’s explain what shortcodes are in WooCommerce, especially if you’re new to them.

What are shortcodes in WooCommerce?

Shortcodes in WooCommerce 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.

  • 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.
add product block
  1. Then search ‘shortcode’ in the block widget 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 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, 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.

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 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 products

Lastly, 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.

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

Start using shortcodes to increase sales

So there we have it, some of the most useful product shortcodes you can use in your WooCommerce 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 1 month 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 1 month 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 2 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 *