A few years ago, it took a significant amount of investment to create any type of retail business. You had to buy the best property in order to open a store–and that was just the beginning. However, things have changed for the better.
Nowadays, you can start a successful retail business without spending a lot of money. With the right domain and user-friendly website, you can earn a pretty penny in no time.
While many consider Shopify to be their choice platform for creating eCommerce websites, most businesses love the robust experience of creating a web store on WooCommerce. This is why 26% of the top 1 million sites prefer WooCommerce over anything.
One of the most compelling features of this eCommerce CMS is WooCommerce Shortcodes. With the help of the shortcodes, you can create customer-centric and scalable online stores without a lot of hassle.
What are WooCommerce Shortcodes?
Shortcodes can be defined as function-specific shortcuts that can provide essential features by triggering functions present within the code. Since WooCommerce is all about creating amazing online shops, you can use WooCommerce Shortcodes to design conversion-focused and shopper-friendly experiences.
For example, with the help of shortcodes, you can set featured products, create quick sale conditions, create custom display rules, and much more.
How to use shortcodes
You can use shortcodes in the following two ways:
- By manual input
- By plugin
In this guide, you will learn how to use WooCommerce shortcodes manually properly. This method gives you more flexibility and works great, even if you are a beginner. You will also learn how to use the plugin as well.
Where to use WooCommerce Shortcodes
Since shortcodes are part of the WooCommerce code, you can use these on a page or post.
One of the best ways to use a shortcode is through the block editor. In order to put a shortcode, create a new content block, and search for Shortcode. You will find the option to create one under the Widgets section.
Once created, just type (or copy-paste) the WooCommerce shortcode in the required field.
If you are utilizing the classic editor, then just place the shortcode in the Visual area of a page or post.
In this section, we will share the essential shortcodes for a WooCommerce store. Without these shortcodes, WooCommerce cannot perform as expected. The following shortcodes need to be included somewhere on your website:
- [woocommerce_cart] – displays the cart page
- [woocommerce_checkout] – displays the checkout page
- [woocommerce_my_account] – displays the user account page
- [woocommerce_order_tracking] – provides the order tracking form
Generally, the onboarding wizard from WooCommerce automatically generates these shortcodes on pages. Therefore, there might not be a need to use these manually except for [woocommerce_order_tracking] as it is considered optional, depending on your business model.
Args (aka Arguments)
In order to provide more flexibility, some shortcodes can be controlled through short syntaxes known as “args” (or arguments). Args amplifies the power of shortcodes and provides you with options that you can use to make better shopping experiences.
When it comes to Page Shortcodes, only [woocommerce_my_account] has an arg:
array( 'current_user' => '' )
Through this arg, you can set the number of current and previous orders to show. The default is 15; however, you can set any number of your liking or -1 to display all orders.
The [products] shortcode is amongst the most commonly used and trusted shortcodes by WooCommerce. The reason behind the popularity of this WooCommerce shortcode is that it has replaced several other strings that were previously used in earlier versions of WooCommerce.
The specialty of the [products] shortcode is that you can use this shortcode to display products according to their ID, SKUs, categories, and attributes with support for pagination, product tags, and random sorting.
products ids="1, 2, 3, 4, 5" products skus="foo, bar, baz
The [products] shortcode replaces the need for additional WooCommerce (version 3.2. or below) shortcodes including
[featured_products], [best_selling_products], [sale_products], [product_attribute], [top_rated_products], and [recent_products].
Note: With WooCommerce Core version 3.6, you now have access to a range of product blocks. So, how are product blocks different from shortcodes? They are more straightforward and convenient to configure as compared to shortcodes.
Other Available Products Shortcodes
Product: The [products] shortcode is used for displaying multiple products. On the contrary, the [product] shortcode is used for displaying a single product according to ID or SKU.
[product id="99" [product sku= "FOO"
You can hover over the WooCommerce products menu to find the ID of a product.
Product Category by Slug: The WooCommerce [product_category] is used to display multiple products of a category by the slug.
Product Categories: The WooCommerce[product_categories] shortcode allows you to display several product categories in a single loop.
product_categories number="12" ids="2, 6, 7, 10"
You can customize by number parameters to display a specific number of products, and the ids field to choose the categories that you wish to display.
You can also utilize the parent parameter and set it to zero to display only the top-level categories.
product_categories number="12" parent="0"
Note: Hover over the category to find the ID of a category that appears in the URL.
Product Attribute: The WooCommerce [product_attribute] shortcode allows you to list the products by their attributes.
product_attribute attribute="color" filter="black"
Product Sorting: If you want to sort multiple products or multiple products of a category, you can use the “orderby” or “order” parameter.
The “orderby” parameter allows the following values:
The “order” parameter allows the following values:
products skus="foo, bar, baz" orderby="date" order="desc"
Recent Products: The WooCommerce [recent_products] shortcode allows you to list the recently added products.
recent_products per_page="12" columns="4"
You can control the number of products that you want to display per page with the “per_page” attribute. And determine the number of columns with the “columns” attribute.
Featured Products: The WooCommerce [featured_products] allows you to display the “featured” products. It can be used to boost the sale of specific products.
featured_products per_page="12" columns="4"
Sale Products: You can use this WooCommerce shortcode to display your selection of products that are on sale or discounted price.
sale_products per_page="12" columns="4
Best-Selling Products: You can use this WooCommerce shortcode to bring your best-selling items to the forefront.
best_selling_products per_page="12" columns="4"
Related Products: You can use this WooCommerce shortcode if you wish to display all of your related products.
related_products per_page="12" columns="4"
Top-Rated Products: You can use this WooCommerce shortcode to display your range of top-rated products.
top_rated_products per_page="12" columns="4"
Add to Cart URL: You can use this WooCommerce shortcode to print the URL on the ‘add to cart’ button on each product by ID.
Product Page: You can use this WooCommerce shortcode to showcase the full product page of a WooCommerce product by ID or SKU.
product_page id="99"product_page sku="FOO"
When to use a plugin for WooCommerce shortcodes?
As you can see, WooCommerce shortcodes are quite easy to use; however, they can get overwhelming for novice users. Currently, there is no default button or menu for this feature. However, you can get one if you want by using plugins:
- WooCommerce Shortcodes by WooThemes and Claudio Sanches
- Woo Shortcodes Kit By Alberto G.
WooCommerce Shortcodes plugin is not an official plugin by the core development team. Created by WooThemes and Claudio Sanches, the plugin provides a dropdown menu for all the available WooCommerce shortcodes. It comes handy when you are building the store on the classic (TinyMCE) visual editor.
Woo Shortcodes Kit provides a different take on shortcode usage. Developed by Alberto G., this plugin is something every developer and store owner should use. With built-in templates and toggle controls, this WooCommerce shortcodes plugin removes the guesswork of using shortcodes.
Both of these plugins are excellent at what they do. However, these should be tested on a staging site to check their functionalities.
Troubleshooting WooCommerce Shortcodes
Sometimes, the shortcodes may not provide the desired results. There are a few common errors made by developers while using shortcodes. One of the biggest mistakes is to put the shortcode between < pre > tags. This can be easily fixed. Simply click on the Text tab of the classic editor and remove < pre > and < /pre > tags.
The accidental use of curly quote marks (“) is also a common problem. This one is tough to spot. Therefore, always make sure you are using straight quote marks (“) while using WooCommerce shortcodes.