Complete guide to WooCommerce shortcodes

WooCommerce is the leading ecommerce plugin for WordPress, empowering millions of businesses to transform their websites into robust online stores. However, many people are unaware of its shortcodes.

This guide explains everything you need to know about WooCommerce shortcodes, from essential shortcodes that display products and manage carts to advanced customizations for tailored user experiences.

Let’s explore how these tiny code snippets can significantly impact your ecommerce website.

What are shortcodes?

Shortcodes were introduced in WordPress 2.5 back in 2008. They are small pieces of code enclosed in square brackets like this: [shortcode]. They act as placeholders that tell WordPress to execute a specific function or display certain content dynamically.

For example, instead of manually coding a complex product grid, you can use a shortcode to create and display it instantly on your website. This saves time and reduces the potential for errors, making it easier to maintain and update your site.

Over the years, shortcodes have evolved, becoming more powerful and versatile. WooCommerce leverages this feature, offering a range of shortcodes specifically tailored for ecommerce functionality.

Getting started with WooCommerce shortcodes

To use WooCommerce shortcodes in your WordPress site, ensure the WooCommerce plugin is installed and activated.

To do that, log in to your WordPress dashboard, navigate to Plugins > Add New, and search for “WooCommerce.” Next, click Install Now on the WooCommerce plugin and Activate it.

Finally, you can follow the WooCommerce setup wizard to configure basic settings like store details, payment methods, and shipping options.

When you install the WooCommerce plugin, your WordPress site is automatically updated with the Cart, Checkout, and My Account pages. However, you can do more with your products, and that is what we will explore with shortcodes.

The basic syntax of shortcodes

WooCommerce shortcodes often include additional attributes to customize their output. Here’s the basic structure:

[shortcode attribute1="value1" attribute2="value2"]

For instance, the shortcode [products limit="4" columns="2"] displays four products in a two-column layout.

How to add shortcodes in posts, pages, and widgets

Shortcodes can be added almost anywhere in WordPress. You can add them to a post or a page by simply typing or pasting them into any text editor within WordPress or a shortcode block if you use Gutenberg or any page builder.

For this guide, Let’s use Gutenberg:

1. Navigate to Posts or Pages in the WordPress dashboard.
2. Open the post/page where you want to add the shortcode.
3. Click on the + icon to add a new block.

   

4. Search for and select the Shortcode block.
5. Paste your shortcode into the block.

For example, let’s say you want to display a grid of your latest products on your homepage. Using the block editor, you would enter the shortcode: [products limit="3" columns="3"] and Update or Publish your page.

This will create a grid with three products displayed in one column, offering a dynamic and attractive way to showcase your latest offerings.

You can also add shortcodes to widgets by navigating to Appearance > Widgets. Add a Text widget to your desired widget area (sidebar, footer, etc.). Enter your shortcode in the text box within the widget and save the widget.

Essential WooCommerce shortcodes

WooCommerce provides a variety of shortcodes that allow you to display products, manage the shopping cart, and enhance the checkout process.

Let’s explore the most essential WooCommerce shortcodes, their attributes, and detailed examples to help you effectively use them in your store.

Product display shortcodes

The [products] shortcode is one of the most versatile WooCommerce shortcodes. It allows you to display a list of products based on various criteria.

It has so many attributes that make you display products how you wish:

• limit — Number of products to display. The default is -1 (display all).
• columns — Number of columns. The default is 4.
• orderby — Order products by specific criteria such as date, title, price, popularity, etc.
• order — Order of products. Can be ASC (ascending) or DESC (descending).
• category — Slug of the product category.
• tag — Slug of the product tag.
• paginate — Enables pagination. Can be true or false. The default is false.

For example, if you want to display the latest eight products in a four-column layout, sorted by the date they were added in descending order. You can use the following shortcode.

[products limit="8" columns="4" orderby="date" order="DESC"]

If you also want to enable pagination so the user can access other products while displaying the limit, you can use the paginate attribute.

[products limit="8" columns="4" orderby="date" order="DESC" paginate="true"]

You may also want to display products from a specific category. The category attribute lets you do this. The shortcode below displays six products from the “accessories” category in a three-column layout:

[products category="accessories" limit="6" columns="3"]

Five products are displayed because only five are currently in the category. Seven will be available when two more are added to that category, but only six will appear because of the limit.

The [product] shortcode can also be used to display a single product based on its ID or SKU by adding either the id or sku attribute. For example, the shortcode below displays the product with the ID 22.

[product id="22"]

This can be added within a blog post or wherever you choose.

If you want to display more than one product selectively, you can use ids and skus attributes.

[products columns="3" ids="22,35,26"]

This shortcode displays products with the IDs 22, 35, and 26.

Another shortcode you may need is the [product_page] shortcode. This shortcode is similar to [product] but displays the entire product page, including tabs, related products, and reviews. For example, let’s display the full product page for the product with ID 22.

[product_page id="22"]

This can be useful for a feature product section within a page or post.

You also have access to a cat_operator attribute that allows you to control how products are filtered based on categories. Available options for this attribute are:

• AND — Display products in the chosen categories.
• IN — Display products belonging to any chosen category (default value).
• NOT IN — Display products not belonging to the chosen categories.

For example, if you want to display products in the “clothing” and “accessories” categories, you can use the AND operator:

[products category="clothing, accessories" cat_operator="AND"]

You can also exclude products from a specific category with the NOT In operator. For example, if you want to display all products except those in the “clothing” category.

[products category="clothing" cat_operator="NOT IN"]

Cart and checkout shortcodes

WooCommerce provides specific shortcodes for essential ecommerce pages like the cart, checkout, and user account.

For example, the [woocommerce_cart] shortcode can display the shopping cart page, including all cart items, quantities, and the total price.

This shortcode should be placed on the page designated as your cart page.

Similarly, the [woocommerce_checkout] shortcode displays the checkout page where customers can enter their billing and shipping details and place their orders.

This shortcode should be placed on the page designated as your checkout page.

The [woocommerce_my_account] shortcode can be used to display the user’s account, including sections for orders, downloads, addresses, and account details.

Finally, the [woocommerce_order_tracking] shortcode helps you display a form where customers can enter their order ID and email to track their orders.

This shortcode can be placed on any page where you want customers to track their orders.

Product category shortcodes

When you want to display a list or grid of product categories, you can use the [product_categories] shortcode. It has the following attributes that can be used to customize its appearance:

• number — Number of categories to display.
• columns — Number of columns.
• orderby — Order categories by specific criteria.
• order — Order of categories. It can be ASC or DESC.
• hide_empty — Hide empty categories. It can be 1 (true) or 0 (false).

For example, if you want to display product categories in a grid, you can use the following shortcode:

[product_categories number="12" columns="4" orderby="name" order="ASC"]

This shortcode displays 12 product categories in a four-column grid, sorted by name in ascending order.

If you add thumbnails, they will appear here, improving the look of your site. You can add thumbnails by accessing Products > Categories > editing a particular category and then scrolling to the Thumbnail field to upload the image.

Similarly, if you want to display products from a specific category, you can use the [product_category] shortcode. This accepts a per_page attribute, which specifies the number of products to display per page. It also accepts category to specify the product category slug and columns for the number of columns.

For example, this shortcode displays eight products from the “clothing” category in a four-column layout.

[product_category category="clothing" per_page="8" columns="4"]

Advanced WooCommerce shortcodes

Beyond the basic product display shortcodes, WooCommerce offers advanced shortcodes that provide greater control and customization options. These shortcodes allow you to tailor the display and functionality of your WooCommerce store to fit your specific needs.

Customizing product display

The [products] shortcode is highly flexible and allows various combinations of attributes to filter and display products differently.

Here are a few more attributes you can use:

• on_sale — Whether to display products on sale. true or false.
• best_selling — Whether to display best-selling products. true or false.
• top_rated — Whether to display top-rated products. true or false.

With this, you can display on-sale products.

[products on_sale="true" limit="8" columns="4"]

You can also display best-selling products in a category using the shortcode below:

[products category="accessories" best_selling="true" limit="6" columns="3"]

This shortcode displays six best-selling products from the “accessories” category in a 3-column layout.

Shortcodes for specific use cases

WooCommerce shortcodes can be tailored to meet specific use cases, providing dynamic content based on various criteria. For example, the [recent_products] shortcode can be used to display recently added products to your WooCommerce store.

[recent_products limit="5" columns="5"]

This shortcode displays the five most recently added products in a five-column layout.

Similarly, the [featured_products] shortcode can be used to display products marked as featured in your WooCommerce store.

[featured_products limit="6" columns="3"]

This shortcode displays six featured products in a three-column layout.

You can mark a product as featured by navigating to the products page and starring them, as shown in the image below.

Suppose you are running sales for some particular products. You can use the [sale_products] shortcode to display products currently on sale.

[sale_products limit="8" columns="3"]

To set up a sales price for your products, go to Products > All Products and click on the item you’d like to offer at a discount. Then, scroll down to the Product data section.

If you enter any value into the WooCommerce Sale price ($) field, that will be the price visitors see on the front end of the store. This field overrides the Regular price ($) value. If you’re not hosting a sale, leave that field empty so you don’t accidentally discount products.

If you have a plugin that helps you set up best-selling products, you can also use the [best_selling_products] shortcode to display the best-selling products in your WooCommerce store.

[best_selling_products limit="10" columns="4"]

The [top_rated_products] shortcode can also display the top-rated products in your WooCommerce store.

[top_rated_products limit="4" columns="2"]

Summary

WooCommerce shortcodes are powerful tools that enhance your online store’s functionality. Mastering these shortcodes allows you to customize product displays, manage the shopping cart, and optimize the checkout process.

Feel free to experiment with different shortcode combinations to find the perfect setup for your store. With these tools, you can create a dynamic and engaging WooCommerce site that meets your customers’ needs.

After setting up the perfect online store for your business, you’ll want to avoid a situation where your store gets attacked, is slow, or occasionally goes offline, affecting business.

The WooCommerce plugin can sometimes slow down WordPress sites, especially for large stores with many products. Fortunately, with Kinsta as your hosting provider for your WooCommerce store, you won’t need to worry about this.

The post Complete guide to WooCommerce shortcodes appeared first on Kinsta®.