WooCommerce is the #1 eCommerce plugin for WordPress, and it comes with tons of handy options and features you can use. However, many people aren’t aware that WooCommerce also offers small code snippets, called shortcodes, which you can put anywhere you want on your website and display your products, call to action items, etc. This is a handy way to use advanced techniques without any coding skills or knowledge.
WooCommerce has a list of available shortcodes here, but we’ll cover the most used/useful ones in this article.
So, how do you add a shortcode?
Create a new page via Pages > Add New:
Add Shortcode (Gutenberg Editor)
If you’re using the Gutenberg editor, click the + sign to add a new block, and then search for Shortcode in the search field:
Click the Shortcode to add it to your page, and then input the shortcode you want into the field. In this example, we’ll use a shortcode to show product categories:
Click the Publish button to publish the page, and see the result:
That’s it! It’s quite easy.
Add Shortcode (Classic Editor)
If you’re using the Classic editor, paste the shortcode into the body field:
Common WooCommerce Shortcodes
Now that you know how to insert WooCommerce shortcodes to your post or page let’s cover the most basic shortcodes.
My Account Page
This shortcode displays the My Account page:
This shortcode displays the customer’s cart:
This shortcode will display the checkout page:
This shortcode displays the order tracking page:
Please note that you can combine shortcodes to use both my account and order tracking shortcodes on a single page, for example.
Below, you can find more advanced shortcodes that you can use on your pages.
Displays the most recent products and automatically updates the grid each time you add new products:
[products limit="6" columns="3" orderby="date" order="DESC" visibility="visible"]
This is handy to use on your homepage as it displays the beautiful grid which dynamically updates itself, so you don’t have to touch it again.
Let’s cover the variables used in this shortcode:
limit – the number of products displayed in the grid
columns – the number of columns to use
orderby – allows you to arrange products by date, menu_order, id, popularity, rand, rating and so on
order – descending or ascending
visibility – if the products are viewable in the shop and search field
Another alternative is:
[recent_products per_page=”9″ columns=”3″ orderby=”date” order=”ASC”]
Most Popular Products
Displays your best selling products:
[products limit="4" columns="4" orderby="popularity" ]
Again, this grid is dynamically updated, so it’s great to use during holiday seasons for gift ideas, etc.
Products In A Specific Order
Displays the products in the order you choose:
[products ids="2, 11, 7, 32, 18, 13" orderby="post__in"]
Products For Sale In A Specific Category
Displays products that are on sale in one category:
[products limit="200" columns="4" orderby="popularity" on_sale="true" category="your_category" ]
The alternative method is:
[sale_products per_page=”9″ columns=”3″ orderby=”date” order=”ASC”]
Product Price With Cart
Displays product price with the add to cart button:
id – the post ID of the product
This is handy to use if you want to feature a single product in a widget or a separate page/blog post.
Allows you to display all the similar products:
Displays your favorite products on the page:
[featured_products per_page=”9″ columns=”3″ orderby=”date” order=”ASC”]
To make a product featured, click the star icon in the WooCommerce product list:
Top Rated Product
Displays your products based on reviews and ratings within the WooCommerce plugin. If you use these options, it’s a handy shortcode to display your top-rated products:
[top_rated_products per_page=”9″ columns=”3″ orderby=”date” order=”ASC”]
Best Selling Product
Displays your best selling products:
[best_selling_products per_page=”9″ columns=”3″ orderby=”date” order=”ASC”]
Displays an interactive search field on a page or a post:
To display a single product on your page or a post:
[products ids="18" columns="1"]
We’re using the columns option in this case so that it doesn’t take the page’s entire width as it would look a bit weird.
To display the product categories available on your store:
To display only specific categories, use the following shortcode:
[product_categories ids="12, 27, 8"]
As you can see, you can do a lot using WooCommerce shortcodes, so we recommend learning more about these to improve your store even further!