What are WooCommerce Shortcodes and How to Use Them

Andrei Iordache

Andrei Iordache

WordPress Developer

🚀 I Help People Get Found Online | WordPress Development, Core Web Vitals, Security&Maintenance

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?

WooCommerce Checkout Shortcode is a piece of code that allows you to use the WooCommerce checkout page on your desired checkout page. The shortcode accepts two arguments:
  1. The ID of the WooCommerce product you want to display in the checkout window, and
  2. 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:

  • per_page
  • columns
  • orderby
  • order

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:

  • 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: idstyle 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.

Submit Your Guest Post

Previous Post
How to Rename the WooCommerce Admin Menu in WordPress
Next Post
18 Reasons Why WooCommerce Is Best For An Online Store?
Lusi StudiosLusi Studios
15:32 22 Jun 22
Andrei did an amazing job! He helped in a very rushed time and he excelled at everything. Thanks again!
I am grateful and I would to thank Websites Seller for their support in site recovery and site transfer. Websites Seller just saved my business. Thank you!
Wouter GhysensWouter Ghysens
11:52 10 Sep 21
Looking for a Wordpress transfer from site A to site B, I found back Andrei from Wesites Seller on Google.He was very proactive in his approach, came with hundreds of ideas and lifetime experiences from other migrations. He knows the wordpress, the hosting and php database as the back of his pocket.And we worked out this migration very smooth. Together we solved it, and myself and my business are very pleased with his approach.100% recommendation & kudo's from out of Belgium!
Ioachim CiobanuIoachim Ciobanu
18:39 14 Jul 21
Websites Seller built my resume site. Deliverables were quickly completed, and I was asked for my feedback at each stage of development. All feedback I gave was implemented in a short time.Another great thing is that he comes with smart solutions, regarding stuff which I didn't initially think of (site security, Google site speed optimization and so on). Basically, he was great, staying in touch, keeping me updated and paid attention to what was most important for my site.Overall, I am very happy with the work done. I highly recommend this developer!
K CollinsK Collins
09:11 19 May 21
I needed help with website speed - to improve my core web vitals - without compromising the usability of my site. Andrei was extremely responsive, proactive and fast. And more importantly, he increased by website speed. Highly recommend him, and I will be using him going forward on all my projects.
js_loader

Submit Your Guest Post

Services

WordPress Website Maintenance Services

WordPress Maintenance Services

WordPress website maintenance service that provides cloud backups, emergency support, weekly website updates, speed and many more.

sally

WordPress Migration Service

Safely transfer your WordPress website to a new location for $75. … Migrate your website to its new host.

lawyer-office

Lawyer Web Design

We specializes in website design, Internet marketing and SEO for lawyers and attorneys throughout the Europe and US.