WooCommerce is a WordPress plugin that works to migrate a WordPress website into an e-commerce store. Where a plugin is an extension to your WordPress site to extend its functionality. For your knowledge, Shortcodes are not a WooCommerce feature, instead, they come with WordPress.
Fast forward, WooCommerce Shortcodes are those special functions/tags that allows the user to quickly and easily pull related bits of mentioned functionality into their content. Shortcodes lets you add different functionality to your pages, post, sidebar, widget, etc. without writing any code.
For example, at www.wpglobalsupport.com we have added a revolutioner slider by using a WooCommerce shortcode. As It includes shortcodes for everything and supports slider revolutioner to make awesome galleries. Not only this much, but it also provides you the parallax scrolling sections to an edgy looking background.
Using WooCommerce shortcodes users can make their e-commerce store amazing and give the burst sales to their visitors. Bending towards the point, we will show you what is WooCommerce shortcodes and how to add it? So, keep reading the article.
What is WooCommerce Product Shortcodes?
To put it briefly, Woocommerce shortcodes are small pieces of texts/codes written within square brackets. These codes are then placed in your Woocommerce pages and templates to show certain values from the database.
In other words, WooCommerce shop page shortcodes act like shortcuts that work for you to call a specific function in a post or page. This feature provides us an easy way to add special content almost anywhere on the website. It does not require so much of technical coding knowledge. Because of this, shortcodes are very popular and interesting to work on.
Let us consider an example, elaborated as follows;
Here, we will add a YouTube video to your page or post using a shortcode. You just have to add the mentioned below YouTube shortcode to their HTML of your page;
Thereafter, you can see, the YouTube video has added to your post or page which also helps your WooCommerce set up to look better.
As you know that WooCommerce shortcodes are very tiny code snippets. These code snippets allows you to add some interesting features to your online store or website. Basically you can add them to shop posts, pages, or widgetized areas on your website. widgetized areas are known as the sidebar.
However, some of the WooCommerce shortcodes are also support a few parameters. Thus you can use thos parameters to customize the output. Although not the every WooCommerce shortcodes can deliver the best user experience. Thesefore instead of pasting them as it is, you should think to use them alongside with the WooCommerce Quick View Pro plugin or the WooCommerce Product Table plugin.
For illustration, You should know that it is the only way to allow customers to choose quantities and variations outside of the product page, and it lets you show extra information about each product and control the image size. Besides that, if you need extra flexibility, then you can install WooCommerce Product Table and start experimenting with its 50+ shortcode options.
This will give you a more neat and organized look on the front-end while ensuring your site improves the customer’s shopping experience. To recap, WooCommerce shortcodes let you improve the buyer’s journey, see more products at once, and makes it easy for customers to quickly navigate through the checkout process.
You can also try out other WooCommerce shortcode plugins (like WooCommerce Coupon Shortcodes) that let you leverage advanced features like adding coupon codes to your online store.
How to use WooCommerce shortcodes?
Well, the word Shortcodes sounds or seems to be a little bit technical. But you should not worry at all, because these shortcodes are actually designed in such a manner that anyone can use them very easily. Even those who do not have any coding knowledge. Therefore you do not need to develop any coding skills for using these Shortcodes.
However, using these shortcodes on your site is very easy. Just simply insert any of the shortcodes that you want to use, into any text editor within WordPress. Also, you can insert them into a ‘Shortcode’ block if you are using the Gutenberg editor. And you can do so with a page builder such as Visual Composer or Elementor.
Besides that, you are able to combine any shortcodes and can display the multiple shortcodes on a single page. For illustration, you may combine the user account shortcode with the order tracking shortcode very easily. Well, for doing so, all you have to do is just insert both these shortcodes on the same page.
Types of WooCommerce shortcodes
Also, there are various types of WooCommerce cart shortcodes that can be increased the functionality of your WooCommerce store;
1. Simple shortcodes
As the name suggests, simple shortcodes are the simplest form of shortcodes. This form includes only a shortcode within square brackets. You can see the below screenshot as an example;
However, simple shortcodes can also be used to add an image gallery to a post or page. But, there is no way to specify which gallery to add.
2. Shortcodes with parameters
WooCommerce cart shortcodes can have parameters using that you can specify ‘settings’ for the function they are being used for. To sort the images within the gallery being embedded you can specify parameters.
[gallery order=”DESC” orderby=”post_date”]
See the mentioned above shortcode. It has the parameters named ‘order‘ and ‘orderby‘. ‘order‘ has ‘DESC‘ value and ‘orderby‘ has ‘post_date‘. Means, all the images within the gallery will be sorted in descending order according to the date they were posted.
3. Shortcodes with content
To add some additional functionality you can use shortcodes to ‘wrap’ around content. For example, using given below WooCommerce caption shortcode you can display a captioned image:
<img src=”www.wpglobalsupport.com/image.jpg/” />Content
With some parameters:
<img src=”www.wpglobalsupport.com/image.jpg/” />Content
How do WooCommerce shortcodes work?
Shortcodes in WooCommerce are just shortcuts to programmed functions, nothing else. They work to apply the functions while loading a web page.
Come to the main point of the article – No, doubt, a lot of WooCommerce shortcodes are available in the market to add different functionality to their different shop pages. But the question is how you can add them to your WooCommerce store pages. Let’s see;
How to add WooCommerce shop page shortcodes to Pages?
The task is quite easy, which means, you can manually add any shortcode to your WooCommerce page. But note that, you may use these shortcodes just to create e-commerce related pages.
Let’s see an example, here we will create a checkout page by using a simple shortcode.
To create a checkout page, very first, you need to create a new page that works as the template for our WooCommerce checkout page.
Further on – To create a new page, open your site dashboard and go to the Pages>>Add New. Here we name the title of the page – Checkout.
Thereafter, paste the illustrated below shortcode to the visual editor of the page. You can see the below screenshot.
Now, publish the page and view the checkout. Mind it, if you have an empty cart so your checkout page will also be empty.
Alternatively, you can add WooCommerce shortcodes, by using WooCommerce shortcodes plugin. This is one of the best options. Therefore, we recommend, install the WooCommerce shortcode plugin and add all the shortcodes to your post or page.
Further on this WooCommerce shortcode plugin comes with a dropdown button in which all shortcodes are included. Use according to their needs. You don’t need to remember a single shortcode and their parameters.
Hence, open your dashboard and go to the Plugin>>Add New, here search the plugin ‘WooCommerce shortcodes by WooTheme’, next, install & activate it.
After the activation process, in the WordPress text editor, you will see a tiny dropdown button.
Now you have successfully added a plugin on your store. You can add any shortcodes as per your requirements.
Coming back to the point, let’s begin with WooCommerce Shortcodes and their usage.
For your knowledge, WooCommerce creates a cart page to boost its shopping cart functionality.
WooCommerce cart shortcode is used on the cart page that displays the cart content such as item details, shipping, taxes, etc. Not only this but, it also shows the interface for coupon codes and some other cart-related features.
Arguments: There is no one parameter or argument available for this shortcodes.
[Image source File: www.cloudways.com]
The WooCommerce checkout page gives the checkout functionality to your customers.
This particular shortcode is used for displaying the checkout process on the checkout page of your online store.
In other words, we can say, WooCommerce checkout shortcode display all the checkout information – which a user collects during checkout like shipping info, billing info, payment method, etc. For this shortcode using the Full-Width page template.
Arguments: This shortcode does not accept any parameter.
3. Order Tracking Form
WooCommerce order tracking shortcode is used to display the Order Tracking page. It also allows users to check the status of an order by entering the required details like order id, billing email, etc.
The best tweet about page shortcodes is – you can combine them to create a better page for the visitors of your WooCommerce store.
Let’s consider with the help of an example;
To combine My Account shortcode with Order Tracking shortcode will provide a better user experience. Doing this users can check their order status and history of an order from the same page.
Additionally, this order tracking form page is not created by default. This is an optional, according to requirements you can create manually that allows users to check the status of an order. However, the customer will have to enter their order details in order tracking form to check the order status.
Argument: It does not accept any argument/parameter.
Tip: Use the full-width page or Shop Sidebar template with this shortcode.
4. My Account
WooCommerce My Account shortcode displays ‘my account’ section featuring options for the customer to view its placed orders or update any of its personal information such as shipping info, billing info, and account password from the My Account page. The number of orders can be specified manually.
Note that, with each & every page you can use combined shortcodes. For instance, you can combine a form page with Order Tracking [woocommerce_order_tracking] and My Account [woocommerce_my_account] on one page.
Argument: This WooCommerce shortcode accepts parameter;
array( 'current_user' => '' )
|Current user argument is automatically set using get_user_by( ‘id’, get_current_user_id() ).|
Tip: By default, it’s set to 15 (use -1 to display all orders.)
Some Special WooCommerce Pages
Listed below shortcodes can be used to create custom shop pages such as featured products, top-rated products, best selling products, etc.
5. WooCommerce cart/Product price shortcode
Shortcode: [add_to_cart id=”19”]
WooCommerce cart and product price shortcode used to display the picture and prices of a product with ‘Add to Cart button‘. Using this shortcode the product has to be specified by its own ID and SKU.
Further on, as you will press the Cart/Price button, you have to enter your product ID and SKU. Once you entered, it will generate the shortcode as we have shown above – [add_to_cart id=”19″ sku=”19″].
Let’s see an example;
Here in this example, we are adding a new page and shortcode for cart/price button. See the below screenshot;
Thereafter, as you click on the price/cart, you will see a pop-up on your screen, now add your ID that you want to display.
Now press the Ok button, thereafter, it will generate a shortcode as shown in below screenshot;
Now press the publish button, thereafter, you will be able to see that your shortcode is successfully generated. See the below screenshot;
Now come back to the point!
6. Multiple Product shortcode
Shortcode: [products ids=”1, 2, 3, 4, 5″]
Using the above shortcode, you can also add multiple products similar to the previous example we have mentioned above. With this shortcode, you can also use the given below parameters or arguments;
order=” “, columns=” “, orderby=” “
[product ids=”1,2,3″ orderby=”date” columns=”3″ order=”desc”] – this given shortcode provides output six product in 3 columns that will be ordered by date in descending order. Note that you also use a title for ordering and “ASC” for ascending.
7. Product Category
Shortcode: [product_category category=”one”]
The product categories shortcode is used for the categories section and lets you add product category loop and output. Means to say, using the WooCommerce product category shortcode you can add product categories loop and output.
Listed below are some attributes to this shortcode which you can apply;
- ‘number’ => ’null’, – shortcode used to show the number of categories.
- ‘orderby’ => ‘name’, – use this shortcode to display the order, whereas name and date are both valid options.
- ‘order’ => ‘ASC’, – use this shortcode to represent how product categories are ordered, “ASC” or “DESC”.
- ‘columns’ => ‘4’, – use this shortcode to represent the number of columns in which categories are organized.
- ‘hide_empty’ => ‘1’, – use this shortcode to represent SET to 1 to HIDE categories with no products to show.
- ‘parent’ => ‘’, – use this shortcode to represent SET to 0 for showing only top-level categories.
- ‘ids’ => ‘’, – use this shortcode to represent that IDs can be set to only output specified results.
8. Product categories by slug
Shortcode: [product_category category=”” per_page=”16″ columns=”3″ orderby=”date” order=”desc”].
Product categories by slug is the same as the product categories that we have mentioned above, just the difference is – It lets you add all your products within the defined category. Further on with this shortcode, you can also be adjusted with per_page=”” and columns=”” parameters.
9. Featured product
Shortcode: [featured_products per_page=”14″ columns=”6″ orderby=”date” order=”ASC”]
WooCommerce featured product shortcode is used to add your favorite product in your webpage. Just you will have to open your dashboard and go to Product>>Products, thereafter you will see a given below icon;
Now, press the icon button if you want to add featured products. See the screenshot we have mentioned below:
Now this will look like this;
10. Recent Products
Shortcode: [recent_product per_page=”15” columns=”3”]
WooCommerce recent product shortcode is used to display the products that you have recently added.
Although the shop page template does this by default, if you want a specially formatted different landing page which sets apart from the main shop index, you can definitely use this shortcode.
Further, you can also add the shortcode to your post or page in case you want to see the result after.
Tip: Use full-width page or Shop Sidebar template with this shortcode.
Note: The ‘per_page’ attribute means how many products you want to show on the page and the same goes for the columns attribute deciding in how many columns should the products be listed. And this may vary from person to person according to their personal choices.
11. Best Selling Products
Well, you can use the given below WooCommerce shortcode. This code will let you display your all-time best selling products within a grid:
Shortcode: [best_selling_products per_page=”14″ columns=”6″ orderby=”date” order=”ASC”]
WooCommerce best selling product shortcode, because it can displays the list of best selling products of your WooCommerce store. You can also customize product limits and columns.
Tip: Use the full-width page or Shop Sidebar template with this shortcode.
However, the quick view buttons will display on the front-end of your site, if you have installed the WooCommerce Quick View Pro plugin to your WordPress site. Besides that, if you want a table layout, then you can also list the bestselling or popular products of your site with the WooCommerce Product Table shortcode as given below:
[product_table sort_by=”popularity” sort_order=”desc” product_limit=5]
12. Top-Rated Products
Shortcode: [top_rated_products per_page=”14″ columns=”6″ orderby=”date” order=”ASC”].
Using this shortcode, you can enable the list of top-rated products for the customers to go through other quality stuff.
Further on this shortcode may be more helpful to show your best product if you use to review and rating – an inbuilt feature of WooCommerce.
Tip: Use the full-width page or Shop Sidebar template with this shortcode.
13. Related Product
Shortcode: [related_products per_page=”14″].
As the name suggests, WooCommerce related product shortcode used to display you all the similar product lists.
14. Sale product
Shortcode: [sale_products per_page=”14″ columns=”6″ orderby=”date” order=”ASC”]
Using this shortcode you can add products currently on sale.
15. Add to Cart
WooCommerce Add to cart shortcode display you the price and add to cart button of a single product by ID. Illustrated below the add to cart shortcode;
‘id’ => ’99’,
‘style’ => ‘border:4px solid #ccc; padding: 12px;’,
‘sku’ => ‘FOO’
‘style’ => ‘TRUE’
‘class’ => ‘CSS-CLASS’
Well, you may think adding this to a widgetized area on your blog post or on the online store. Although this shortcode is work with the Quick View Pro plugin of WooCommerce. Therefore when you use both these plugins together, then the quick view buttons will be shown alongside with the add to cart buttons.
However, this is best if you are showcasing the variable products on your store. Also, if you like to let customers to be able to change the quantity of product before adding it to the cart. Then customers can view some extra information about the product. Hence they can choose the quantities and variations of the product.
Also, they can add product to the cart from a quick view lightbox. However, this will keep them on the original page instead of taking them to a separate product page. Although if you like to show add to cart buttons for multiple products. And if you do not like the default format with the large image. In that case you can use the WooCommerce Product Table preferably.
In addition, you can choose which columns you wish to add into the product table. But, you have to make sure you include the add-to-cart column. And the you can use the [product_table] shortcode to insert it anywhere you want. Also, you can use the include option to choose which products to include, for example:
16. Add to cart URL
Shortcode: [add_to_cart_url id=”70”] – This shortcode also enables us to show the URL on the add to cart button of a single product. You can also specify the product by ID. See the below screenshot;
‘id’ => ’99’,
‘sku’ => ‘FOO’
17. Order Tracking
You will get an order tracking id in the confirmation email and on the receipt you receive.
18. Coupon Shortcodes
There are many plugins available for coupon shortcodes which can influence the customers for better sales results.
These are very customizable as they provide a set of conditional shortcodes, in which you can set options as you want. It also helps in displaying the based on coupons’ availability.
You can also choose whether the customer wants to select a coupon or not, it simplifies this by allowing display specific content. And the same way you can also display the content based on the validity of the coupon.
Some available shortcodes are – [coupon_is_applied], [coupon_is_not_applied], [coupon_is_valid], [coupon_is_not_applied].
To add some other information to coupon codes use these shortcodes like [coupon_code], [coupon_description] and [coupon_discount].
19. Product search field shortcode
By using the search field shortcode, you can insert live search and live filtering facilities to your post and page.
20. Live Product Filter Shortcodes
There is the option of ‘filtration’. By using the given below shortcode you can also customize;
[woocommerce_product_filter] – allow you to show a live Product Search Filter.
[woocommerce_product_filter] – this will show you a live Product Attribute Filter.
[woocommerce_product_filter_category] – this enables you to show a live Product Category Filter.
[woocommerce_product_filter_price] – this enables you to show a live Product Price Filter.
[woocommerce_product_filter_tag] – it displays you a live Product Tag Filter.
21. Troubleshooting Shortcodes
In case the display looks incorrect instead of correctly posting your shortcodes, make sure that you did not embed the shortcode between <pre> tags.
This is a common issue, to remove these tags, edit the page, and click the Text tab as shown in the image above.
22. Quick view shortcode
Well, the shortcode of [products] works so well with the Quick View Pro plugin of WooCommerce. In addition, this can let you add a quick view button to the list of products. Therefore it is a quick way that allows people to make their purchase of products without leaving the current page. Also, to do so, all you need to do is just install the Quick View Pro plugin of WooCommerce to your WordPress website.
Also, this will add a quick view button to the front-end of your site automatically. Although with the help of these customers are able to see the product attributes and variations. Such as the images, colors, icons, swatches and text labels. Where the customers can choose the product attributes in variable products. Additionally, they can add the products to the cart even without navigating to the single product page.
23. Product table Shortcode
Although this WooCommerce products shortcode is built-in and very much flexible. However, this shortcode allows you to display them only in a grid layout. But that is not ideal for such stores where you want to show more products per page. For instance, if you want to create a quick one-page order form or a wholesale store. In such a case, you should better use off with the product table shortcode.
Although the WooCommerce itself does not have a product table shortcode. But, you are able to add a product table very easily with the help of the WooCommerce Product Table plugin. However, the basic shortcode is [product_table] and you are able to configure this using more than 50 shortcode options.
24. WooCommerce shopping cart
Basically, you are able to display the customer’s shopping cart on your WordPress website’s front end with the help of a shortcode that used for the WooCommerce shopping cart. Therefore you can add this shortcode to WordPress posts OR pages. Also, you can display this in the widgetized areas such as the sidebar.
shortcode – [woocommerce_cart]
Although WooCommerce automatically creates some pages on your website for you when you install it and activate it to your WordPress website. Such as it includes the Cart page, which uses this shortcode. However, you can use this shortcode to add the cart to additional parts of your site.
25. WooCommerce user account page
Although WooCommerce can create the My Account page automatically for you when you install the WooCommerce for the very first time on your website. This is done using the sortcode for it. In addition, you are able to use the shortcode to insert the account area into the some additional locations throughout your website.
However, the shortcode for My Account can double as a login and registration form for such users who are logged out currently. As a result, you are also able to use this as a WooCommerce login shortcode.
26. Product list shortcodes
Well, if you want to list all the products of your online store in some different ways to make your store more attractive. Then there are also some shortcodes for that. These shortcodes can add extra flexibility, so you are not stuck with those restricted views. That you get on the shop and category pages.
Besides that, you can also use WooCommerce shortcodes to list one or more products. You can add them anywhere on your WordPress website, either in a grid or table-based list view. WooCommerce has such a shortcode that allows you to list specific products in a grid layout as shown below:
You can also add other parameters to it such as order by and columns to customize the front-end appearance. You can choose the number of products to list per row. For instance, if you wanted to display six products in three columns ordered by date in ascending order, you would use the following:
shortcode: [products ids=”83,68,70,66,64,62″ orderby=”date” columns=”3″ order=”ASC”]
Similarly, for displaying products in descending order, you would simply replace ASC with DESC.
Add WooCommerce shortcodes with the toolbar button
Although you can add the WooCommerce shortcodes very easily with the help of a toolbar button. However, when you are able to find all kinds of WooCommerce shortcode plugins on the web. Then also we recommend you use those WooCommerce Shortcodes plugin which is freely available by the WooThemes.
In this main reason to make the WooCommerce’s best. Finally, one of the best reason for WooCommerce being perfect for startup of e-commerce is because of WooThemes themselves.
WooTheme has been around for a while, producing stellar WordPress theme, extensions, and plugin, including WooCommerce. They have a wonderful track record of being reliable and professional with both the support system and their product. WooTheme users can take the profit from our guide wpglobalsupport.com.
In addition, when you installed it and activated this plugin. After that, it can add a TinyMCE drop-down button to the WordPress text editor. Basically it can give you access to all the built-in WooCommerce shortcodes. Therefore it can save you time if you copy and paste the shortcodes.
However, after you activate the Shortcodes plugin of WooCommerce. Therefore you will see a new shortcode button within your WordPress text editor. After that when you click on this button, then a drop-down list will show which contains all the standard WooCommerce shortcodes.
How to show shortcodes within shortcodes?
Well, it is very necessory sometimes, or you may also want to nest the one shortcodes within the other shortcode. Also, we can say that shortcode within shortcode. For instance, when you add the WordPress audio player shortcode, so that it can add an embedded music player to the list of products automatically
But basically you can not nest the WooCommerce shortcodes within another shorcode normally. However, you are able to do this just by using the Product Table shortcode of WooCommerce to list all the products. After that you can add the other shortcodes to the fields that you are showcasing within the product table.
For illustration, now let us suppose that you need to list the 8 products, and also with an embedded audio player for each one of the product. Therefore you can now add the audio player to the product short. Also, you can use the long description fields and display all these as the columns in the table.
After that, you can use the WooCommerce Product Table shortcode to list all those specific products. Also, including the long or short description column which contains the audio players itself.
WooCommerce shortcodes Troubleshooting
Well, sometimes it happens that when you copy and paste the correct WooCommerce shortcode into the text editor. But that shortcode does not show the output the same as you want. So to overcome this problem in this case, you should check out to make sure that you did not embed the shortcode within the “pre” tags accidentally. Therefore you can remove these tags by going into the HTML text editor. As HTML editor allows you to write your posts in HTML. When you want to add a shortcode, add some font style, or paste in the code from an outside source, you can use the HTML editor.
So that was all about shortcodes, a great way to enhance your online store with these easily structured ShortCodes. In starting you may feel a bit of complication in using but later on it will become interesting and will be helpful for your shop.
With this goodbye for now! Hope this article has helped you in understanding Shortcodes in Woocommerce and its usage.
If you are still facing problem then you also have another option of getting help from our WooCommerce Support Team. Without any wastage of your precious time, you will get the best support by our WordPress Experts. Dial +1-855-945-3219 (Toll-Free).