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 slugs
- columns=””: 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 information
- Adjusting passwords
- Editing payment methods
- Viewing past orders
- Logging 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:
- SKU
- Category
- Attributes
- Product 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:
- limit
- columns
- orderby
- skus
- tag
- best_selling
- order
- class
- attribute
- ids
- category
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:
- order
- orderby
- hide_empty
- category
- ids
- limit
- columns
- parent
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
- sku
- style
- show_price
- class
- quantity
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 page
- Refund and Returns Policy page
- Shop 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 shortcodeWooCommerce 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 site
- woocommerce_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.
Keep reading the article at ThemeIsle Blog. The article was originally written by Joe Warnimont on 2022-06-03 03:52:52.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.