As the name suggests, shortcodes are small bits of programming code that perform specific functions with minimal effort. They simplify the process of adding features and customizations to websites, especially those built with content management systems like WordPress.
As snippets of code, shortcodes are often a single word or a collection of simple words separated by underscores and enclosed within square brackets—resulting in something like [woocommerce_cart]. They can be inserted into pages, posts, theme files, and various widgets to accomplish all kinds of tasks and design functions.
For instance, you can create a [recent-post] shortcode to insert your blog’s most recent post in the area where the shortcode is placed.
One of the main benefits of WordPress shortcodes is that they remove the need to write (or even understand) the underlying HTML, CSS, or PHP code that makes them work. As such, their simplicity is especially helpful for non-programmers to customize websites.
How WooCommerce shortcodes work
Widely known as the preeminent ecommerce toolkit for WordPress, WooCommerce is installed as a WordPress plugin to help shop owners, merchants, and entrepreneurs build online stores with features to improve product displays, payment options, shipping methods, and inventory tracking.
Shortcodes also come with attributes that identify particular product features. For instance, the best_selling attribute allows merchants to display their best-selling products.
In WooCommerce’s own shortcode documentation, it shows how you can combine the limit, columns, and best_selling attributes to display products that meet those criteria in the desired layout.
There are many ways to use combinations of shortcodes to your advantage, but before you can start blasting them all over your site, you must first integrate WooCommerce into your shop.
How to Add A Shortcode in WooCommerce
The first step is to create (or navigate to) a post or product page where you want to insert a WooCommerce shortcode.
To create a new post from your WordPress Admin Dashboard, select Post > Add New.
Alternatively, you can also edit an existing post or page where you want the shortcode displayed by navigating to the post from your dashboard.
Once you’re on the page editor, click on the plus sign (+) in the top left-hand corner to activate the block inserter.
When the block inserter panel is displayed, scroll until you find the shortcode icon under the Blocks tab, or simply search for it in the search box.
After placing the shortcode block, the next step is to write or paste a shortcode into the field.
You may be using the Gutenberg block editor on your site. With the classic WordPress editor, you simply need to add the shortcode in between square brackets, for example, [woocommerce_product_filter].
To add a product limit shortcode, you can type [products limit=”-1″] into the field.
While entering a positive number will limit the number of posts to that particular value, entering a value of “-1” will display all of the products in a WooCommerce shop.
WooCommerce has its own specific shortcodes as well. For instance, [woocommerce_cart] will display the contents of an active visitor’s WooCommerce cart.
If the user doesn’t have any items in the cart, it notifies them accordingly.
Necessary WooCommerce Shortcodes
There are four shortcodes that must be on your website for it to function normally as a WooCommerce shop. Conveniently, however, these shortcodes are automatically added to your website’s pages as part of the WooCommerce setup process.
- [woocommerce_cart] displays the content of the user’s cart.
- [woocommerce_checkout] displays the checkout page for users to complete the transactions they initiated.
- [woocommerce_my_account] shows a user’s account page with customer details.
- [woocommerce_order_tracking] displays the order tracking page or form.
Together, these requirements ensure that your site has a cart, a checkout, a user account page, and a way for people to track their orders.
Parameters and attributes
In addition to the various attributes available, parameters are also an important part of WooCommerce shortcodes. They allow you to determine things like the quantity of products to show, in addition to customizing their type. This is key for controlling a page’s elements and structure in order to create a certain aesthetic.
Adding a parameter to a shortcode is simple. All you have to do is append an equal sign (=) after the attribute’s name, followed by the parameter’s value in quotation marks.
For example, parameters like [products limit=”2″ category=”appliances”] would ensure that only two products are displayed from the appliances category.
WooCommerce Product Shortcodes
Since products are the epicenter of the best ecommerce platforms, product shortcodes are among the most widely used in WooCommerce. They provide shop owners with the flexibility to display their products in a manner they deem fit, offering support for product tags, random sorting, and customizable pagination.
WooCommerce products shortcodes also come with versatility and an array of attributes, such as IDs, categories, and SKUs (stock-keeping units).
Of course, many shortcodes overlap and belong to more than one designation, so it can be a bit challenging to delineate them into distinct groups.
Content and Product Category
These are shortcodes that deal with individual products and how their corresponding content is displayed. They facilitate the addition and display of products within similar categories.
- [product_category] simply displays products in the same or specified category.
- [product_categories] displays all of your product categories. The key distinction here is that it only lists the product categories and not the products themselves.
Some of the product category attributes you can apply to the shortcode include:
- ids, which allow you to display specific categories according to their IDs. For instance, [products _categories ids=”3, 4, 5″].
- hide_empty, which toggles between 0 and 1 to display or hide empty categories without products in them. The default is 1, which hides empty categories.
- parent, which only displays top-level categories. As a result, it will cause the child categories of a particular parent ID to be displayed.
Since the [products] shortcode displays the online shop’s products, it’s important to consider the attributes that alter the visual appearance on the page.
- limit controls or constrains the number of products that can be displayed when they are listed. While [-1] is the default (which shows all products in the category), the number specified dictates the quantity of products to be displayed.
- columns signifies the number of columns of products to show, with a default value of 4 columns.
- paginate dictates how the flow of products will be separated by pages. This can be toggled on and off, but its default status is false, so you must set it to true if you want it activated. It is commonly used in combination with the limit attribute.
- category is used in conjunction with [product_category], which allows grouping of products with similar features. This attribute can be expressed as a list of category names, IDs, or slugs.
This shortcode attribute allows you to sort and arrange products using various options, giving merchants a way of highlighting certain products and their unique features at different times and circumstances.
- title is the default orderby mode. In this instance, the list is sorted according to product titles or names.
- id allows you to sort using the unique product identifier, such as its post or product ID. It is similar to sorting by using the primary key of a database record.
- date sorts by identifying the date the product was published on your website.
- popularity is sorted by the popularity of the products, which is determined by the number of purchases.
- rating arranges the listing according to the average product rating of the products.
- order is used to indicate whether the order of elements in the category is ascending (ASC) or descending (DESC). For example, [product_categories limit=”4″ orderby=”name” order=”ASC”] will display product items in the category in ascending order by their name.
Many shortcode attributes are too broad to be lumped into a single category.
- tag is similar to category, but in this case, it uses the specified tag slug to retrieve products.
- tag_operator is used to compare tags with the following options:
- AND displays the products from all chosen tags.
- IN is the default tag_operator behavior and will show only the products from the selected or chosen tags.
- NOT IN is the opposite of IN and shows products that are not in the selected tags.
- attribute is similar to the two previous attributes but targets products based on a specified attribute slug.
- cat_operator is used to compare category terms. As a result, it incorporates several options and operators:
- AND enables you to display all products that are contained in a specified category.
- IN is the default of the cat_operator value. It is an operator that displays the products that belong within the chosen category.
- NOT IN will display the products that don’t belong in the chosen category.
- visibility displays products by virtue of their selected visibility attribute with the following available options:
- visible is the default visibility option, making products visible on both shop and search results.
- catalog excludes search results, displaying only those visible in the shop.
- search is the opposite of catalog, showing only those products visible in search results.
- hidden operates as its name suggests, by hiding products from both shop and search results. As such, products with this attribute can only be accessed directly through individual URLs.
- featured displays products marked as featured.
- class enables you to use custom CSS code to change the output by adding an HTML wrapper class.
- terms is used in conjunction with attribute. It is fashioned as a comma-separated list of attribute terms.
- terms_operator is used to make a comparison of attribute terms with the following options:
- AND enables you to display all products from the chosen attribute.
- IN is the default terms_operator and works to display products that have the chosen attribute.
- NOT IN will display the products that don’t belong in the chosen attribute.
Special product attributes
Some attributes are related to products but cannot be used alongside content attributes.
- best_selling tells WooCommerce to show only the best-selling products. The value must be set to True for it to work.
- on_sale causes WooCommerce to display on-sale products and also requires a value of True to function.
WooCommerce Shortcode Example
In WooCommerce’s documentation, Scenario 4 provides a good illustration of how shortcodes are brought to life and implemented.
Scenario 4 – Newest Products
In order to display the newest products added to your WooCommerce catalog, your shortcode will depend on each product’s Post (or Product) ID.
To ensure the Post/Product ID is displayed in the correct order, simply go to your WooCommerce Product screen that displays all the products you’ve created.
From your WordPress Admin Dashboard, select Products > All Products.
When you hover over any product, its product ID should appear.
Your product list may be in descending order of publication by default. Be aware that product IDs are generated by the system incrementally but not strictly in sequential numerical order. For example, two consecutive products could have ID values of 400 and 397.
To execute the same shortcode in the WooCommerce example, apply the following shortcodes and attributes:
[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"]
When the post or page is executed, it will display four products sorted in descending order according to when they were published or created.
Conversely, if you decide you want to display them in ascending order instead, you can simply change the order parameter to ASC. Your shortcode syntax would then look like this:
[products limit="4" columns="4" orderby="id" order="ASC" visibility="visible"]