fbpx
A Comprehensive Guide to WooCommerce Shortcodes
July 8, 2022
woocommerce shortcodes

Ever heard of the term WooCommerce shortcodes? If not, don’t worry as you are not the only one on the bus. Interestingly, many people are unaware of WooCommerce WP eCommerce short codes, even those who have owned and run their WooCommerce store for a long time.

WooCommerce shortcodes are cleverly used cases of WordPress shortcode features. You can use these shortcodes in widgets, posts, pages, and sidebars. These shortcodes supports you in using key features like woocommerce add to cart shortcode, product list, and others without coding. This trick is highly underrated as it amazes you with some clean features.

In this blog post, we will learn what WP eCommerce shortcodes or WooCommerce shortcodes are. Moreover, we will discuss some of the powerful WooCommerce shortcodes and how you can use them on a WooCommerce-powered eCommerce site. So, let’s get started:

What are WooCommerce Shortcodes?

A WordPress WooCommerce shortcode is a code bordered by square brackets []. They help you add a particular feature or function to your website’s components.

You may wonder, “Aren’t these and widgets the same thing?” Well, the answer is no. Shortcodes let you place them anywhere on a website, but widgets don’t. These robust WP eCommerce short codes can offer some incredible ease to your WordPress website. 

How Can You Use WooCommerce Shortcodes?

The shortcode implementation process is slightly different when discussing Classic and Gutenberg editors. We know that most readers still use the Classic editor and avoid the Gutenberg editor. However, we will discuss the process for both editors.

WooCommerce Shortcodes  (Classic Editor)

To implement WooCommerce shortcodes on a webpage via the classic editor, first you need to visit the respective page. You can make a page or use an existing one to do this.

If you want to add WooCommerce shortcodes to a page, head on to the WP Admin Dashboard, then Pages, then ‘Your Selected Page.’ Now click on the Edit button. Here, we want to add a “Test Page” tab and show the “Products.”

WooCommerce shortcodes

So, in the classic editor, this is the easiest way to add a shortcode to a page. Don’t forget that every WP shortcode begins and ends with square brackets, and WooCommerce shortcodes also work similarly. 

WooCommerce Shortcodes (Gutenberg Editor)

If you feel comfortable using the Gutenberg editor, adding WooCommerce shortcodes to a webpage is even easier. Here we are editing the same page. However, the only change is the Gutenberg editor. Visit the WP Admin Dashboard and then follow the same steps as with the classic editor: Pages > Your Selected Page > Click on the Edit button.

You may know that decorating a page by creating blocks was possible in Gutenberg. These blocks may have photos, paragraphs, videos, etc. Moreover, there is a block for inserting shortcodes. To add those, click on the plus button.

WooCommerce shortcodes editor

After finding the block for WooCommerce shortcodes, select and copy-paste the code we used earlier.

block for WooCommerce shortcodes

Now tap the “publish” button to see the page’s appearance.

block for WooCommerce shortcodes

WooCommerce Shortcodes – Widgets

There are different places to add the WooCommerce shortcodes apart from the main page. Among those other places are widgets. For instance, if you have to add a specific product to show on your sidebar, which currently exists on an exciting sale. Let’s see if we can do it.

Read Also: Popular MultiVendor Marketplaces for Ecommerce Platforms in 2022

To insert a WP Ecommerce shortcode on a widget, go to WP Admin Dashboard > Appearance > Widgets. 

WooCommerce shortcodes widgets

Choose a place on the widget and drag & drop the text. Here, we are placing our widget on the sidebar of every page to make our sale product visible. Here is how we did it:

WooCommerce shortcodes widgets

On the sidebar, we are showing our sales product. Thus, we will use our product ID on the shortcode and then Save it to have the desired result:

[products id=”48”] 

WooCommerce shortcodes - Product id

Adding multiple products is also possible through the same method. All you need is to add the following WP Ecommerce shortcode:

[products ids=”48, 34,” columns=”2″]

The above code shows that we have to add two products, ID No. 48 and 38, which will appear in different columns. Don’t forget that you need to point out the column number to fetch your ideal result. 

Read Also:  Super Fast Way To Export WooCommerce Orders And Products Easily

WooCommerce Shortcodes List

Since we know why shortcodes are essential and how you can use them on your eCommerce sites for exceptional features, let’s go on to get the list of WooCommerce shortcodes and know which code does what.

Page Shortcuts

These WooCommerce shortcodes create an entire dedicated page for a particular eCommerce feature. Page shortcodes can be made for –

  • Cart.
  • Checkout.
  • Customer Account.
  • Order tracking. 

Here, we will discuss the woocommerce products’ shortcode. It is imperative to know that while installing WooCommerce, you will automatically get shortcodes to be added to your WordPress website. Also, you will find ready pages for Account, Cart, Order tracking, and Checkout page.  

1- Cart Page:

A dedicated page where your customers will find the products they added to the cart. Following is the woocommerce products shortcode.

[woocommerce_cart]

2- Checkout Page

A basic webpage for eCommerce websites. You can use the following shortcode to turn any page into a checkout page:

[woocommerce_checkout]

3- Customer Account page:

This is where customers can check their profiles for that site. This can include the list, order account list, address, etc.

One of the WooCommerce shortcodes to insert a customer account page is given below:

[woocommerce_my_account]

4- Order tracking page:

This is self-explanatory. Customers here can track their orders. Following is the shortcode.

[woocommerce_order_tracking]

Product Shortcodes

A WooCommerce products shortcode is among the most powerful shortcodes for use cases. The default shortcode for the product is [products]. However, a WooCommerce products shortcode has several applications. You can apply attributes alongside the product shortcode. Thus, you won’t need to use various shortcodes to display featured or sale products, best-selling, recent, and top-rated products.  

An attribute enables you to do all these without using a new WooCommerce products shortcode. We will not cover all the attributes here; however, we will show some examples of how WooCommerce products shortcode works.

Read Also: Types of eCommerce Business Models That Work in 2022?

Best Selling Products:

For making a dedicated page for best-selling products or any of your products anywhere else like a sidebar, or widget, the following is the WooCommerce products shortcode.

[products limit=”2″ columns=”2″ best_selling=”true” ]

Sale Products:

It is possible to create a dedicated page to show only the products on sale. To do that, you need to insert the code below:

[products columns=”3″ on_sale=”true”]

Changing the number of columns and getting the desired output is also possible.

Product Category Shortcodes

You need to use a product category shortcode to make a page for displaying products from a specific category.

Following is the shortcode for the product category feature.

[product-category = “tshirt”] 

Related Product Shortcodes

Every popular site uses a little widget that shows its related products. You can also do so by using the shortcodes for related products. It is used to suggest customers buy products similar to what they are searching for.

All you need to do is paste the following shortcode to your page’s editor.

[related_products limit=”12″]

Tweaking the limit of the product as per your choice is possible.

Add to Cart

Big e-commerce sites attach a specific product as a CTA on their blog posts or pages. We often have to add a widget called “Add to Cart” on a page where a customer can insert any product to the cart and checkout without going to the shop page. WooCommerce add to cart shortcode enables you to do it. The shortcode for add to cart is:

[add_to_cart id=”product ID”] 

Final Words on WooCommerce Shortcodes

You can’t afford to miss out on critical features. Putting your product wherever you want has become necessary in contemporary online business. It enables you to increase your conversion. Moreover, people don’t go to the shop page whenever they want to buy a product. Therefore, if you place your product as per your liking, an increase in conversion is bound to happen.

Through WooCommerce shortcodes, you can do product placement and creatively show your products. You can put your product anywhere and add an “Add to Cart” button with the help of WP eCommerce short codes.

If it makes you feel weird, you can also add these features by installing a plugin.

Asma Khalid is a Product Manager at CloudPages. She also oversees Content Writing and Social Media at CloudPages.

Recent Posts

Get Newsletter Updates

10 Most Common WordPress Errors and How to Fix Them

10 Most Common WordPress Errors and How to Fix Them

‘Oops! WordPress dashboard does not work correctly due to unforeseen errors.’ Your smooth and happy day can quickly turn into confusion when you open your WordPress and see this message appear on your screen. It can be pretty frustrating, especially if it is your...

read more
MySQL Performance Tuning Tips For Better Database Optimization

MySQL Performance Tuning Tips For Better Database Optimization

Though MySQL is considered one of the most popular database managers, it still needs to be optimised every once in a while. On the other hand, when we talk about complex and big data sets, you need to optimise for high performance regularly. MySQL performance tuning...

read more
How to Create Image and File Upload in PHP with jQuery AJAX

How to Create Image and File Upload in PHP with jQuery AJAX

The hallmark of the PHP application is that it enables you to upload files from clients to servers. However, you need to be patient to implement features with stress-free configuration and correct security. As a developer, you can use different scripts for PHP file...

read more
How to Join Two Tables in MySQL

How to Join Two Tables in MySQL

To give appropriate content for a WordPress website, MySQL stores data in tables. Irrespective of the prefix, each MySQL database table comprises columns and rows. The columns identify the data type, whereas the rows carry the actual data. In this article, we will...

read more

Comments

0 Comments

Submit a Comment

Your email address will not be published.

Subscribe

Join Our Newsletter

Pin It on Pinterest

Share This