Everything You Need to Know
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.
You must now get a shortcode to paste or type into the field provided.
Place the desired shortcode (all of which weâll cover in this article) into the field.
Make sure you Save or Update the post or page to see the results.
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.
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.
On the frontend, youâll see the shortcode in action based on where you placed it within your content.
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:
If someone clicks that button, it will add that specific product to their cart:
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.
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
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.
Does it have arguments? đŞ
No.
The WooCommerce 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.
Does it have arguments? đŞ
No.
The My Account page shortcode
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 đĄ
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 đĄ
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 đĄ
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.
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 đĄ
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.
That places a gallery of related products right below the description.
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.â
The Product Categories shortcode provides a different result, with a list of your categories, pictures, and product counts.
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.
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.
Then an action must be taken by the user to trigger the message.
This is a non-WooCommerce page, so the shortcode now reveals a built-in WooCommerce message about the product being added to the cart.
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.â
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.
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.
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!
5 Essential Tips to Speed Up Your WordPress Site
Reduce your loading time by even 50-80% just by following simple tips.