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: [ c123 ] – wrong, [c123] – good.
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:
[ woocommerce_cart ] – 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 [ woocommerce_cart ] 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:
[ woocommerce_checkout ]
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:
[ woocommerce_my_account ]
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:
[ woocommerce_my_account order_count=”-1″ ]
If you want to display 10 orders
[ woocommerce_my_account order_count=”10″ ]
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: [ product id=”1234″ ] SKU example: [ product sku=”pro” ]
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: [ products ids = “1, 2, 3”] SKU example: [ products skus = “pro, rba, abc ”]
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 [featured_products] shortcode. Is a dynamic shortcode that accepts arguments like per_page and columns.
So in order to use it:
example: Show 15 featured products on 3 columns
[ featured_products per_page=”15″ columns=”3″]
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 [recent_products] shortcode which allows 2 arguments: per_page and columns
example: Show latest 30 products from your store on 3 columns
[ recent_products per_page=”10″ columns=”3″]
e. WooCommerce Full Product Page
This is pretty similar to show single product, just you will show a full single product page.
ID example: [ product_page id=”25″] SKU example: [ product_page sku=”25″]
f. Display Entire Product Category
You can show all the products from a certain category by using the [product_category] shortcode. The shortcode accepts 5 arguments:
- 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
[product_category category=”notebooks” columns=”4″ per_page=”16″ orderby=”date” order=”asc”]
g. How do I show best selling products in WooCommerce?
These are products with the highest number of sales. You can display them using [best_selling_products] shortcode. It accepts the per_page argument.
example: Display 15 best selling products in your store
[ best_selling_products per_page=”15″]
h. Display Only Products Available on Sale
[sale_products] – will display only the products available on sale. It accepts 4 arguments:
example: show 20 sale products ordered by title in a descending order on 2 columns
[sale_products per_page=”20″ orderby=”title” order=”desc” columns=”2″]
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:
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
[ add_to_cart 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 [add_to_cart_url] shortcode which supports id and sku.
example: [ add_to_cart_url 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 <pre> and </pre> 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: [ c123] – wrong, [c123] – good.