Shortcodes are small code snippets that will help you to achieve a functionality or display content based on certain conditions on your WooCommerce store. Basically, the primary advantage of shortcodes is that you can avoid typing a long stretch of code to achieve a certain functionality. That makes it popular among users of all knowledge levels. WooCommerce offers several shortcodes that will help you manage your posts and pages more effectively. In this article, we will provide an extensive view on WooCommerce shortcodes. This article will be the only one that you need to refer for anything related to WooCommerce shortcodes.
The basics of shortcodes
In WordPress terms, shortcodes are considered as macros that help you have dynamic interactions with content. Shortcodes help users of WordPress to alter their content according to specific requirements even without extensive coding knowledge. In fact, it helps you keep the content clean and semantic. Here are some of the advantages of using shortcodes in WordPress posts and pages:
- Shortcodes do not add markup to the post content, and this means you have more freedom to alter the style of the page later.
- They offer the flexibility to work differently, based on the parameters set by the user. This helps users to employ the same short code in different circumstances.
Benefits of WooCommerce shortcodes
WooCommerce shortcodes offer great control to store owners to dynamically display products, or add to cart buttons anywhere on the site. This is especially important because there might be several strategies that you want to experiment with on your store. Sometimes, you may have to place an add to cart button on a popular post, for the featured product. Rather than getting customers through the conventional sales channel, you will be able to experiment with different strategies to drive conversions.
WooCommerce shortcodes for pages
When you first installed WooCommerce, you might have noticed the onboarding wizard created a few pages such as cart, checkout, etc. If you open these pages, you can see there shortcodes automatically added to these pages. In fact, these shortcodes provide the functionality to these pages. If you don’t use the onboarding wizard, but later want to create these pages, you can simply add the respective shortcode to the page.
Now we will discuss some of the popular WooCommerce shortcodes that you can use on page on your online store at different scenarios.
[woocommerce_cart]
This shortcode makes your cart page functional. Basically, the cart page should be able to dynamically display the content that your customers add to their cart. It also acts as an interface for coupon codes and certain other elements of the cart page. This is a simple shortcode, which doesn’t have any option to add any conditions or parameters.
[woocommerce_checkout]
Checkout process is another essential aspect of a WooCommerce store. Your customers should be able to checkout smoothly from your site when they make a purchase on your store. This specific shortcode imparts its functionality to your checkout page. Just like the cart shortcode, this one too works simply, and does not offer an option to use selectively using different arguments.
[woocommerce_my_account]
My Account page is where your customers will be able to view their order details, modify shipping and billing addresses, etc. They will be also able to update their information on this page, such as name, email address, password, etc. This shortcode includes an argument, which helps to display the information of the current logged in user.
[woocommerce_order_tracking]
This shortcode offers an option to provide order tracking information to your customers. You can use it on an individual page, or combine with another shortcode to display the tracking form.
For example, you can add this shortcode on the My Account page, so that the tracking form is also available to customers.
Displaying products using shortcodes
WooCommerce store owners require to display at different locations on their site under different circumstances. In the earlier versions of WooCommerce, there were different shortcodes for different product grouping.
If you wanted to display all your featured products on a page, you had to use this shortcode – [featured_products]. Or, if you wanted to display products on sale, you had to use [sale_products].
Now, for all sort of product displays, you can use the shortcode [products], instead of using several different shortcodes. All you have to do is specify your required conditions for the display. Accordingly, WooCommerce will display your selected set of products on the page or post that you add the shortcode.
For example, to display featured products, now you can use the shortcode like this – [products featured].
Or, to display products on sale, you can use this shortcode – [products on_sale].
Different attributes you can use with Products shortcode
Now, let’s us take a look at all the available attributes that will help you display products selectively on your WooCommerce store.
Set a limit to the number of products
Using the ‘limit’ attribute, you can specify how many products you want to display using the shortcode. The default option will display all the products, and so does limit=”-1″. To display all products, you can simply add the shortcode [products] as well.
For example, you can limit the display of products like this: [products limit="6"]. The result will be as the below screenshot:
Changing the layout of product display
There are a few attributes that will help you modify the layout of the products. These are:
- columns
- paginate
- orderby
Let’s see how to use each.
columns
If you want to specify the number of columns in the display, you can do that. In the above example, if we add the ‘columns’ attribute and specify the number 6, all 6 products will be displayed in one column. That means, with the shortcode [products limit="6" columns="6"], the result will be as the below screenshot:
paginate
This attribute will help to divide the products into different pages. You can use this along with the limit attribute to specify how many products will be displayed in one page. Set paginate=”true” for it to work. So, for the shortcode [products limit="6" columns="6" paginate="true"], the result will be as the below screenshot:
Change the order of display
While using WooCommerce shortcodes, you can also change the display of products as well. There are a few different conditions that you can specify in conjunction with the ‘orderby’ attribute. They are:
- id – sorts the displayed products by product id.
- title – arrange products by their title. This is the default order of orderby attribute.
- popularity – creates an order of products based on the number of purchases that has been made on your store. The most popular one will be displayed first.
- date – You can also order products by the date they were published. By default, the oldest product will be displayed first.
- menu_order – If you have set menu orders, this attribute will order products based on that. The lowest number will be displayed first.
- rating – You can sort products based on their average rating value using this attribute.
- rand – This attribute will change the order of the products every time the page is reloaded. Please note this may not work on sites that have enabled caching, as a specific order of products is saved in such cases.
You can even use these options together by adding them with a space between each other.
For example, the shortcode [products limit="6" columns="6" orderby="popularity"] will give you the products in an order based on their popularity.
You can choose whether to sort products in a certain condition into ascending or descending by using another option along with orderby. This is ‘order’. So, while displaying products based on date, the oldest product will come first by default.
[products limit="6" columns="6" orderby="date"] gives you this:
You can change this and let the latest product to appear first in the list by using the below shortcode:
[products limit="6" columns="6" orderby="date" order="DESC"]
A few other product attributes
Now, let’s see a few more product attributes, which you can use along with [products] shortcode. You can display products based on these attributes on a page or post.
sku – Displays a list of products based on their SKU. You can separate SKUs by comma.
category – You can provide the slugs of categories to display products. If you want to include multiple categories separate the slugs by comma.
class – This one adds HTML wrapper class, which helps you modify the display using custom CSS.
on_sale – This will help you display all the products on your store that are on sale.
best_selling – You can list all your best selling products using this attribute.
top_rated – All your top rated articles will be displayed if you are using this attribute.
While using on_sale, best_selling and top_rated products, please note that you have to use them individually for it to work. Do not use three of these attributes in conjunction with each other.
Content product attributes
You can also use a set of content product attributes to retrieve products on a specific page or post. Now, let’s look into these options in more detail.
Attributes
You can retrieve products based on the available attributes or attribute terms. You can do this by including the slug of attributes, specifying the attribute terms, as well as combining different attributes and terms.
attribute – This will help to display products by mentioning the slugs of their attributes.
terms – Now, after specifying an attribute, you can also mention the attribute terms you want to include. You can specify multiple terms separated by comma.
terms_operator – This one will give you more control in displaying attribute terms. There are three operators as mentioned below:
- AND – This will display products from all of the chosen attributes.
- IN – Will display products with the chosen attribute.
- NOT IN – This will display products that are not in the chosen attributes.
So, for example, the shortcode [products columns="6" attribute="color" terms="red", "green" terms_operator="IN"] gives all the products on your store that has red and green variations.
On the other hand, the shortcode [products columns="6" attribute="color" terms="red", "green" terms_operator="NOT IN"], will exclude the products that has red and green variations and display the rest.
Visibility
Based on the visibility settings of your products, you can retrieve them on a page or post using shortcodes. You can choose several of the available options to get products this way. The attribute you can use in conjunction with [products] shortcode is ‘visibility’. The available options are as follows:
- visible – This will retrieve products that are visible on shop and search results. It is the default option when you are using the visibility attribute.
- catalog – Here you can retrieve products visible on shop page alone, and not on search results.
- search – This option will help you retrieve products that are visible only on search pages, and not on shop page.
- hidden – With this option, you can retrieve only products that can be accessed by a direct url. These products won’t be visible on your shop or search pages.
- featured – If you want to display all your products that are marked as featured, this is the option you should use.
For example, let’s see how to display all the featured products on your store. For this, you can use the shortcode [products columns="6" visibility="featured"]. Now, you can see all your featured products will be displayed on the desired page or post.
Categories
Same way we have seen with attributes, you will be able to display products based on their categories as well. You can specify the categories and then also specify a condition to display it according to your requirement.
The options and attributes you can use for this are as follows:
category – You can specify the category or categories, which you want to display.
cat_operator – This will provide you options to specify what combinations you need to apply in the product display option. The options area as follows:
- AND – This will display products that belong to all of the chosen categories.
- IN – Using this option, you can display products within the chosen categories.
- NOT IN – This will display products that are not part of the chosen categories.
How to display products selectively based on categories?
To explain the category options, let us take a sample scenario to understand the situation better.
If a product is part of two categories, and you specified both categories in the shortcode, and used AND operator, then only that product will be displayed. For example, we have the product Beanie is included in two categories – clothing and accessories. With the following shortcode, you can display only this product.
[products columns="6" category="clothing, accessories" cat_operator="AND"]
Now in the same scenario, if you use IN operator, all the products under either of these categories will show up. So with the shortcode [products columns=”6″ category=”clothing, accessories” cat_operator=”IN”], let’s see the result. All products on our store, which has either ‘clothing’ or ‘accessories’ category have shown up.
Based on product ID or SKU
You can also display products by product ID or SKU while using shortcodes. Here are the available options.
ids – You can specify the product IDs of the products you want to display. Multiple ids should be separated by commas.
How to find product IDs?
You can find the id of a product from your product listing page (WooCommerce > Products). Simply scroll over a product, and you can see the product id.
skus – With shortcode, you can also display products based on their skus. Simply specify the sku, while using this attribute in conjunction with products shortcode. When you are providing multiple skus, make sure to separate them by comma.
Product Category Shortcodes
When you want to display products from a particular category, there are a couple of options that you can use. These are:
[product_category] – This will display the products under the specified category.
[product_categories] – You can use this one to display all your product categories.
Combination scenarios
Now, let us look at a few combination scenarios, where we combine different attributes to display products selectively on a post or page.
1. Display 5 newest products, which is visible on shop as well as search pages.
For this, you can use the following short code:
[products limit="5" columns="5" orderby="date" order="DESC" visibility="visible"]
2. Display 4 newest products with blue, red and green as attribute terms.
To display this, we use the shortcode [products limit="4" columns="4" attribute="color" terms="blue, red, green" orderby="date"]. This will give you all the products that have variations of these colors, and sort them by the order of their publishing date.
Sorting products by custom meta fields
In order to display products sorted by custom meta fields, you can add the below code snippet recommended in WooCommerce documentation. Code snippets can be placed in the functions.php file of your theme folder.
add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby' );
function woocommerce_shortcode_products_orderby( $args )
{
$standard_array = array('menu_order','title','date','rand','id');
if( isset( $args['orderby'] ) && !in_array( $args['orderby'], $standard_array ) ) {
$args['meta_key'] = $args['orderby'];
$args['orderby'] = 'meta_value_num';
}
return $args;
}
You can read our article to understand how to update a code snippet on the theme folder.
Displaying an individual product page
You can also display individual product pages on a post or page using WooCommerce shortcodes. For this, you can make use of two attributes – product ID and SKU.
The shortcode for this is [product_page].
You can specify how you want to select by specifying the id or SKU of the product.
For example, you can display an individual page by using both the below shortcode:
[product_page id="243"] or [product_page sku="woo-hoodie"]
Related Products
There is a shortcode that will help you display related products as well. The shortcode for this is [related_products]. You can set a limit of how many products you want to display using the limit attribute.
For example, the shortcode to display three related products would be [related_products limit="3"]
Add to Cart button or url
You can also simply add the Add to Cart button and price of a product on a post or page using WooCommerce shortcodes. Again, this can be specified by product id or sku.
For example, if we want to display the above product’s price and Add to Cart button on a post or page, we will use the shortcode as below:
[add_to_cart sku="woo-hoodie"]
And the display will be:
If instead of an Add to Cart button, you are redirecting customers to another page using a url, then it can be retrieved using a shortcode as well. Here, to modify the appearance of the button and price, you may have to use some CSS codes as well.
For example, to retrieve the add to cart url on a page or post, you can use the below shortcode.
[add_to_cart_url id="256"]
The url that you have specified instead of Add to Cart button will be reflected on a page or post as the below screenshot:
Hope you got a good understanding of WooCommerce shortcodes and a few scenarios to use them. Please leave us a comment if you have any queries.
Further reading
