Skip to content
If you’ve spent some time using WordPress, I am sure that by now you already found out about shortcodes. However, if you don’t know what shortcodes are, then I’m going to offer you a basic explanation.
What is a shortcode and how do I use shortcodes in WooCommerce?
To avoid any errors, make sure when you copy-paste the shortcodes, make sure you delete the empty space between the brackets: – wrong,
A shortcode, as the name suggests, is a short string of characters usually written inside right brackets. It’s main purpose is to help WooCommerce users insert or alter dynamic content without having to leave the visual editor.
In even simpler language, it helps you implement and change the values from interactive elements, subscription forms, user profiles and settings, cart status, checkout pages and pretty much every element you may think of.
A good example of a WooCommerce shortcode would be:
– inserted in the WordPress post editor, this shortcode will return the WooCommerce cart and the current user’s added items.
There are many extensions and mods created to serve the need for shortcodes in WordPress, however the most popular would be the Visual Composer which serves over 350.000 websites. For WooCommerce, on the other hand there is the “WooCommerce Shortcodes” plugin, an extension of the platform that brings a more visual friendly environment towards shortcode use.
Once installed and activated, the WooCommerce Shortcodes plugin will implement a Woo button in your post editor from where you can easily manage all the shortcodes available in WooCommerce and modify their values according to your preferences.
What Shortcodes Are Included in WooCommerce?
I started with the however there are many more shortcodes available and all of them are pretty intuitive. Another rule that applies to all shortcodes inside WooCommerce, they all start with WooCommerce and are followed by the underline and the actual shortcode name.
Also, it’s worth mentioning that some of these shortcodes also allow arguments to be passed. For instance, the number of products to show or the number of categories to show per page.
WooCommerce Checkout Page
What is WooCommerce checkout shortcode?
- The ID of the WooCommerce product you want to display in the checkout window, and
- A Boolean value that determines whether or not you want to show the “Checkout Now” button.
How do I find my WooCommerce shortcode?
It is simple: I will post it below:
User Profile and Account Administration
This shortcode will help you to build one of the most important store pages: The My Account page. On this page, the customers can view past orders, edit addresses, and payment details. My Account is the central customer dashboard in a WooCommerce store.
How do I find my WooCommerce shortcode?
Simple: Just copy-paste the shortcode below on your desired “My Account” page:
As the name suggests, it will showcase the current user account details and ways for you to modify these. Besides, on this page, the user can see details about previous orders. This is a shortcode that accepts arguments therefore you can choose how many orders to display / page.
The default number of orders is 15, but you can set it to whatever number you want. If you want to display all of them, then your shortcode should look like this:
If you want to display 10 orders
Display Products and Product Categories
There are many variation of WooCommerce shortcodes to help you display products, so you can display recent products, featured products, just a single product or multiple products from certain categories.
a. How do I display a single product in WooCommerce?
To do this you will need either the product unique id or the product SKU (Stock Keeping Unit) a unique identifier for the product.
ID example: SKU example:
How to find WooCommerce product id?
Go to Admin Dashboard > Products (under WooCommerce button, in the left panel) > Hover the mouse over a product title. The product ID will appearing first, in the same line with “Quick Edit”, “Edit”, and so on.
b. How to display Multiple WooCommerce Certain Products
This is another shortcode that accepts arguments and these are the order and orderby args. Otherwise, this shortcode is exactly the same as the one for single product, just in this case you separate IDs and SKUs by coma.
ID example: SKU example:
c. How to display WooCommerce Featured Products
As you may know, WooCommerce allows you to set up featured products, products that you choose to be promoted and now you can decide which ones you show and how many you want to display on a page.
To do this, we use the
So in order to use it:
example: Show 15 featured products on 3 columns
d. How to display WooCommerce Recent Products
If you want to show the latest product additions from your WooCommerce store, then you can take advantage of the
example: Show latest 30 products from your store on 3 columns
e. WooCommerce Full Product Page
This is pretty similar to show single product, just you will show a full single product page.
ID example: SKU example:
f. Display Entire Product Category
You can show all the products from a certain category by using the
- per_page – number of posts per page
- columns – number of columns for products
- orderby – title, date etc.
- order – ascending or descending
- category – the category of products you want to showcase
example: Show 16 products from the Notebooks category ordered by date, ascending on 4 columns
g. How do I show best selling products in WooCommerce?
These are products with the highest number of sales. You can display them using
example: Display 15 best selling products in your store
h. Display Only Products Available on Sale
- per_page
- columns
- orderby
- order
example: show 20 sale products ordered by title in a descending order on 2 columns
i. Display Related WooCommerce Products
These are a good way to increase the page impressions on your website and generate more awareness for less popular products. You can display related products using the shortcode.
The shortcode accepts 3 arguments:
- per_page
- columns
- orderby
example: To show 5 related products you simply use the shortcode
Add to Cart Button and URL
A very important shortcode, one that helps you customize the looks of your WooCommerce “Add to cart” button and helps you place it wherever you feel necessary. You can place it on other posts or pages because it is dependent on product it.
So, to display an add to cart button, you need to use the shortcode which supports 3 arguments: id, style and sku.
example: To show an add to cart button for a product with the id number 25 with the style border:2px solid #ccc; background:#999; color:#000; 12px; having SKU – pro
id=”25″ style=”border:2px solid #ccc; background:#999; color:#000; 12px;” sku=”pro”>
If you don’t need the button for add to cart and only need a URL, then you can use the
example: id=”25″ sku=”pro”>
This will return the complete URL for the user to add a certain product with the id=25 in his cart.
Keep in mind
When using WooCommerce shortcodes as well as WordPress shortcodes, make sure you don’t place them between the
and tags because WordPress will confuse those with code and will not execute your shortcode. Also, as I specified at the beginning of the article, make sure you delete the empty space between the brackets: – wrong,
