WooCommerce Shortcodes for Beginners
Just one of the cool things we like about WooCommerce is the existence of shortcodes.
What is a shortcode? It’s a small snippet of code that can be placed anywhere on your website in order to display things like products or call to action buttons. WooCommerce comes with several shortcodes that are built in, or you can install plugins that add shortcodes.
Here’s a closer look at shortcodes and how you can use them:
Why use shortcodes?
There are a few cool applications for using shortcodes, including in optimizing your website user experience. For example, shortcodes can help you to simplify or improve the user workflow and point them toward the call to action or conversion that you would like. Some specific examples include:
- Showcase related products in your blog posts or on other WordPress pages.
- Display your top rated products on your home page
- Highlight featured products
- Show related products
- Create a grid displaying products that are on sale
- Have an “add to cart” button anywhere
- Create an order tracking page.
The bottom line is that shortcodes can help you to deliver a better shopping experience for your users and ultimately, that’s what every ecommerce store needs to aim for.
Shortcodes help you to improve the customer flow on your website Share on XWhere can you use shortcodes?
Shortcodes can be used on WordPress pages and posts. The screenshot below from WooCommerce shows the shortcode block in the block editor. This is where you’d paste the code if you’re using block editing.
How to use WooCommerce shortcodes
We titled this article “for beginners” and we really meant it. One of the great things about WooCommerce shortcodes is that you genuinely don’t have to be a tech genius, or even have any coding skills in order to use them.
All you do is paste the appropriate short code into any text editor or shortcode block where you want the corresponding feature to be shown. You can also combine shortcodes or use multiple shortcodes on the same page.
WooCommerce itself only functions with certain shortcodes being added to your website. The three below must be found somewhere on your site for it to work (they’re usually added automatically via the onboarding wizard):
[woocommerce_cart] – shows the cart page
[woocommerce_checkout] – shows the checkout page
[woocommerce_my_account] – shows the user account page
Args
“Args” ( or arguments) are one thing to know about WooCommerce shortcodes. Several shortcodes make use of args, which are a way to make the shortcode more specific. For example, if you want an add to cart button that will automatically add a certain product (say, one that you feature in a blog post), you’d use the product ID of that product as your arg. The code “id=14” when added to the shortcode [add_to_cart] will add the product that has the ID of 14, for example.
Products shortcode
Let’s say you’re having a sale on certain items, or perhaps you want to feature key products for an upcoming campaign. Products shortcodes allow you to display those products wherever you want them featured – like on your home page.
For example, the shortcode that allows you to specify which products to lay out in a grid is this:
[products ids=”14,72,40,18,71,10″]
If you want to specify the parameters of the grid, you can add code to determine things like the number of products per row, the number of columns and how they are to be arranged. Below is an example of that code:
[products ids=”14,72,40,18,71,10″ orderby=”date” columns=”4″ order=”DESC”]
In this example, the code DESC denotes descending order, but you could replace it with ASC for ascending order. Similarly, “orderby” could use other rules, such as by the order you have listed the product IDs [“post__in”] or by the most popular [orderby = “popularity].
WooCommerce describes the products shortcode as one of their most robust shortcodes. The excerpt below is taken from their documents:
“The [products] shortcode allows you to display products by post ID, SKU, categories, attributes, with support for pagination, random sorting, and product tags, replacing the need for multiples shortcodes such as [featured_products], [sale_products], [best_selling_products], [recent_products], [product_attribute], and [top_rated_products], which are needed in versions of WooCommerce below 3.2.”
Special attributes might include best selling or on sale products ( [best_selling], [on-sale]). If you want to display these attributes you set them to “true”, but WooCommerce warns to only select one so that they don’t conflict and cause an error with the display. They also shouldn’t be used with content attributes (such as those shown below).
- category – Retrieves products using the specified category slug.
- tag – Retrieves products using the specified tag slug.
- cat_operator – Operator to compare category terms. Available options are:
AND – Will display products that belong in all of the chosen categories.
IN – Will display products within the chosen category. This is the default cat_operator value.
NOT IN – Will display products that are not in the chosen category. - ids – Will display products based on a comma-separated list of Post IDs.
- skus – Will display products based on a comma-separated list of SKUs.
Add to cart
The add to cart shortcode is one of WooCommerce’s built in shortcodes. This means you can add a cart button anywhere you like on your website for a specific product. You can add code like this:
[add_to_cart=”70″]
If you’d like to also display the price of the product, you’d add code like this:
[add_to_cart=”70″ show_price=”true”]
One limitation of this inbuilt code is that if you have a product with variations (like size or color), the display will show a “select options” button rather than add to cart. This means your shoppers would have to click through to the product page which is inefficient.
There’s a way around this with a plugin. WooCommerce Product Table allows you to list variations in a table view, with a dropdown button. This means customers can select without having to click through to another page.
Product categories
Another thing shortcodes allow you to do is display your product categories. So for example, a clothing store could show dresses, shirts and accessories as separate categories for the customer to click into.
For example take a look at the code below:
[product_categories limit=”6″ orderby=”name” order=”ASC”]
This will show 6 of your product categories in name order.
You can also elect to show just certain categories by specifying their category ID. This is found by going to Products > Categories, then clicking into the URL of the category. You will see ID = (category number) in the URL. You can then choose your categories in a code like this:
[product_categories ids= “72, 73, 74”]
Shortcode plugins
WordPress and WooCommerce give you many options, including plugins to add functionality to your website. For example, the WooCommerce Shortcodes plugin allows you to seamlessly add the coding we’ve talked about here, without having to remember what it is. It will show you a drop down menu in your page editor where you select options to generate the shortcode you need.
You will also find that some other plugins you use work with shortcodes. An example is WooCommerce Quick View Pro, which allows your customers to quickly view products and make a purchase without leaving the current page. The quick view button is automatically displayed with the products you have set up with your shortcodes on activation of the plugin.
Final thoughts
Shortcodes are a cool tool to add to your belt when it comes to operating WooCommerce. They allow you to easily set up rules and improve the user flow, without having to know a lot about coding or other technical aspects.
Importantly, shortcodes can give you some very quick flexibility. You’re not always able to ask someone else to add a product to a blog post or a display grid for sale products, but shortcodes are easy enough to do yourself.
