As one of the most popular eCommerce platforms in the world, WooCommerce offers a wide range of features that allow you to sell products and services online.
But did you know there’s a feature that can help you get even more out of your eCommerce shop?
We’re talking about shortcodes.
If you’re unfamiliar with them, there’s no need to worry. We’ll explain what they are and how to use them to optimize your online shop. In addition, we’ll explore effective ways to resolve shortcode errors.
Ready to learn all about WooCommerce shortcodes?
What are WooCommerce shortcodes?
WooCommerce shortcodes are WordPress code snippets that perform a specific function on your website. These pieces of code come with pre-defined functionality and were created specifically for WooCommerce.
All shortcodes have the same structure — short texts in square brackets. If multiple texts are used, they’ll be linked together with underscores and commas. Once you understand the syntax or the handler function, you can start adding shortcodes to your website pages.
WooCommerce shortcodes can be used with parameters or arguments (args), which enable you to customize your website even further. A parameter is the attribute being adjusted by a shortcode, while an argument is the value assigned to that attribute.
For instance, if you’re using a product shortcode, you can set the number of products to be displayed (i.e., parameter) and the number of columns you want (i.e., argument).
Here’s a glance at the parameters and arguments in a WooCommerce shortcode:
In this example, “limit” is the parameter, while “4” is the argument. Parameters allow you to modify shortcodes so they can function in different ways as per your needs or requirements. However, not all WooCommerce shortcodes use parameters.
WooCommerce shortcodes allow you to customize your eCommerce shop by adding various features to your posts and pages without any coding experience. By using pre-existing code, you can save a significant amount of time that would have been spent on writing your own code.
Shortcodes offer a quick and convenient way to enhance your website’s design for more conversions. These code snippets enable you to create a superior shopping experience and differentiate your brand from competitors.
According to a McKinsey report, 75% of online customers expect brands to provide them with a seamless shopping experience. So, enhancing your website’s user experience leads to higher levels of customer satisfaction, helping you generate more revenue.
How to use WooCommerce shortcodes
Now that you know what WooCommerce shortcodes are and why they’re important, let’s explore how to use them. Adding shortcodes to your WooCommerce store is pretty straightforward, even if you have no coding knowledge.
However, before making any changes to your website, it’s best to back up your data. This way, you can restore your website to its previous state if anything goes wrong.
If you’re using the Classic Editor, you only need to copy and paste your chosen shortcode on the desired page.
On the other hand, the Gutenberg block editor requires you to add the shortcode to a shortcode block. In this tutorial, we’ll show you how to add shortcodes to your WordPress website using the Gutenberg editor.
Let’s get started:
- Log in to your WordPress dashboard.
- Go to Pages, which is located on the left-hand menu, and select Add New. Note that you can use a new or existing page.
- Click the black plus icon (+) to create a block.
- Once you’ve clicked the plus icon, you’ll see the shortcode block. Click on it to add it to the editor. Alternatively, type [/] on the page and search for “shortcode.”
- Type or paste your desired shortcode in the field provided.
- Preview the page to make sure everything looks good.
- Click on the Publish button at the top right corner of the page.
That’s it! You’ve successfully added a WooCommerce shortcode to your page. Now that you know how to use these code snippets, let’s explore various shortcodes you can use to enhance your WordPress website.
While there are many WooCommerce shortcodes, they all serve different purposes. We’ve compiled a list of some of the most popular shortcodes you can use to enhance the functionality of your online shop.
If you’ve gone through the WooCommerce Setup Wizard, you may have noticed that page shortcodes are generated automatically. Here are the most popular page shortcodes and how to use them.
The WooCommerce cart shortcode simplifies the process of adding a cart page to your online store. It creates a default cart page, so you don’t have to build one from scratch.
In addition to displaying all the products your customers have added to their carts, this shortcode displays the subtotal, as well as the quantity and price of each product. The WooCommerce cart shortcode is as follows:
This shortcode creates a default form that online shoppers can use to check the status of their orders. Once the form is created, customers need to enter their order IDs and billing emails to track their orders.
To create an order tracking form, enter the shortcode below:
Here’s how the order tracking form would look on your store’s frontend:
This shortcode displays a customer’s account details. It enables customers to view, modify and update their personal information. For instance, they can view their previous orders, change their passwords and email addresses and log in and out of their accounts.
The shortcode for this is:
This WooCommerce shortcode creates a checkout page. As such, it includes fields for customers to add their billing details and shipping information. This shortcode incorporates the Place Order button as well.
To add the checkout page to your WooCommerce website, enter the following shortcode:
WooCommerce product shortcodes enable you to create customized product pages and display products anywhere you want. Let’s go over how you can use them to display your products in different ways on your website.
Display any item in stock using the products shortcode:
The products page can be further customized to display products in ascending (ASC) or descending order (DESC).
For example, if you want to list products in an ascending order, the shortcode would look like this:
If you want to make further customizations, you have the option to restrict the number of products that will be displayed:
[products limit=”5″ order=”ASC”]
Other parameters for this shortcode include:
It’s worth mentioning that parameters like best_selling, top_rated and on_sale shouldn’t be used together.
This shortcode allows you to display recent products on your website. If you’ve launched exciting new products, you can use this shortcode to draw attention to them and entice customers to make a purchase.
Let’s say you want to display your six newest products across three rows. The shortcode for this would be:
[products limit=”6″ columns=”3″ orderby=”id” order=”DESC” visibility=”visible”]
This shortcode lists products based on their unique IDs, which are generated when product pages are created.
If there are certain products you want to draw your customers’ attention to, this WooCommerce shortcode is the one for you. The base shortcode is:
However, if you want to display two items in one row, the shortcode will look like this:
[featured_products limit=”2″ columns=”2″]
If you want to showcase on-sale products, WooCommerce shortcodes can be of great help. To display three on-sale products ordered by their popularity, you can use this shortcode:
[products limit=”3″ columns=”3″ orderby=”popularity” on_sale=”true”]
When searching for products that meet their needs, most customers seek out top-rated items. Here’s where the top-rated products shortcode comes in. It allows you to display items with the highest ratings in your online store.
The shortcode for this is:
This shortcode shouldn’t be used in conjunction with on_sale or best_selling.
Best-selling products shortcodes allow you to showcase your best-selling products. You can display them on your homepage to draw attention to them once a potential customer visits your website.
If you want to showcase a four-column grid of your four best-selling products, the shortcode is as follows:
[products limit=”4″ columns=”4″ best_selling=”true”]
Product tags allow you to display only products with a particular tag. The shortcode for this function is pretty straightforward. For example, to showcase products with the tag “pants,” you can use the shortcode:
Another commonly used WooCommerce shortcode is the product category shortcode. Here are the two main shortcodes and their use cases.
This shortcode allows you to display products from a specific category on any page. If you want to attract customers to a new product category, this shortcode can come in handy:
For example, to display products from the pants category, you can use this shortcode:
You can opt to modify this further. For example, you can display six products from the pants category in three columns and in descending order using this shortcode:
[product_category category=”pants” limit=”6″ columns=”3″ order=”DESC”]
You can also add more product categories and separate them with commas. In the example below, we’ll add jackets to the pants category.
The product categories shortcode lets you display all your product categories at once:
So, if you’ve got several categories like pants, t-shirts and jackets, this shortcode will display all these options.
This shortcode can also be used to highlight specific category IDs. For example:
Besides the WooCommerce shortcodes listed above, here are other useful shortcodes to add to your website.
As the name implies, this shortcode lets you display products related to the products a customer views on your website. The base shortcode is:
It accepts arguments such as limit, orderby and columns. For instance, you can display four related products by adding a limit parameter to the shortcode:
The limit parameter controls the number of related products you want to display to each customer.
Here’s another example:
[related_products limit=”4″ columns=”4″]
This allows you to showcase related products in a grid containing four products per row.
The product page shortcode lets you display a single product page by ID or SKU. Let’s say you want to display a product whose ID is 28.
The shortcode would be:
If you’re keen on writing blog posts, use this shortcode to embed a specific product in your post, allowing your readers to access it easily.
To find the ID of a product, log in to your WordPress admin dashboard and navigate to Products > All Products. Hover over a specific product title and you’ll see the product’s unique ID.
With the WooCommerce Product Table, you can add product tables to your online store and provide customers with an enjoyable one-page shopping experience. Customers can find the products they need, select their desired quantities and add products to cart without having to visit several pages.
In addition, this plugin includes tons of customization options. For example, you can select specific product categories you want to showcase. You can also opt to display product variations using dropdown menus.
Lastly, you can display the product table on any section of your website using the shortcode:
Add to cart
The add-to-cart shortcode allows you to display the add-to-cart button for a single product. It’s a useful feature when you don’t want to display the full product details.
A blog post is a great place to use the add-to-cart button. The WooCommerce shortcode for this is:
If you ever encounter any problems while using WooCommerce shortcodes, here are a number of helpful tips you can use to troubleshoot them.
- Check if you embedded the shortcode between <pre> tags. If this is the case, go to the text editor to remove these unwanted tags.
- Make sure the quotation marks are straight (“) and not curly (“).
- Use square brackets.
- Ensure that each attribute value, which follows the equal sign, is enclosed in quotation marks.
- Use the latest version of WooCommerce.
- Switch to a different theme, as your current theme may be conflicting with the WordPress shortcode you want to use.
- If you suspect a plugin is causing the error, deactivate each plugin one by one and keep testing the shortcode to see if it works.
If you’re looking for other ways to showcase products on your website and customize your store, here are some alternatives to WooCommerce shortcodes you can use.
WooCommerce blocks are a great alternative to shortcodes. They offer several blocks you can use to build and customize your eCommerce store.
By using WooCommerce blocks, you can display a grid of your best-selling products, highlight reviews from specific categories, display all products from your store and allow shoppers to view their carts from any page.
Various plugins in the marketplace let you add shortcodes to your website without any technical expertise. Intense is one such plugin. It offers over 100 shortcodes and 19 custom post types.
Custom post types provide a way for you to expand content marketing beyond just blog posts. This plugin is mobile responsive and is created with your website’s performance in mind, helping you create a superior user experience.
WooCommerce shortcodes enable you to highlight product features and benefits, provide quick access to information, simplify the checkout process and achieve your business goals. This level of customization is hard to beat.
And with a highly competitive eCommerce landscape, it’s important to build your business on a solid foundation. This requires choosing a reliable web hosting provider, like Bluehost.
Our WooCommerce hosting plans come with tools and features that simplify website building and management. In addition, you’ll gain access to real-time support, so you’ll always get help when you need it.
Contact us today to discover how we can help you grow your online store.