Learning WooCommerce shortcodes can be an efficient way to customize a compelling and informative sales page. These pre-built shortcodes help to make proper utilization of the WooCommerce functionalities. So, you will end up with an interactive and profitable e-commerce site.
WooCommerce shortcodes are built-in with the WooCommerce plugin. By adding them, you can make an intuitive showcasing of products anywhere on the website like showing them in a table or slider. And, other useful pages such as a cart, checkout, My Account, etc.
In this article, we’ll take a look at WooCommerce shortcodes, their best usage, and some tips for implementing them into your overall e-commerce strategy.
What Are WooCommerce Shortcodes And How Is It Useful?
Probably, most of us are familiar with using shortcodes in WordPress. It appears as a short piece of text between two square brackets [shortcode].
You may or may not have the practical experience in setting up a shortcode to perform a specific action.
Either way, we are covering from a deeper level to better understand WooCommerce shortcodes.
At its core WooCommerce shortcodes help you for two main reasons:
First, WooCommerce shortcodes perform some kind of effective actions on your e-commerce websites. For example, let your customers track their orders.
Second, store owners can optimize their WooCommerce stores by showing product-related content with versatile presentation styles. Such as, displaying top-rated or best-selling products.
In addition,WooCommerce shortcodes are useful due to several beneficial effects:
- Get complete action by adding a little chunk of code.
- No coding knowledge is required other than doing simple copy and paste.
- Modification of the code is easy by altering the parameters.
- Add it anywhere on the website according to your requirements.
- Show & hide products with specific categories and events.
- Define displayed product number and order.
- Save your time by doing multiple transactions simultaneously.
Even, some more key benefits like, utilizing your visitor’s interest by showing them some related products. Thus, your overall sales amount increases.
So, you will definitely want to use them. But first, let’s see how does WooCommerce shortcodes work.
How Does WooCommerce Shortcode Work?
Once you install the plugin, it generates a range of pages by default. These pages also contain shortcodes.
The basic function of a shortcode is a single word or multiple words connected with (_) underscores between two brackets. Based on functionality, this shortcode also comes in two parts.
- The body part.
- The parameter part.
The first one is called the body part or primary part. It is basically the main part of shortcodes. It generally refers to what kind of action will be taken with this shortcode. And, you can also do some action properly with this type of shortcode. For example,
The second one is the parameter part. Your action will be more specific by adding extra lines of parameters. For instance, you can limit the number of products displayed by using a parameter called limit.
See the shortcode example below:
Here, limit=6 refers that only 6 products being displayed.
By now, you have a basic understanding of shortcodes. As we will continue to our WooCommerce shortcode list, you will need this knowledge.
Let’s see some of the main WooCommerce shortcodes types:
- WooCommerce My Account
- WooCommerce Cart
- WooCommerce Checkout
- WooCommerce Order Tracking
To speed up your WooCommerce setup, we will give a detailed look at the best way to function these shortcodes.
WooCommerce Shortcodes List
1. My Account Page Shortcode
This shortcode is for your logged-in users. Once they are logged in they will find their own details. Even the non-logged-in users will see a prompt to log in or sign up. Remember that this shortcode doesn’t come with a ready-made page. So, you have to set it up on your own.
2. WooCommerce Cart Page Shortcode
This shortcode will display the customer’s shopping cart content and other functionalities on the WordPress website’s front end. It shows all products that have been added to the cart.
3. WooCommerce Checkout Shortcode
After adding products to the cart, customers should proceed to the checkout option. This shortcode demonstrates the checkout page. Where customers complete their purchase process.
4. WooCommerce Order Tracking Shortcode
This shortcode creates an “order tracking” form page. Shoppers use this page to track their own orders by entering their details like order ID and billing email. And, customers don’t need to logged-in to check their order status.
5. WooCommerce Products Shortcode
The [products] shortcode is a very powerful shortcode to display the inventory items. Even, you will have full control of the store’s frontend showcase. This is done using a range of shortcode parameters.
Depending on the shortcode, you can exhibit featured products, recent products, best-selling items, discounted or any specific category’s products, a CTA button, and many other actions. on your WooCommerce store.
Inside the [products] shortcode, include the parameter’s name. Afterward, add an equal sign followed by the parameter’s value. Do note that the parameter’s value must be written between quotation marks.
Let’s see an example of a product shortcode with different parameters,
[products limit=”6” columns=”2” category=”shoes”]
Here is the breakdown of this code:
- “6” refers to the total number of products to display.
- “2” refers to the number of columns in the shown layout.
- “shoes” refers to the category of the products.
Down the list below, we will explore the potential of [products] shortcode while combining it with different attributes and arguments.
Define the number of listed products to display on a page. The default (-1) attributes show all products.
Determine the column number of the shop’s page. The default number is set to 4. However, the column number will change regarding small-screen devices.
Turn the pagination on by setting this attribute to true. By default, this attribute is false. Paginate parameter should be used with the conjunction of the limit parameter.
This parameter is used for ordering products with various options. The product’s title is the default order system. Further, multiple slugs or options can be entered by giving a single space between two words.
Look up the below orderby choices for arranging your products:
- date – Group your products through the publishing date.
- id – Sorting products with the post ID of the product.
- menu_order – Set your product through Menu Order. (lower number displayed first)
- popularity – Shows products according to the number of purchases.
- rating – Organize products based on average rating in the order of higher to lower.
- rand – Random ordering of products. (NB: Sometimes, doesn’t work due to the caching plugin)
- title – As we already have said it’s the default orderby parameter.
This parameter works for the prior orderby setting. Products are arranged in ascending (ASC) or descending (DESC) order. The default order type is ASC.
Stock Keeping Unit or SKU is useful on the occasion of selling your products wholesale. This parameter helps to generate SKUs for your products. And, it helps for a faster process and avoids logistic issues.
[products skus=”t-shirt-white-small, t-shirt-white-medium”]
Differentiate products with a specific tag. Apply multiple tags with a comma between them.
[products tag=”blue, summer”]
This parameter works by adding an HTML wrapper class to the element, so you can style it with CSS.
With this parameter, you can identify the products as on sale. The attributes are true and false. Be aware, don’t make a conjunction of this parameter with top_rated or best_selling.
This parameter shows your best-selling products. Attributes (true & false) are the same as the previous parameter. Also, follow the same rule of avoiding making conjunction with on_sale and top_rated.
Add this parameter for displaying your top-rated products. Likewise above two parameters, options are available as true and false. And, don’t use it simultaneously with on_sale and best_selling.
Want some more parameters to display products specifically? Some parameters or attributes are common on multiple products. Such as size or color.
Shows products with a specific attribute slug.
Used with the conjunction of the previous attribute parameter. It shows attributes more in detail. For instance, if your attribute is “Size” then it will have terms like small, medium, or large.
This parameter helps to figure out which terms will be included by doing basic calculations. It should work with attribute and terms parameters.
- AND: Show products with all of the attributes listed.
- IN: It is the default one and will show the selected terms.
- NOT IN: Will display items that aren’t in the selected terms (i.e. all of those other than the ones you select)
[products columns=”6″ attribute=”colors” terms=”red” terms_operator=”NOT IN”]
Do the same as the term_operator above. The difference is the “tags” parameter.
- AND: Show products with all of the tags listed.
- IN: It is the default one. Will show items with the selected tags.
- NOT IN: Will display items that aren’t in the selected tags (i.e. all of those other than the ones you select)
Does the same as terms_operator and tag_operator. But for categories, here cat stands for the category. You can figure out which terms will be included by doing basic calculations.
- AND: Show the product in all of the chosen categories.
- IN: Shows products in the selected category/categories.
- NOT IN: Shows products that are not in the selected category
[products limit=”9″ columns=”3″ category=”lather, jackets” cat_operator=”AND”]
Define the display of products according to selected visibility. Available options:
- Visible: Products will be visible on both shop and search results. And, this is set by default.
- Catalog: This makes products visible in the shop only. Not in the search results.
- Search: It works opposite to the previous one, products are visible in search results but not in the shop.
- Hidden: It displays products only through a direct URL. But, hidden from both search results and shop.
- Featured: It shows products that are marked as featured.
[products limit=”9″ columns=”3″ visibility=”catalog”]
The following two shortcodes come under the product categories. The good thing is that these shortcodes are available with robust customization options.
This shortcode allows you to display all the product categories without any parameters. You can use more than one category as well.
The category is a basic shortcode for displaying products with a specific category slug. You can also add multiple categories by adding a comma between them. Here, to make your product visible, you should use a specific parameter.
Below are the available Product_Category parameters to use:
Show specific categories according to a comma-separated list of post ids.
[products _categories ids=”1,2”]
Define the number of columns. The default is set as “4”
[products _categories columns=”6”]
Define the number of categories that will be shown.
[products _categories limit=”6”]
Operates the products ordering by categories. The default ordering method is the product name. You can also set it to slug, id, or menu_order.
[products _categories orderby=”id”]
Connected with the prior orderby parameter. Products are arranged in ascending (ASC) or descending (DESC) order. The default order type is ASC.
[products _categories order=”ASC”]
This parameter hides all the empty categories. There are two available options: “1” and “0”. The default is set to “1”. The default “1” hides empty categories. Whereas, “0” will show them.
[products _categories hide_empty=”1”]
This parameter shows the child categories of a specific parent category, which has been identified by id. For instance, [parent=”3″] will show the category’s child categories with the id 3.
If you set parent to “0”, only the top-level categories will be displayed.
[products _categories parent=”0”]
6. Place Add to Cart Button For Specific Product
Use this shortcode for generating an Add to Cart button for a particular product. id is the required parameter for this shortcode.
7. Add To Cart URL
With this shortcode, you can display the actual URL of a specific product. Only two parameters are applicable for this shortcode. Which are:
- id: Choose the product by ID
- sku: Choose the product by SKU
8. WooCommerce Messages on Non-WooCommerce Pages
This shortcode is for displaying WooCommerce messages on non-WooCommerce pages. For example, you can display WooCommerce notifications like “The product has been added to cart” on your website’s ordinary pages.
Another thing to note, according to your purpose, you will add another shortcode along with it. Like taking the above example in consideration, the [shop_messages] code will only show the carted product if you add the [add_to_cart] shortcode.
Some More Useful WooCommerce Shortcodes
Let’s know other useful WooCommerce shortcodes for helping you customize the eCommerce store.
- [woocommerce_product_search] — Show a product search field anywhere on your site to let customers type and search.
- [woocommerce_product_filter] — Add a live Product Search Filter.
- [woocommerce_product_filter_attribute] — Display a live Product Attribute Filter. Such as Color, Size, and Brand.
- [woocommerce_product_filter_category] — For displaying a live Product Filter for Category.
- [woocommerce_product_filter_price] — To show a live Product Filter for Price.
- [woocommerce_product_filter_tag] — For showing a live Product Filter for Tag.
- [woocommerce_product_filter_rating] – To display a live Product Filter for Rating.
- [woocommerce_product_filter_sale] – For filtering On Sale products.
- [woocommerce_product_filter_stock] – Filters products that are available in stock.
- [woocommerce_product_filter_reset] – Add a button to disable all live filters.
How to Use WooCommerce Shortcodes?
In this part, we will learn to use WooCommerce shortcodes. As a WordPress user, you may not have any expertise in coding skills. And, you also don’t need any.
Using Classic Editor
If you are using the shortcode in the WordPress classic editor, all you need to do is, insert it. Do note that it must come between the square brackets.
Using Gutenberg Block Editor
When using the Gutenberg editor, click the (+) icon to add a new block. Then using the search bar, browse for the shortcode block. Once you see it, just select it and add your shortcode in the field. Don’t forget to save the page.
Now, if you are one of our regular readers of Divi related blogs, you can learn how to use shortcode in Divi.
Further, you can use multiple shortcodes in a single page. This works through conjunction of a shortcode with other shortcodes. For example, you can set up a form page with a code like [woocommerce_my_account] and [woocommerce_order_tracking].
As you saw, this WooCommerce shortcodes list is really helpful. Thus, we have emphasized on its complete breakdown including how WooCommerce shortcodes work and how to use them.
Altogether, these shortcodes can really improve every step of your buyer’s journey. And, helps to boost your revenue.
So, you must want to utilize these WooCommerce shortcodes. Share with us, which of these shortcodes you are going to implement for e-commerce sites.
If there are any issues you have come across while using these WooCommerce shortcodes, just let us know in the comment below. We have a dedicated and experienced WordPress development team.