Everything You Need to Know

Everything You Need to Know
Comments Off on Everything You Need to Know, 03/06/2022, by , in Wordpress

WooCommerce offers a myriad of built-in shortcodes or little bits of code that produce content and complete actions on your website. Many of these ready-to-use shortcodes have extraordinary power for adding elements like Add To Cart buttons and product details on any post or page.

In this WooCommerce shortcode guide, we cover all the shortcodes available for your online store, along with guidelines on how to add them.

📚 Table of contents:

What’s a WordPress/WooCommerce shortcode?

Shortcodes look like this:

[this_is_a_shortcode]

Except, you would change the text within those brackets to specify what you’d like the shortcode to do.

However, you can’t simply type in whatever you want; there are specific shortcodes that work across WordPress and within the WooCommerce plugin.

For instance, one default shortcode that comes with WooCommerce is:

[products]

This shortcode pulls a gallery of products from your store and displays them on the page or in a post where you placed the shortcode.

WooCommerce shortcodes either:

Generate essential actions/content on your ecommerce store, such as sending a customer to the Checkout page

Or…

Allow store owners to place ecommerce content anywhere on their site, such as inserting a product gallery with Buy Now buttons on a blog post

If you want to set up your store and insert products in your content, understanding WooCommerce shortcodes is important.

WooCommerce is moving away from shortcodes (but they’re still important)

While understanding WooCommerce shortcodes is still important for getting the most from your store, it’s worth noting that the WooCommerce team is trying to move away from shortcodes in favor of blocks.

Since the launch of the block editor (AKA Gutenberg) in WordPress 5.0, WooCommerce has been slowly but surely creating dedicated blocks for a lot of the functionality that you could previously only access through shortcodes.

Many of these blocks are now available in the core WooCommerce plugin. If you want even more options, the official WooCommerce Blocks plugin gives you access to all the blocks that WooCommerce is experimenting with.

👉 If you want to learn more, check out our WooCommerce blocks tutorial.

However, the WooCommerce block system still isn’t as comprehensive as the existing shortcodes, so understanding WooCommerce shortcodes is still important.

Plus, if your site still uses the Classic TinyMCE editor, you’ll need to rely on shortcodes as WooCommerce blocks don’t work with the Classic editor.

How to use WooCommerce shortcodes

WooCommerce will automatically add some shortcodes when setting up your store, typically for key pages such as the cart and checkout.

To add other shortcodes to your site, you can manually copy and paste them or type them in directly.

You can add a WooCommerce shortcode anywhere on your site, no matter if you’re using the block editor (Gutenberg) or the classic TinyMCE editor. You can also include shortcodes in other areas, such as your widgets.

Let’s first talk about how to add WooCommerce shortcodes in general and then we’ll break down some of the most useful shortcodes.

How to add a WooCommerce shortcode in the block editor

To begin, open a new or current post or page on WordPress.

Click one of the “+” icons to search for content blocks. Find and select the Shortcode block so that it gets inserted into the editor.

shortcode block

You must now get a shortcode to paste or type into the field provided.

write shortcode here

Place the desired shortcode (all of which we’ll cover in this article) into the field.

WooCommerce shortcode in block editor

Make sure you Save or Update the post or page to see the results.

update button

Go to the frontend of that page or post to view what the shortcode produces. In this case, we added a Products shortcode configured to show eight products and organize them by price.

frontend view

How to add a WooCommerce shortcode in the classic editor

The classic WordPress editor handles shortcodes in a slightly different manner.

To insert a WooCommerce shortcode, open a page or post editor, and make sure it’s set to Visual.

Paste the shortcode anywhere you want in the editor.

WooCommerce shortcode in classic editor

On the frontend, you’ll see the shortcode in action based on where you placed it within your content.

products gallery

Using arguments with your shortcodes

Sometimes referred to as “Args” or “Attributes” or “Parameters,” shortcode Arguments allow developers and site owners to render more specific content from the shortcodes used.

As an example, you could take this “id” argument:

id=”25″

And add that to the following shortcode:

[add_to_cart]

To make:

[add_to_cart id=”25″]

As a result, the page with that shortcode shows an Add To Cart button for the product with the ID of #25:

add to cart

If someone clicks that button, it will add that specific product to their cart:

cart example

Not all WooCommerce shortcodes allow for arguments, but some require them. Here are some examples of arguments you can try with your WooCommerce shortcodes:

limit=””: for example, limit=”5″ only shows five products id=””: to display a specific product based on its ID, like id=”10″orderby=””: for organizing a list of products by date, id, rating, title, popularity, menu_order, or rand (randomly). attribute=””: for grabbing items based on their attribute slugscolumns=””: to set a certain number of columns in a product gallery

You would add these within the brackets but at the end of the shortcode text, with an equal sign and quotation marks to hold the value, like this:

[products columns=”3″ orderby=”popular”]

Which shortcodes come with WooCommerce?

There are four required shortcodes for WooCommerce to run properly, three of which are auto-added after installing WooCommerce.

They are:

WooCommerce adds three of those shortcodes to auto-generated pages in the All Pages section of WordPress.

premade woocommerce pages

Here’s a look at every WooCommerce shortcode, what each one does, and if it’s already installed on a page.

The WooCommerce Cart page shortcode

cart WooCommerce shortcode

The Cart page shortcode looks like this:

[woocommerce_cart]

Purpose 🎯

The Cart page shortcode displays the WooCommerce cart on your Cart page with details for the customers such as products added to the cart, quantity, pricing, and total.

It’s one of the shortcodes that’s automatically added to a page after installing WooCommerce.

Example 💡

Without the Cart page shortcode, none of the elements below would appear for customers.

the cart page

Does it have arguments? 💪

No.

The WooCommerce Checkout shortcode

checkout shortcode

The Checkout page shortcode looks like this:

[woocommerce_checkout]

Purpose 🎯

The Checkout shortcode renders the ecommerce checkout page on your website, revealing fields for customers to type in contact and payment information, while also reviewing their order one more time.

This shortcode receives its own automatic page after installing WooCommerce.

Example 💡

The Checkout shortcode produces everything from name fields to order information and payment fields to the Place Order button.

checkout page

Does it have arguments? 💪

No.

The My Account page shortcode

my account

The My Account page shortcode looks like this:

[woocommerce_my_account]

Purpose 🎯

This WooCommerce shortcode gives customers a page on your website to manage their account information, with sections for:

Changing contact informationAdjusting passwordsEditing payment methodsViewing past ordersLogging in/out of the account

Keep in mind, the My Account shortcode doesn’t have its own auto-generated page, so you must make your own.

Example 💡

my account WooCommerce shortcode

Depending on your configuration, you may have other tabs on the My Account page for things like Subscriptions and Downloads.

Does it have arguments? 💪

Yes.

The WooCommerce Order Tracking shortcode

The Order Tracking shortcode looks like this:

[woocommerce_order_tracking]

Purpose 🎯

This shortcode creates a page for merchants and customers to track shipments with carrier codes.

You must make a new page for this to appear on your online store.

Example 💡

shipment tracking

In order for the Order Tracking shortcode to work, you must send out tracking IDs with your transactional emails.

Does it have arguments? 💪

No.

The WooCommerce Products shortcode

The Products shortcode looks like this:

[products]

Purpose 🎯

Perhaps the most powerful of all WooCommerce shortcodes, Products shortcodes let you display any item you want from the inventory, while also getting more specific about your choice based on:

SKUCategoryAttributesProduct ID

It’s also useful for showing product galleries where you have multiple items, with their images, titles, and Buy buttons all organized in columns.

Example 💡

product example

This Products shortcode presents a collection of items with arguments to display a limit of ten items, in five columns, and ordered by most popular.

products WooCommerce shortcode

Does it have arguments? 💪

Yes, more than any other shortcode in WooCommerce.

Some popular arguments for the Products shortcode include:

limitcolumnsorderbyskustagbest_sellingorderclassattributeidscategory

The Product Page shortcode for WooCommerce

The Product Page shortcode looks like this:

[product_page]

But it relies on extra ID or SKU information, so the above shortcode actually won’t work until you include something like:

[product_page id=”15″]

Or:

[product_page sku=”F12345″]

Purpose 🎯

The Product Page shortcode is different from the Products shortcode in that it shows a full, individual product page instead of a preview or a collection of items.

Example 💡

full product page

As you can see, this shortcode presents the entirety of any one product page you choose, not just the image, title, and Add To Cart button (which is what you get from the Products shortcode).

Does it have arguments? 💪

Yes, the required ID or SKU arguments.

The Related Products shortcode for WooCommerce

The Related Products shortcode looks like this:

[related_products]

Purpose 🎯

It’s meant to place a gallery of related products anywhere on an existing product page, or on any page with some sort of product information on it.

Without a product to reference, the shortcode isn’t able to find related items.

Example 💡

We placed a Related Products shortcode inside the description of a product page, and included a limit argument of five.

related products with a limit

That places a gallery of related products right below the description.

related products WooCommerce shortcode

Does it have arguments? 💪

Yes:

Product Category shortcodes for WooCommerce

The Product Category shortcode looks like this (for showing items in a particular category):

[product_category]

Another version of the shortcode displays a list of your product categories:

[product_categories]

Purpose 🎯

These shortcodes pull products based on categories specified, or simply a list of your categories.

Keep in mind that you must actually have categories configured for this to work.

Examples 💡

This example uses the Product Category shortcode with a simple argument of category=“clothing.”

category

The Product Categories shortcode provides a different result, with a list of your categories, pictures, and product counts.

category list WooCommerce shortcode

Does it have arguments? 💪

Yes, quite a few:

orderorderbyhide_emptycategoryidslimitcolumnsparent

Add To Cart Shortcodes

WooCommerce has two “add to cart” shortcodes, one of which looks like this:

[add_to_cart]

The other one is:

[add_to_cart_url]

Both require either a sku or id argument to function.

Purpose 🎯

The general Add To Cart shortcode pulls a product’s price and displays it alongside an Add To Cart button.

The Add To Cart URL shortcode displays the product page URL of the item you choose and places it on an Add To Cart button.

You might need these two shortcodes if you’re having trouble getting an Add To Cart button to appear somewhere or replacing another button, like a Buy Now button. You’d most likely pair these with product images, since the shortcodes only show the button.

Example 💡

[add_to_cart id=”14″]

This shortcode, with a product id argument, produces the following.

add to cart

As you can see, it presents the price and a button.

The Add To Cart URL shortcode, on the other hand, simply produces the URL of said product.

Does it have arguments? 💪

Yes:

id skustyleshow_priceclassquantity

The Add To Cart URL shortcode has fewer:

Shop Messages shortcode for WooCommerce

The Shop Messages shortcode looks like this:

[shop_messages]

Purpose 🎯

It’s a handy shortcode for showing built-in WooCommerce messages on non-WooCommerce pages.

It’s usually only useful when paired with another shortcode, like if you were to put an Add To Cart button on a non-WooCommerce page, but still want a message saying “This product has been added to your cart.”

Example 💡

The Shop Messages shortcode generally requires a partner shortcode as a trigger. The Add To Cart shortcode is a good example.

shop messages

Then an action must be taken by the user to trigger the message.

add to cart WooCommerce shortcode

This is a non-WooCommerce page, so the shortcode now reveals a built-in WooCommerce message about the product being added to the cart.

WooCommerce shortcode for messages

Note: If you’re having trouble seeing the shop messages, go to WooCommerce > Settings > Products > General, and uncheck the box to “Enable AJAX add to cart buttons on archives.”

disable this box

Does it have arguments? 💪

No.

Prebuilt pages that don’t use a WooCommerce shortcode

While in the All Pages section of WordPress, you’ll notice a few other auto-generated pages from WooCommerce that include special tags for running an online store.

pages that don't use shortcodes

These include:

Privacy Policy pageRefund and Returns Policy pageShop page

Although they’re created by default after installing WooCommerce, these pages don’t work the same way as the ones with shortcodes like the Checkout and My Account pages.

Instead, they utilize other methods for displaying content, like post templates and simple preloaded text. They’re there for you to speed up your overall design process, but you shouldn’t expect to see any shortcodes on those pages.

An example of how the auto-generated Privacy Policy page provides content but not through a shortcodeAn example of how the auto-generated Privacy Policy page provides content but not through a shortcode

WooCommerce extensions can provide additional shortcodes

WooCommerce already has a powerful collection of shortcodes for you to insert and manage, but third-party plugins typically provide even more shortcodes to strengthen your development experience with WooCommerce.

As an example, the WooCommerce Product Search extension has shortcodes for more flexible product searching, including:

woocommerce_product_search: to reveal a product search field anywhere on your sitewoocommerce_product_filter_price: to display a product search filter for price woocommerce_product_filter_sale: for filtering by sale items woocommerce_product_filter_category: for filtering by product category in a search field

Alternatives to WooCommerce shortcodes

If you find WooCommerce shortcodes confusing, you have two main alternatives to control your store’s content.

WooCommerce blocks

First, you can use the official WooCommerce blocks that we mentioned earlier. These blocks aim to mimic the same functionality that you get with shortcodes, but give you a more user-friendly method of working with content because you can do everything from the visual editor.

Again, many of these blocks are now built into the core WooCommerce plugin, but you can also access additional experimental blocks by installing the WooCommerce Blocks plugin.

Page builder plugins

Alternatively, you can use popular page builders like Elementor and Beaver Builder.

Elementor Pro is probably one of the strongest page builders when it comes to working with WooCommerce. In addition to multiple blocks for displaying products in different ways, you also now get dedicated Cart and Checkout widgets that can replace the WooCommerce shortcodes for those pages.

Beyond simplifying things, you’ll also be able to fully customize the design of those pages using Elementor, which isn’t something you can do with just the shortcode.

ℹ️ To learn more, check out our Elementor review.

Get started with WooCommerce shortcodes

WooCommerce shortcodes are essential for adding ecommerce elements to otherwise non-commerce pages and posts, and they can give you far more flexibility throughout the entire development process.

Give them a try today and enjoy having more control over your store’s content. 😎

For some other tutorials on getting more from WooCommerce, you can check out these guides on how to…

Do you have questions about a WooCommerce shortcode? Please let us know in the comments!

Free guide
5 Essential Tips to Speed Up Your WordPress Site
Reduce your loading time by even 50-80% just by following simple tips.

About Vikram Rout

Vikram Rout has been a blogger, digital marketer and an SEO expert at Pixxelznet.com, one of the fastest growing custom design crowdsourcing platforms. Over the years, he has been helping small businesses and startups improve website design and SEO strategy, content marketing and user experience. You can engage with him on here.