Monday, March 28, 2022

WooCommerce Shortcodes Cheatsheet

WooCommerce Shortcodes Cheatsheet

WordPress added support for shortcodes around 15 years ago. You can use shortcodes to easily add complicated functionality to your website which otherwise would have required you to write a lot of code yourself. Basically, shortcodes are short text snippets whose behavior depends on some more complicated code written in the backend.

While WordPress has some default shortcodes, a lot of plugins also create their own custom shortcodes to help you customize webpage content more effectively. WooCommerce is one of those plugins. In this post, we will give you a quick guide on how to use WooCommerce shortcodes.

The Products Shortcode

Product Categories Shortcode

Related Products Shortcode

WooCommerce Cart and Checkout Shortcodes

WooCommerce Add to Cart Shortcodes

Shortcode Purpose
[products] display a list of product thumbnails
[product_categories] display a list of product categories
[related_products] display a list products related to the current page
[woocommerce_cart] show the user's cart
[woocommerce_checkout] show the checkout form for the current cart
[add_to_cart] add an item to the cart

The Products Shortcode

You can use the [products] shortcode in WooCommerce to display a list of products. It becomes a lot more powerful with the help of various arguments or attributes.

Attribute Usage
limit Specify the number of products to show.
columns Specify the number of columns in which to display the products.
paginate Specify if you want to split the products across multiple pages.
category Specify a comma-separated list of categories from which you want to display the products.
tag Specify a comma-separated list of tags from which you want to display the products.
ids Only display products with specific post IDs.
skus Only display products with specific SKUs.

Lets see some examples of the [products] shortcode in action. We will use a variety of attributes to control which products or how many products are shown. The below shortcode will display six products from our store in two rows and three columns. The products will be sorted alphabetically by default.

WooCommerce Product ShortcodeWooCommerce Product ShortcodeWooCommerce Product Shortcode

You can also use the paginate attribute in order to limit the vertical space taken up by products. Keep in mind that paginate has to be used alongside limit for it to work.

WooCommerce Paginated Product ShortcodeWooCommerce Paginated Product ShortcodeWooCommerce Paginated Product Shortcode

You also have control over the order in which products are shown on the webpage by using the orderby and order attributes.The orderby attribute can have several possible values listed below.

Value Sorting Criteria
title Sort products based on their title.
date Sort products based on the date when they were published.
id Sort products based on their post ID.
popularity Sort products based on the number of sales.
rating Sort products based on the average product rating.
rand Display the products in a random order.

You can set the value of order attribute to ASC or DESC in order to display products in ascending or descending order.

WooCommrce Products Shortcode PopularityWooCommrce Products Shortcode PopularityWooCommrce Products Shortcode Popularity

There are three more attributes that you can use to show the best selling, top rated or currently on sale products.

Attribute Usage
top_rated Show the most highly-rated products. Not meant to be used with best_selling or on_sale.
best_selling Show the most selling products. Not meant to be used with top_rated or on_sale.
 on_sale Only show products which are currently on sale. Not meant to be used with top_rated or best_selling.
WooCommerce Product Shortcode BestsellingWooCommerce Product Shortcode BestsellingWooCommerce Product Shortcode Bestselling

You can also use a class attribute in the product shortcode to add a wrapper around the list of products with that specific class name in order to customize their appearance.

Product Categories Shortcode

The [product_categories] shortcode is helpful if you want to display product categories on a webpage. There are several attributes that you can use with this shortcode.

Attribute Usage
ids Show only specific categories based on ids.
limit Specify the number of categories to display.
parent Only display child categories of a specific parent.
orderby Specify the sorting order for categories. This can be name, id, slug or menu_order.
order Specify whether the categories are shown in ascending or descending order.
columns Specify the number of columns to display the categories.
hide_empty Hide empty categories or categories with zero products.

Lets see an example of using the [product_categories] shortcode to only display child categories under the main toy category.

WooCommerce Product Category ShortcodeWooCommerce Product Category ShortcodeWooCommerce Product Category Shortcode

Almost all of these attributes will also work with the [product_category] shortcode which shows a list of products from a particular category using the category attribute. Here is an example to display 4 products under the toys category.

WooCommerce Toy Product CategoryWooCommerce Toy Product CategoryWooCommerce Toy Product Category

The default is to sort the products by name and create 4 columns.

Related Products Shortcode

Another shortcode that I would like to mention here is the [related_products] shortcode which is used to display a list of related products. You can pass three attributes to this shortcode called limit, columns and orderby that we have discussed already. We have used it in a tutorial about creating customized WooCommerce product pages.

Related Products ShortcodeRelated Products ShortcodeRelated Products Shortcode

WooCommerce Cart and Checkout Shortcodes

Some WooCommerce shortcodes integrate important functionality into your website to display the cart, checkout or account page. Every WooCommerce-based website will require three different shortcodes: [woocommerce_cart], [woocommerce_checkout] and [woocommerce_my_account] somewhere on the website to function properly. These will usually be added automatically by WooCommerce.

Shortcode Page
woocommerce_cart Display a cart section on the webpage.
woocommerce_checkout Display a checkout section on the webpage.
woocommerce_my_account Display the user account section on a webpage.
woocommerce_order_tracking Display the order tracking form.

As an example, adding the [woocommerce_checkout] shortcode on any page will output something similar to the image below

WooCommerce Checkout ShortcodeWooCommerce Checkout ShortcodeWooCommerce Checkout Shortcode

You can also show an entire product page anywhere you like using the [product_page] shortcode which accepts an id or sku attribute to determine which product to show.

WooCommerce Add to Cart Shortcodes

There is also an [add_to_cart] shortcode to display a functional Add to Cart button on your website. The product that you want to add to the cart can be identified by using either the id or sku attribute.

Attribute Usage
id Identify the product using given id
sku Identify the product using given sku
show_price Specify whether to display product price or not
quantity Specify the number of products to add to cart
class Add a custom class to the cart button
style Apply some CSS styling to the button

You can use the [add_to_cart_url] shortcode to simply output the relative URL to add an item to cart. Here is an example:

Another useful WooCommerce shortcode is [shop_messages] which gives you the ability to display any WooCommerce related notifications on non-WooCommerce pages. One such example would be displaying a message about adding products to cart after someone clicks on the Add to Cart button.

Final Thoughts

WooCommerce shortcodes provide you an easy way of adding dynamic functionality like products suggestions natively without using any 3rd party plugins. You can add the shortcodes to any post or page that you like. We have used some of them ourselves for customizing the WooCommerce shop page.

Also don't forget that you can also use WooCommerce blocks to achieve a lot of this functionality when editing posts in the Gutenberg editor.

WooCommerce Gutenberg BlocksWooCommerce Gutenberg BlocksWooCommerce Gutenberg Blocks

However, knowing about all these shortcodes is still helpful and might come handy every now and then.


No comments:

Post a Comment