WooCommerce Shortcodes: What Are They and How You Can Use Them

WooCommerce shortcodes provide a flexible and convenient way to extend your online store’s functionality and user experience. They can help you easily add and display content and functionality, making them a valuable asset for any WooCommerce store.

They can also be used to create custom layouts and designs for your online store, as you can control the position and appearance of the content and functionality using shortcodes. Let’s read this article to learn more about WooCommerce shortcodes.

What Are Shortcodes in WooCommerce?

WooCommerce shortcodes allow you to easily add specific functionality or content to your pages and posts. They are written in square brackets (e.g., [shortcode]) and can be placed anywhere in the post editor to display the desired content or functionality.

Many shortcodes in WooCommerce allow you to display products, categories, carts, checkout pages, and other types of content such as customer accounts and order tracking.

How Do WooCommerce Shortcodes Work?

WooCommerce shortcodes function similarly to those in various e-commerce platforms. Once the plugin is installed, it automatically generates default pages with embedded shortcodes, providing a range of functionalities.

Shortcodes consist of a primary body and an optional parameter segment, offering flexibility for customization.

The primary body of WooCommerce shortcodes defines the core action, represented by examples like:

[best_picks] [woocommerce_user_panel] [shopping_items]

Adding precision to these actions is the parameter part, allowing for specific adjustments. For instance, consider this shortcode:

[best_picks display="grid"]

Here, display=”grid” tailors the presentation of best picks to a grid layout. This dynamic flexibility in WooCommerce shortcodes simplifies the customization process.

How to Use Shortcodes in WooCommerce

First thing first, you need to add the WooCommerce shortcode plugin. Although there are plenty of plugins available on the internet, I recommend choosing WooCommerce Shortcodes plugins. This plugin provides a TinyMCE drop-down button to use all WooCommerce shortcodes.

To install this plugin, just follow these few steps:

• Go to your admin dashboard.
• Click on Plugin → Add New.
• Search for WooCommerce shortcodes.
• Install and activate the plugin.

Using shortcodes in WooCommerce is very easy. Simply follow these steps:

1. Go to the product page or post where you want to add the shortcode.
2. In the post editor, place the cursor where you want the shortcode to appear.
3. Type the shortcode in square brackets. For example, [shortcode].
4. If the shortcode requires any parameters or attributes, you can add them inside the brackets. For example, [shortcode attribute=”value”].
5. Publish or update the page or post.

26 WooCommerce Shortcodes to Manage Your Online Store

We have divided the WooCommerce shortcodes into four categories:

1. Page Shortcodes
2. Product Display Shortcodes
3. Add to Cart and Cart Display Shortcodes
4. Functionality Shortcodes

Page Shortcodes

1) Cart Page Shortcode

This shortcode is used to display and showcase the contents of the customer’s shopping cart on a WooCommerce-powered website.

[woocommerce_cart]

2) Checkout Page Shortcode

The shortcode shows a checkout form with all the needed fields for customers to finish their purchases. You can customize it using parameters like order_review, terms, privacy_policy, and login_form.

[woocommerce_checkout]

3) User Account Page Shortcode

This shortcode simply displays the My Account Page, providing customers an easy way to update their personal details.

[woocommerce_my_account]

4) Order Tracking Shortcode

Incorporates order tracking functionality, allowing customers to conveniently trace and monitor the status of their orders.

[woocommerce_order_tracking]

Note: You can also combine shortcodes on a single page for enhanced functionality. For example, you can create a page featuring both the account details (the shortcode we looked at earlier) and order tracking forms using:

[woocommerce_my_account]

and

[woocommerce_order_tracking]

Product Display Shortcodes

5) Product Category

This shortcode displays a grid of products from a specified category, and you can customize its appearance with parameters like limit, columns, orderby, and order—similar to the [products] shortcode.

This allows you to highlight specific product categories in a loop on your site.

[product_category]

For the purpose of the categories section, here are seven more attributes you can apply to this shortcode:

• ‘number‘ => ‘null ‘, – This shortcode represents the number of categories.
• ‘orderby‘ => ‘name’, – This shortcode represents the order, “name” and “date” are valid options.
• ‘order‘ => ‘ASC ‘, – This shortcode represents how product categories are ordered, “ASC” or “DESC“.
• ‘columns‘ => ‘4′, – This shortcode defines the number of columns categories are organized into.
• ‘hide_empty‘ => ‘1‘, – This shortcode represents Set to 1 to hide categories with no products or 0 to show them.
• ‘parent‘ => ”, – This shortcode represents Set to 0 to only top-level display categories.
• ‘ids‘ => ” – This shortcode represents that IDs can be set to only output specified results.

Example of how to use this shortcode: [product_category category=”clothing”] <!– Replace “clothing” with your actual category slug or name –>

This shortcode displays a grid of products from the specified category on your page.

6) Product Category by Slug

This shortcode organizes products within a specified category and allows customization with parameters like per_page, columns, orderby, and order.

Here is the shortcode:

[product_category category=”” per_page=”16″ columns=”3″ orderby=”date” order=”desc”].

7) Product Price/Cart Button Shortcode

When you click on the Price/Cart button, it will ask you for your product ID and SKU. After filling in the instructions, it will generate the following shortcode [add_to_cart id=”21″ sku=”21″].

This is used to show the price and add to cart button for a singular product, either by ID or SKU.

For Example:

I am adding a new page and the shortcode for the price/cart button.

When you click on the “Price/cart” button option from the dropdown menu, as shown in the screenshot above, a pop-up will appear on your screen. Simply add the ID of whatever you want to display.

Clicking the OK button will generate a shortcode like in the screenshot below:

Click the publish button, and you’ll see that the shortcode is generated successfully, as shown in this screenshot below.

This is just one example I’m demonstrating. You can also use other shortcodes, like List or Add to Cart.

8) Add Multiple WooCommerce Products Shortcode

[products ids="1, 2, 3"]

The shortcode above allows you to include multiple products, and you can customize the display by adjusting options such as orderby, columns, and order.

For instance, [products ids=”1, 2, 3″ orderby=”date” columns=”3″ order=”desc”] will present six products in 3 columns, ordered by date in descending order. You can also use “ASC” for ascending order and “title” for an alternative arrangement.

9) Product ID

[product id="123"]

This shortcode showcases a specific product identified by its unique ID. Utilize parameters such as id and sku for customization. For instance, the example [product id=”123″] will present the product with ID 123.

10) Recent Products

The Recent Products shortcode displays items that you’ve added to your store recently. To see the results, just add this shortcode to your page, post, or anywhere else you prefer.

Here is the shortcode:

[recent_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]

11) Sale Product

Sale products allow you to add items currently on sale.

Here is the shortcode:

[sale_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]

After you have added the shortcode, you can see the results as demonstrated below:

12) Featured Products

Feature products allow you to add your favorite products to your web page. Just go to your admin site dashboard, Products > Products, and you will see an icon like this:

If you want to add featured products, just click on the icon. See the screenshot below:

Here is the shortcode:

[featured_products per_page=”12″ columns=”4″ orderby=”date” order=”ASC”]

Here’s what it will look like now:

13) Specific Categories

For showcasing specific categories, use the shortcode:

[products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"]

This shortcode displays two rows of four products from the “hoodies” and “tshirts” categories. To display products not in those categories, modify the cat_operator to “NOT IN” in the following example:

[products limit="8" columns="4" category="hoodies, tshirts" cat_operator="NOT IN"]

Note: Despite the limit being set to 8, only four products fitting the criteria will be displayed.

14) Attribute Display

To display products based on any attribute, use a shortcode like:

[products columns="3" attribute="your_attribute" terms="your_term" orderby="date"]

For exclusive display, you can use the “NOT IN” operator:

[products columns="3" attribute="your_attribute" terms="your_term" terms_operator="NOT IN"]

For example, to showcase products with the attribute “color”, you can use the shortcode below:

[products columns="3" attribute="color" terms="blue" orderby="date"]

This shortcode would display products with the attribute “color” set to “blue.” Adjust “color” and “blue” according to your actual attribute and term values.

15) Best Selling Products

To showcase your best-selling product, utilize the following shortcode:

[best_selling_products per_page="12" columns="4" orderby="date" order="ASC"]

This shortcode will display the top-selling products, allowing you to feature them on your page with customization options like the number of products per page and the order of arrangement.

16) Top Rated Products

Utilize the following shortcode to showcase your best products based on reviews and ratings in WooCommerce:

[top_rated_products per_page="12" columns="4" orderby="date" order="ASC"]

This shortcode enables you to display top-rated products, providing a user-friendly way to highlight products with high reviews and ratings.

17) Related Products

To display a list of similar products as related items, use the following shortcode:

[related_products per_page="12"]

This shortcode is designed to showcase related products, allowing customers to explore similar items.

Add to Cart and Cart Display Shortcodes

18) Add to Cart

This shortcode lets you display the price and add-to-cart buttons for a single product by ID. See the example shortcode below.

array(
     'id' => '99',
     'style' => 'border:4px solid #ccc; padding: 12px;',
     'sku' => 'FOO'
     'style' => 'TRUE'
     'class' => 'CSS-CLASS'
)
[add_to_cart id="99"]

19) Add to Cart URL

This shortcode allows you to add the add to cart button of a single product by ID. See the below shortcode.

array(
     'id' => '99',
     'sku' => 'FOO'
)
[add_to_cart_url id="99"]

20) Cart Total Shortcode

Use this shortcode to display the total cost of items in your shopping cart. Customize its appearance by adding a class and text before the total. For instance:

[woocommerce_cart_total class="my-cart-total" before="Total: "]

This example shortcode will present the total cost with a distinctive style and include the text “Total: ” before the amount. Adjust the class and text as needed for your desired look.

21) Cart Coupon Shortcode

To include a coupon code box on your shopping cart page, utilize the following shortcode. Customize its appearance by adding a class and setting a placeholder text. For example:

[woocommerce_cart_coupon class="my-cart-coupon" placeholder="Enter coupon code"]

This shortcode will render the coupon box with a specific appearance and display the placeholder text “Enter coupon code.”

22) Cart Item Quantity Shortcode

[woocommerce_cart_contents_count]

The shortcode above is used to display the total number of items currently in the shopping cart. When you place this shortcode on a page, it will dynamically show the quantity of distinct products in the cart.

For example:

The number of items in your cart: [woocommerce_cart_contents_count]

“The number of items in your cart: 3”

Functionality Shortcodes

23) Order Tracking

The shortcode in WooCommerce adds functionality to allow customers to track their orders. When you use this shortcode on a page, it provides a user-friendly interface for customers to input their order tracking information and retrieve real-time updates on the status and location of their orders.

[woocommerce_order-tracking]

24) Product Search Field Shortcode

This shortcode enables the insertion of live search and live filtering functionalities within pages and posts. When added to a page or post, this shortcode integrates a search bar that allows users to perform live searches and apply real-time filters to find products more efficiently.

[woocommerce_product_search]

25) Live Product Filter Shortcode

You can also customize the filtration by using the following WooCommerce shortcodes.

• [woocommerce_product_filter] — This allows you to show a live Product Search Filter.
• [woocommerce_product_filter_attribute] — This allows you to show a live Product Attribute Filter.
• [woocommerce_product_filter_category] — This allows you to show a live Product Category Filter.
• [woocommerce_product_filter_price] — This allows you to show a live Product Price Filter.
• [woocommerce_product_filter_tag] — This allows you to show a live Product Tag Filter.

26) Product Stock Shortcode

To inform customers about product availability, simply utilize the Product Stock shortcode. This shortcode succinctly communicates whether the product is “In stock” or “Out of stock,” aiding customers in their purchasing decisions.

Here’s the shortcode:

[woocommerce_product_stock]

How to Troubleshoot WooCommerce Shortcodes

If you’re having trouble with WooCommerce shortcodes, you can try some simple troubleshooting steps below to figure out what’s causing the issue:

1. Bracket Issues:

Check if your shortcode is enclosed in [square brackets]. For example, use [products limit="4" columns="4" orderby="popularity"] instead of <angle brackets>, (parentheses), or {curly brackets} to avoid shortcode errors.

2. Attribute Value Format:

Ensure all attribute values are within “quotation marks.” For instance, use [products limit="6" columns="3" orderby="popularity"] to prevent issues caused by incorrect quotes or formatting.

3. <pre> Tag Interference:

Inspect for <pre> tags around your shortcode, as they may disrupt its functionality. Remove any unintended <pre> tags. For example, avoid embedding shortcodes within <pre> tags.

4. WooCommerce and PHP Version Compatibility:

Update to the latest WooCommerce version and PHP version to resolve compatibility issues. For example, ensure you have the latest WooCommerce release to support your shortcodes effectively.

If you’re a Cloudways customer, check out this guide on how to upgrade your PHP version seamlessly.

5. Custom CSS Impact:

Review custom CSS files for rules  .woocommerce ul.products { display: none; } that could hide content. Adjust or remove conflicting rules. For instance, consider modifying CSS that affects how shortcodes are displayed.

6. Theme Conflict:

Switch to a default WordPress theme to identify if the issue is theme-related. If it persists, contact the theme developer for assistance. For example, switch to a theme like Twenty Twenty to see if the shortcode works without theme conflicts.

7. Plugin Conflict Resolution:

Deactivate all plugins except WooCommerce to pinpoint potential conflicts. Activate each plugin one by one to find the conflicting one. Seek alternatives or contact plugin developers for support. For instance, deactivate plugins and test your shortcodes individually to identify conflicting ones.

You can learn how to troubleshoot plugin issues in our guide on common WordPress errors.

Summary

WooCommerce shortcode is a powerful tool that allows you to easily add and display specific content and functionality on your pages and posts. Whether you want to display products, categories, cart, checkout pages, or other types of content.

Shortcodes require no coding or technical knowledge, and they can be easily added to any page or post by simply typing them in square brackets. If you’ve got any questions related to WooCommerce shortcodes, please write them in the comments.

Sarim Javaid

Sarim Javaid is a Digital Content Producer at Cloudways. He has a habit of penning down his random thoughts and giving words and meaning to the clutter of ideas colliding inside his mind. His obsession with Google and his curious mind add to his research-based writing. Other than that, he's a music and art admirer and an overly-excited person.

Get Connected on: Twitter Community Forum