How To Use Short Codes For WooCommerce

SkyStra
Sep 4, 2020

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 ShortCodes

WooCommerce has a list of available shortcodes here, but we’ll cover the most used/useful ones in this article.

Add Shortcode

So, how do you add a shortcode?

Pages

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:

[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:

[woocommerce_my_account]

Cart Page

This shortcode displays the customer’s cart:

[woocommerce_cart]

Checkout Page

This shortcode will display the checkout page:

[woocommerce_checkout]

Order Tracking

This shortcode displays the order tracking page:

[woocommerce_order_tracking]

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.

Latest Products

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”]

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:

[add_to_cart id="11"]

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:

[related_products per_page=”9″]

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:

[woocommerce_product_search]

Single Product

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.

Category List

To display the product categories available on your store:

[product_categories]

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!