When it comes to building an eCommerce website, who doesn’t like to keep things simple? WooCommerce is a great tool, especially for someone who’s making a WordPress website for selling products and services online.
But how about having all the codes that are available to have a custom design and creating and building an e-commerce store from scratch?
WooCommerce Shortcodes let you do just this and much more. You can add a variety of functionality to your sidebar, sliders, pages, posts, widgets, etc. – all this without having to write a single line of code.
Here’s a comprehensive guide to introduce you to the world of WooCommerce shortcodes. You can follow this guide to learn how to use the WooCommerce shortcodes and customize your WooCommerce website easily.
Let’s dig right in!
Table of Contents
Most Popular WooCommerce ShortCodes
1. Page Shortcodes
Needless to say, building a checkout page or My Account page from scratch can be a daunting task. But why would someone go that route when you can achieve the same thing by using simple page shortcodes?
To make things simple for you, here are some of the most popular page shortcodes:
- [woocommerce_cart] – Use this shortcode to calculate the customer’s cart value.
- [woocommerce_checkout] – Use this shortcode to display the checkout page to your customers.
If you are a frequent online shopper, you perhaps already know the value of having an order tracking information available to you as soon as you place an order. The same is also provided to you on your order receipt as well as in the confirmation email.
- [woocommerce_order_tracking] – Use this shortcode to display the Order Tracking page to your customers.
- [woocommerce_my_account] – Use this shortcode to display the “My Account” Page to the customers.
You can also combine shortcodes on pages. For example, you can choose to set up a form page using [woocommerce_my_account] and [woocommerce_order_tracking] together on the same page.
Feel free to try other permutations and combinations of WooCommerce shortcodes to arrive at the one you would actually put to use.
2. Product Shortcodes
Products make your e-commerce store complete. There are times when you need to display products page in a particular fashion to attract the attention of visitors who browse through your online store. This is where product-related WooCommerce shortcodes come into the picture. There are a lot of shortcodes in this category, so let’s take a look at them one by one.
The [products] shortcode lets you display products by SKU, post ID, attributes, categories, etc. with support for product tags, random sorting, and pagination, while also making the need for multiples shortcodes redundant.
Here are some of the shortcodes you will need to explore, please have a look at the complete documentation available on the official WooCommerce website.
Display Product Attributes
- limit – the number of products to display. Defaults to and -1 (display all) when listing products, and -1 (display all) for categories.
- columns – The number of columns to display. Defaults to 4.
- paginate – Toggles pagination on. Use in conjunction with a limit. Defaults to false set to true to paginate.
- orderby – Sorts the products displayed by the entered option. One or more options can be passed by adding both slugs with a space between them. Available options are:
- date – The date the product was published.
- id – The post ID of the product.
- menu_order – The Menu Order, if set (lower numbers display first).
- popularity – the number of purchases.
- rand – Randomly order the products on page load (may not work with sites that use caching, as it could save a specific order).
- rating – The average product rating.
- title – The product title. This is the default orderby mode.
- skus – Comma-separated list of product SKUs.
- category – Comma-separated list of category slugs.
- order – States whether the product order is ascending (ASC) or descending (DESC), using the method set in orderby. Defaults to ASC.
- class – Adds an HTML wrapper class so you can modify the specific output with custom CSS.
- on_sale – Retrieve on sale products. Not to be used in conjunction with best_sellingor top_rated.
- best_selling – Retrieve best selling products. Not to be used in conjunction with on_sale or top_rated.
- top_rated – Retrieve top-rated products. Not to be used in conjunction with on_saleor best_selling.
Content Product Attributes
- attribute – Retrieves products using the specified attribute slug.
- terms – Comma separated list of attribute terms to be used with attribution.
- terms_operator – Operator to compare attribute terms. Available options are:
- AND – Will display products from all of the chosen attributes.
- IN – Will display products with the chosen attribute. This is the default terms_operator value.
- NOT IN – Will display products that are not in the chosen attributes.
- Visibility – will display products based on the selected visibility. Available options are:
- visible – Products visible on shop and search results. This is the default visibility option.
- catalog – Products visible on the shop only, but not search results.
- Search – Products visible in search results only, but not in the shop.
- hidden – Products that are hidden from both shop and search, accessible only by direct URL.
- featured – Products that are marked as Featured Products.
- category – Retries products using the specified category 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 off of a comma-separated list of SKUs
You can use multiple permutations and combinations using the above bunch of shortcodes to arrive at the final solution that you need.
For example, the shortcode [products limit=”5″ columns=”5″ orderby=”popularity” on_sale=”true” class=”quick-sale”] explicity states five products with five columns (which will be included in one row), showing the top most popular on-sale items (quick-sale being one of the CSS classes).
You can also add multiple products to this same shortcode in this way: [products ids=”1, 2, 3, 4, 5″].
Just like the previous example, it’s an excellent idea to use the arguments: “order=”, “orderby=”, “columns=”.
For example, if you use [products ids=”1, 2, 3″ columns=”3″ order=”desc” orderby=” date”], it will output 3 products in 3 pre-defined columns ordered by the date variable, in descending order.
Product Category allows you to add multiple product categories in both loop and output with the help of this simple shortcode:
[product_category category=” three”]
For a better understanding of the product categories section, here are a few more attributes you can use with this shortcode:
- order => ASC – This attribute changes how the product categories are ordered, “DESC“ or “ASC”.
- orderby => name – This attribute sorts the order by using “name” or “date” as valid variables.
- number => null – This attribute represents the count or number of categories.
- columns => 3 – This attribute defines the number of columns in which categories are organized.
- hide_empty => 2 – This attribute represents Set 2 to hide those categories that have no products.
- parent => – This attribute represents Set 0 to display only the top-level categories.
- ids => – This attribute represents that the product IDs can be set to output the specified results.
Product Category by Slug
This attribute allows you to add all those products that fall within a defined category, along with an option to adjust the results page with the columns=”” and per_page=”” parameters. For example, here’s a shortcode that uses all these parameters:
[product_category category=”” columns=”4″ per_page=”15″ orderby=”date” order=”asc”]
This shortcode will display the products which you may have added recently. To show you how it works, here is an example shortcode:
[recent_products per_page=”20″ columns=”4″ orderby=”date” order=”DESC”]
The featured product shortcode allows you to add all your favorite products together and display them on your web page. Here’s how the shortcode looks:
[featured_products per_page=”8″ columns=”4″ orderby=”date” order=”DESC”]
Running sales every once in a while is a great way to attract more traffic to your online store, and also to get more return customers.
Want to put some products on sale? Sale products shortcode lets you do this and more.
Here’s what the shortcode looks:
[sale_products per_page=”21″ columns=”3″ orderby=”date” order=”DESC”]
Once you’ve added this shortcode, here’s what the result will look:
Best Selling Product
How about showcasing your best selling products to the new visitors? Won’t it help them figure out which items to look at to start with? Of course, it will!
This is where the best selling products shortcode comes into the picture.
If you want to showcase your best selling products, simply use this shortcode and make things happen:
[best_selling_products per_page=”18″ columns=”2″ orderby=”date” order=”DESC”]
Top Rated Product
Sometimes it does make sense to push your top-rated products so that you can win customer loyalty. You can use the built-in reviews and rating feature that comes WooCommerce by putting this shortcode to use (example):
[top_rated_products per_page=”10″ columns=”2″ orderby=”date” order=”DESC”]
If you want to cross-sell or up-sell other products that lie in the same category as the one your website visitor is looking at, use related products shortcode. This shortcode displays a list of all the similar products:
Make it easier for your visitors to search product, by inserting live search and even live filtering functionality inside your pages and posts
Product search shortcode: [woocommerce_product_search]. It can be used to set up a basic product search.
Live Product Filter Shortcode
The live product filter functionality has become so common in web and mobile apps that we almost take it for granted. This is the reason why you need this functionality in your e-commerce store. Enable custom the product filter by using the WooCommerce shortcodes as mentioned below.
3. Shopping Cart / Product Price Button
If you use this shortcode [add_to_cart id=”10″ sku=”10″], it will display the add-to-cart button and price and for a specific product, either by SKU or ID.
Once you click the publish button, you will notice that the shortcode has been generated successfully and it displays the product as available for its default price – which you can add to cart.
You can use this to customize the product price or shopping cart, displaying offer price to your top customers – the options are simply endless!
Use this shortcode to display the price value and the add to cart button for a single product by its ID.
This WooCommerce shortcode lets you print the URL on the add-to-cart button of a specific product by its ID.
Here’s an example to show you how it works:
Sometimes it happens, you paste a shortcode incorrectly. But what if you have pasted the shortcode correctly at its place, but it still doesn’t work?
In that case, you first need to check your code to see if you embedded the shortcode between <pre> tags. If this is found as the root of the issue, remove these tags by going to your text editor.
Other eCommerce Platforms
One needs to note that such a design is not always easy for people who are not technical or just need to get a shop up and running.
As always, there are other alternatives when it comes to eCommerce. For example, one of the more popular platforms today, besides the one mentioned here is Shopify. If you would like to compare WooCommerce vs. Shopify, have a look at the following article: https://www.collectiveray.com/wp/wc/woocommerce-vs-shopify
In the scenario of not having a web designer at hand, creating web pages using these codes is not an option so that we would suggest opting for another platform such as Shopify.
While this might not be as customizable as WooCommerce, Shopify is always a strong platform for creating an online shop, having plenty of great extensions and a great UI when it comes to creating online pages.
Of course, there are plenty of differences between these two platforms.
Now that you know what WooCommerce shortcodes are actually useful for you and what you’d like to do with them – feel free to experiment.
Not only will you have fun in the process, but also get to save a lot of your precious time that would have otherwise been wasted on building the important pages of your WooCommerce store from scratch.
Hopefully, this tutorial has proven to be of help to you. For more tips and advice in this regard, don’t forget to check this space frequently for future updates.