{"id":35547,"date":"2022-03-15T15:00:18","date_gmt":"2022-03-15T14:00:18","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=35547"},"modified":"2022-03-14T17:01:07","modified_gmt":"2022-03-14T16:01:07","slug":"ultimate-guide-to-woocommerce-shortcodes","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/ultimate-guide-to-woocommerce-shortcodes\/","title":{"rendered":"The Ultimate Guide to the Most Useful WooCommerce Shortcodes"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Before the <a href=\"https:\/\/qodeinteractive.com\/magazine\/introduction-to-wordpress-gutenberg-block-editor\/\">introduction of the Gutenberg block editor<\/a>, shortcodes were considered an integral part of WordPress when it comes to efficiently displaying both static and dynamic content on your site. And while it\u2019s true that Gutenberg was created to make the entire page editing process easier for users not willing to learn how to use shortcodes (among other things), many WordPress plugins and themes still come packed with ready-made shortcodes that can be used to insert specific functions into pages. There\u2019s even a shortcode Gutenberg block you can use to easily insert shortcodes to pages and posts with the new editor, which is only further proof that these small pieces of code remain very much relevant and will continue to be used to contribute to the platform\u2019s overall functionality. And the same goes for one of the most popular and all-encompassing <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-wordpress-ecommerce-plugins\/\">eCommerce plugins<\/a> on the web \u2013 WooCommerce. Some of the most vital WooCommerce pages such as Products, Checkout, and Cart are all built with the help of shortcodes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To help you truly <a href=\"https:\/\/qodeinteractive.com\/magazine\/woocommerce-tutorial\/\">learn all there is to know about WooCommerce<\/a>, we\u2019ve decided to <strong>share some of the most useful WooCommerce shortcodes available<\/strong>. There are so many possible shortcode combinations and parameters, and you will be able to use them to build the most unique custom pages and make your WooCommerce-powered store truly stand out among the rest. We are also going to explain <a href=\"https:\/\/qodeinteractive.com\/magazine\/what-are-wordpress-shortcodes\/\">what shortcodes are<\/a> in general, as well as what makes WooCommerce shortcodes useful in particular, so make sure to stick around:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-shortcodes\">What Are Shortcodes?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-are-woocommerce-shortcodes-useful\">How Are WooCommerce Shortcodes Useful?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-woocommerce-shortcodes-in-wordpress\">How to Add WooCommerce Shortcodes in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#some-of-the-most-useful-woocommerce-shortcodes\">Some of the Most Useful WooCommerce Shortcodes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-ecommerce-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-shortcodes\"><\/a>What Are Shortcodes?<\/h2>\n<p>[\/vc_column_text][vc_column_text]As their name suggests, shortcodes represent <strong>condensed pieces of code whose main role is to carry out a particular function<\/strong> on a WordPress site. Depending on their purpose, these shortcodes can help you create anything from a full-blown image gallery to custom product categories.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the shortcode structure, it almost always looks the same in the backend \u2013 you will be able to recognize it as a word in brackets:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[shortcode]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text] In most cases, it will be located within a shortcode block.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If a shortcode consists of more than one word, then these words will usually be connected with underscores. Like this:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[shortcode_phrase]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, shortcodes can also consist of extra parameters that can be used to customize a particular shortcode even further (more on this later). Here\u2019s what the structure of a shortcode with two parameters can look like:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[shortcode parameter1=\"x\" parameter2 =\"y\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-are-woocommerce-shortcodes-useful\"><\/a>How Are WooCommerce Shortcodes Useful?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, WooCommerce shortcodes are still those same short pieces of code that appear in brackets on your website\u2019s backend, but they\u2019re specifically made for the purposes of adding more functionality to the <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce plugin<\/a>. By default, once you install WooCommerce for the first time, the plugin will automatically create several different pages on your site. Every one of these pages actually consists of different shortcodes that load various pieces of content. For example, the shortcode named [woocommerce_checkout] will display the Checkout page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/WooCommerce-Checkout-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"WooCommerce Checkout Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/WooCommerce-Checkout-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/WooCommerce-Checkout-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/WooCommerce-Checkout-Shortcode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/WooCommerce-Checkout-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, we\u2019ve already mentioned that shortcodes are used to add specific functionality to your site, but the main appeal of shortcodes lies in the fact that they allow for plenty of customization. Many of the available WooCommerce shortcodes actually come with <strong>the ability to add various parameters and modify some of the shortcode qualities<\/strong>. This will allow you to <strong>create a fully functional and unique-looking eCommerce site<\/strong> that will grab the attention of the right customers.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, you can adjust the way specific products (or product categories) are displayed on your product page by setting a specific number of columns for them to appear in, you can choose whether you\u2019d like to sort your products by price, color, publishing date, etc. And the best thing about all this is that you don\u2019t need to know any coding to customize your WooCommerce store using shortcodes. All of it can be easily done using the right shortcode parameters.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-woocommerce-shortcodes-in-wordpress\"><\/a>How to Add WooCommerce Shortcodes in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]Essentially, the process for adding WooCommerce shortcodes in WordPress is the same as for any other WordPress shortcode. You simply need to head to your page or post and hit the (+) sign. Then, insert \u201cshortcode\u201d into a search bar and add a <em>Shortcode<\/em> block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Shortcode-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add Shortcode Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Shortcode-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Shortcode-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Shortcode-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Shortcode-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From then on, you simply need to add your shortcode into the shortcode field.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Shortcode-Field.jpg\" class=\"attachment-full size-full\" alt=\"Shortcode Field\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Shortcode-Field.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Shortcode-Field-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Shortcode-Field-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Shortcode-Field-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And if you\u2019re using the Classic editor, you can simply insert your shortcode into the <em>Visual<\/em> part of the editor. Like this:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/WooCommerce-Checkout-Classic-Editor.jpg\" class=\"attachment-full size-full\" alt=\"WooCommerce Checkout Classic Editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/WooCommerce-Checkout-Classic-Editor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/WooCommerce-Checkout-Classic-Editor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/WooCommerce-Checkout-Classic-Editor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/WooCommerce-Checkout-Classic-Editor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will be able to see what your shortcode looks like on the frontend once you preview your page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want to <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-shortcode-to-wordpress-widget\/\">add shortcodes using WordPress widgets<\/a>, you can do this by going to <em>Appearance &gt;&gt; Widgets<\/em> and then using the shortcode block.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We suggest that you check out our article on the same subject for more info.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"some-of-the-most-useful-woocommerce-shortcodes\"><\/a>Some of the Most Useful WooCommerce Shortcodes<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now that we\u2019ve explained what WooCommerce shortcodes are and how they work, it\u2019s finally time to present you with a list of some of the most useful WooCommerce shortcodes available as well as some of their most notable parameters. Many of these shortcodes may prove to be quite useful during the customization of your own WooCommerce store, so make sure to check them out:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>[woocommerce_my_account]<\/strong> \u2013 this shortcode is used to display the My Account page. This page consists of all essential customer information, including their previous orders (if there are any). Here\u2019s what it can look like on your frontend:<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/My-Account-Page-Preview.jpg\" class=\"attachment-full size-full\" alt=\"My Account Page Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/My-Account-Page-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/My-Account-Page-Preview-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/My-Account-Page-Preview-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/My-Account-Page-Preview-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>[woocommerce cart]<\/strong> \u2013 this shortcode adds the WooCommerce cart functionality to the page. In other words, it will display all of the products that the user has added to their cart. There are no parameters to add to this shortcode.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"532\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Cart-Products.jpg\" class=\"attachment-full size-full\" alt=\"Cart Products\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Cart-Products.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Cart-Products-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Cart-Products-768x422.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Cart-Products-620x340.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>[woocommerce_checkout]<\/strong> \u2013 as is apparent from its name, this shortcode will allow you to display the checkout page. This shortcode contains no additional parameters.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"588\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Billing-Details.jpg\" class=\"attachment-full size-full\" alt=\"Billing Details\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Billing-Details.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Billing-Details-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Billing-Details-768x466.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Billing-Details-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"692\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Your-Order.jpg\" class=\"attachment-full size-full\" alt=\"Your Order\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Your-Order.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Your-Order-300x214.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Your-Order-768x548.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Your-Order-620x443.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>[woocommerce_order_tracking]<\/strong> \u2013 this shortcode will generate an \u201corder tracking\u201d page that lets customers check the status of their order.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Tracking-Order.jpg\" class=\"attachment-full size-full\" alt=\"Tracking Order\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Tracking-Order.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Tracking-Order-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Tracking-Order-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Tracking-Order-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>[products]<\/strong> \u2013 this is easily one of the most useful and most extensive WooCommerce shortcodes available. This shortcode will allow you to display your products and comes with many different parameters that will further customize the way your products will be displayed on your site.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"625\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Products.jpg\" class=\"attachment-full size-full\" alt=\"Products\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Products.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Products-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Products-768x495.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Products-620x400.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Though you may think that adding shortcode parameters is a complicated process, it is actually quite intuitive. You only need to add the name of your parameter, then add an equals (=) sign, and place your desired value inside quotes. Remember the example of the shortcode parameter structure we mentioned at the very beginning of the article? Here is a more concrete example of that:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products limit=\"5\" category=\"pants\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This shortcode is meant to limit the number of products to five and also only display products from the &#8220;pants\u201d category.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To make things a bit clearer, we are going to list some of the most important parameters that can be used with this shortcode one by one:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;Limit&#8221; \u2013 this parameter will allow you to limit the number of products displayed on your page (it will display all products by default):<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products limit=\"5\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;Category&#8221; \u2013 this parameter will allow you to display products from a specific category. If you wish, you can include more than one category by simply adding a comma between different categories. For example:\n<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products category=\"pants, shirts\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;Columns&#8221; \u2013 this parameter will let you customize the layout of your product page. More specifically, it will allow you to set the desired number of columns (it is set to 4 columns by default):\n<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products columns=\"2\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;Paginate&#8221; \u2013 this particular parameter will let you define whether your product page will be paginated or not. There are two options you can use \u2013 true or false (it is set to false by default).\n<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will probably want to use the paginate parameter in conjunction with the limit parameter we mentioned above. Thus, the limit parameter will determine how many items are listed on each page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products paginate=\"true\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s how this shortcode can look like when combined with the paginate and limit parameters:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products limit=\"10\" paginate=\"true\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;Orderby&#8221; \u2013 the &#8220;orderby&#8221; parameter has multiple options that will let you determine the order of your products. This order will be set by the product title by default. Also, you can add more than one option by adding space between them. Some of the possible options include <strong>date<\/strong> (order products based on the publishing date), <strong>rating<\/strong> (order products by their average rating), <strong>popularity<\/strong> (order the products by the number of purchases), <strong>id<\/strong> (orders products by their post ID), and <strong>rand<\/strong> (this option will display products at random).<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products orderby=\"date\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;order&#8221; \u2013 aside from the orderby parameter, you can also define whether the order of your products will be ascending (ASC) or descending (DESC). Like this:<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products order=\"ASC\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;tag&#8221; \u2013 if you want, you can use this parameter to display products using a specific tag. Once again, you can include multiple tag parameters within one shortcode \u2013 you just need to separate them with a comma. For example:<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products tag=\"silver, elegant\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">\u201con_sale\u201d \u2013 this parameter will allow you to display products that are on sale. You can either insert the &#8220;true&#8221; or &#8220;false&#8221; option:<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products on_sale=\"true\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;best_selling&#8221; \u2013 similarly, this parameter will allow you to display the best-selling products only:<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products best_selling=\"true\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;top_rated&#8221; \u2013 this parameter will let you display your top-rated products:<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[products top_rated=\"true\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Just a quick note before we continue \u2013 these last three parameters (&#8220;best_selling&#8221;, &#8220;top_rated&#8221;, and &#8220;on_sale&#8221;) should not be combined.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>[product_categories]<\/strong> \u2013 this particular shortcode will allow you to display more than one category (not the products that can be found in those categories, but the categories themselves). There are plenty of customization options you can use, just like with the [product] shortcode. If you don\u2019t apply any parameters, this shortcode will simply showcase all your product categories on one page.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Some of the parameters you can use with this shortcode are:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;limit&#8221; \u2013 limits the number of categories that will be displayed<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;orderby&#8221; \u2013 use this parameter to order the categories by number, name, ID, slug, or menu order<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;order&#8221; \u2013 you can arrange the categories in ascending (ASC) or descending order (DESC).<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[product_categories limit=\"5\" orderby=\"name\" order \"DESC\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>[product _category]<\/strong> \u2013 this shortcode allows you to display products from a specific category. Once again, you should add a parameter to specify your category. Some of the available parameters include<strong> ids<\/strong> (allowing you to display categories by ID),<strong> limit, columns, category, order, orderby<\/strong>, and so on.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s an example of a shortcode combined with a few of its parameters:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[product_category category=\"pants\" limit=\"12\" columns=\"4\" orderby=\"name\" order=\"asc\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, this [product_category] shortcode will display products from the pants category with a limit of displaying 12 products on a page in 4 columns. The products from the pants category will also be ordered by name, in ascending order.[\/vc_column_text]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>[add_to_cart]<\/strong> \u2013 this is another built-in shortcode that allows you to add an \u201cadd to cart\u201d button to any product. You just need to add the product ID (or its SKU) and the button will be displayed for that specific product. This shortcode also includes many parameters you can use to further customize your add to cart button. Here are some of them:<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;id&#8221; \u2013 as we already mentioned, this parameter allows you to select the product by its ID<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;SKU&#8221; \u2013 using SKU is another way in which you can choose your product<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;show_price&#8221; \u2013 this allows you to choose whether the price will be shown together with the button or not. You can either use show_price=&#8221;TRUE&#8221; or show_price=&#8221;FALSE&#8221;.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s an example of an [add_to_cart] shortcode with the parameters we mentioned:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[add_to_cart id=\"12\" show_price=\"TRUE\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>[related_products]<\/strong> \u2013 just like its name suggests, this shortcode displays related products on any page it gets added to. Some of the parameters you can use include:<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"> &#8220;limit&#8221; \u2013 once again, it will limit the number of related products on the page<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;columns&#8221; \u2013 sets the number of columns the related products are going to be displayed in<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">&#8220;orderby&#8221; \u2013 this parameter lists the related products by the option you specified. Some of the options include date, ID, rating, menu order, and so on.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]An example would be:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[related_products limit=\"8\" columns=\"4\" orderby=\"title\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>[recent_products]<\/strong> \u2013 last but not least, this shortcode will allow you to showcase the products that have been recently added to your WooCommerce store. The available parameters are pretty much the same as the ones for the [related_products] shortcode, including <strong>limit, order, orderby, columns<\/strong>, etc.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[recent_products limit=\"6\" columns=\"3\" orderby=\"date\" order=\"ASC\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see from the examples we listed above, there are quite a few shortcodes you can use if you plan to build your online store with the powerful WooCommerce plugin. But in reality, this is only the tip of the iceberg when it comes to all available WooCommerce shortcodes, and we would be here all day if we were to list all of them. So, we made sure to share only some of the most essential ones to give you a good head-start. If you want to get familiarized with the complete list of customizable shortcodes (and parameters) you can use to create a truly outstanding online store, we recommend checking out <a href=\"https:\/\/docs.woocommerce.com\/document\/woocommerce-shortcodes\/\" target=\"_blank\" rel=\"noopener\">WooCommerce\u2019s shortcodes documentation page<\/a>.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>This time around, we are going to share some of the most useful WooCommerce shortcodes that can help make your eCommerce store stand out among the rest. <\/p>\n","protected":false},"author":2,"featured_media":35575,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[56,229,99],"class_list":["post-35547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-ecommerce","tag-shortcodes","tag-woocommerce"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=35547"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35547\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/35575"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=35547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=35547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=35547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}