Adding Woocommerce shortcodes to your WordPress webshop can be a great way to add extra functionality and style to your pages. Woocommerce offers a variety of shortcodes that can be used to add products, pricing, buttons, and more to your webshop.
What are shortcodes?
WordPress shortcodes are a powerful feature for doing cool things with little effort. You can do just about anything with them. With shortcodes, embedding interactive elements or creating complex page designs is as easy as inserting a single line of code.
For example, if you want to add a gallery, all you have to do is insert the following code:
[gallery ids="729,732,731,720"]This will produce a gallery with the image IDs listed. It will have 4 columns and their maximum size will be ‘medium’ (as defined by WordPress). There is no need for ugly HTML code.
Using shortcodes eliminates the need for complicated scripts. Even if you have little to no programming experience, you can effortlessly add dynamic content using shortcodes.
All shortcodes are compatible with most page builders like Gutenberg, Elementor and Visual Page Composer.
They are very popular with WordPress developers because they help tremendously in automating content creation and design. Shortcodes are to WordPress programmers what Macros are to data analysts, or Keyboard Shortcuts are to professional graphic designers.
In a nutshell, Shortcode = Shortcut + Code.
Woocommerce also makes extensive use of shortcodes. This will allow you to call up different elements of Woocommerce on the pages and posts where you want.
Since version 3.6, WooCommerce includes several product blocks for Gutenberg. These are easier to configure than traditional shortcodes.
Examples of a Woocommerce shortcodes
There are dozens of Woocommerce shortcodes. But of course, they all relate to the functions of your webshop.
For example, wouldn’t it be nice to show products in your blog post? Suppose you write an article about how beautiful winter can be, the ice and snow, the landscapes, skiing, …
Now, what products would you want to show in this article? Especially warm clothes for the winter. You could do that with the following shortcode :
[products limit="8" columns="4" category="winter, ski" cat_operator="OR"]
As you can see, the basic shortcode is "products". This shortcode has a number of parameters that you can set yourself:limit = how many products should be shown
columns = how many columns you want to use
category: which product category you want to select from (in this case 2, separated by a comma)
cat_operator: make a choice between “and” or “or”.
In short : make a selection of 8 products from the product category “winter” or “ski” and show them in 4 columns.
As you can see, shortcodes are not static but dynamic : in fact, you can modify them through parameters to show a different result each time.
All Woocommerce shortcodes
There are several groups of shortcodes in WordPress. The first group are the “page shortcodes”.
We list the most important shortcodes below. For a complete overview, you should take a look at all woocommerce shortcodes page.
Woocommerce page shortcodes
These codes can be used on different pages of your website. They each call a basic function of woocommerce:
shopping cart
[woocommerce_cart]When you use this, the shopping cart is displayed. A listing of all the products you have virtually placed in your shopping cart.
Checkout
[woocommerce_checkout]
Order tracking form
The shortcode “woocommerce order tracking” allows you in the backend (as a user) to check the status of your shipment. This must of course be entered by the operator of the webshop.
[woocommerce_order_tracking]
Woocommerce product shortcodes list
The [products] shortcode is one of our most robust shortcodes. You can do a huge amount with it. The example above is a practical application of it.
The [products] shortcode allows you to display products based on post ID, SKU, categories, attributes, with support for pagination, random sorting, and product labels.
So the [products] shortcode can replace the “older” shortcodes such as [featured_products], [sale_products], [best_selling_products], [recent_products], [product_attribute], and [top_rated_products].
So we need to start working with the different attributes or properties of the [products] shortcode.
Below is a list of the most important ones :
- limit : number of products to show
- columns : number of columns to show
- paginate (false or true) : sets the pagination on or off. To be used together with “limit
- orderby : sorted on a certain parameter (date, id, menu_order, popularity, edge (coincidence), rating, title).
- skus : a list of product sku’s or stock keeping units (a unique identifier of a product)
- ids : a list of products based on the ID of a product
- category: a list of categories of products separated by a comma
- cat_operator : use the comma in the category parameter with “and” or “or”.
- tag : a list of tags, separated by comma
- order : sort ascending (ASC) or descending (DESC)
- class : a css class that you can add yourself
- on_sale : filters the products with a discount
- best_selling : selection of the best selling products
- top_rated : selection of the products with the most positive ratings
Some examples :
[products limit=”4” columns=”2” category=”bathing-clothes”]Display 4 products from the category “bathing clothes” in 2 columns.
[products limit=”6” columns=”3” ids=”1,2,3,4,5” orderby=”popularity”]Show 6 products in 3 columns of products with ID 1 or 2 or 3 or 4 or 5 and sort by popularity
[products limit=”4” columns=”4” category=”swimsuit, bikini” cat_operator=”OR” orderby=”title” class=”watersports”]Show 4 products in 4 columns of the category “swimsuit” or “bikini” and sort by title. Pass the output a css class “watersports”.
As you can see above, you can do quite a lot with this shortcode.
product search : searching for products
The product search function is included by default with the woocommerce plugin. The following shortcodes can be used for this purpose :
[woocommerce_product_search] : activates the products search function
Use this shortcode to display a text field that displays matching results while searching.
By default it shows the product titles, a short description for each entry, the prices of the products and it also shows the “Add to cart” buttons for each entry.
You can use it anywhere on your site and allow your customers to easily search and add products to the cart.
In addition, you have the following shortcodes that you can use wherever and whenever you want :
[woocommerce_product_filter] – displays a live product search filter
[woocommerce_product_filter_attribute] – displays a live product Attribute Filter.
[woocommerce_product_filter_category] – displays a live product Category Filter.
[woocommerce_product_filter_price] – displays a live product Price Filter.
[woocommerce_product_filter_tag] – displays a live product tag filter.
[woocommerce_product_filter_sale] – shows a live filter for products with discounts.
[woocommerce_product_filter_reset] – shows a button to clear all live filters.
[related_products limit=”12″] – displays related products
Maybe it’s worth making another separate post around the product search and filter options. 👍
product category shortcodes
There are two :
[product_category] : shows the products of a certain category (is actually already done by the “products” shortcode)
[product_categories] : shows all product categories
What parameters can you pass to these shortcodes ? (they are almost identical to the “products” shortcode)
- ids : list of id’s of the categories you want to select (separated by comma)
- limit : how many categories do you want to show
- columns : the number of columns you want
- hide_empty : if true, it hides the categories that have no products.
- order_by : sort by name, id , slug or menu_order
- parent : show only the categories of a certain main category.
- order : sort ascending (ASC) or descending (DESC)
Some examples :
[product_categories limit="4" columns="4" hide_empty="true"]Show 4 categories in 4 columns and each category shown must have at least 1 product
[product_categories limit="8" columns="2" order="DESC" order_by="title"]Show 8 categories in 2 columns and sort them by title descending (i.e. from z to a).
Add to cart button
Sometimes you don’t want to show the full product data on a page but only the “order” button of a certain product. You can do that by using the shortcode below:
[add_to_cart id=”694″] : the “ID” parameter is the unique ID of the product in question
Woocommerce blocks for Gutenberg
Since the introduction of Gutenberg as the default text editor of WordPress, the above shortcodes are still present but can be replaced by so-called Gutenberg blocks.
The following blocks are present by default when installing Woocommerce :
- Featured products: Select and display a single product in a new “high-impact” format. Control the alignment of the text, show or hide the price and description, add a color overlay, change the call of the button to action, specify a custom height, or overwrite the product photo.
- Individual, hand-picked products: Search and display multiple products of your choice in a grid.
- Bestsellers/top-rated: Display a grid of your best-selling products, filterable by category.
- Newest products: Show a grid of your newest products, filterable by category.
- Selling products: Show a grid of products for sale, filterable by category.
- Products with specific attributes or conditions: Show products that have been assigned multiple or specific attributes.
- Filter products based on price and attributes (properties).
Interesting WordPress plugins with all kinds of woocommerce shortcodes
Besides the standard blocks in Gutenberg, you can also use plugins to make even better use of your arsenal of woocommerce shortcodes in your website. The principle is quite simple : by installing the plugin, you get extra shortcodes at your disposal which you can then use as you like on different pages.
This plugin helps you to add some extra functionality to your woocommerce site in the form of a “wish list”. You activate the functionality by adding the shortcode on the pages where you want to activate the funcionality.
By default, the login and subscribe functionality of WordPress and Woocommerce is quite “rudimentary”. With this plugin you create “sexy” forms to login and register. Again, you use the shortcodes provided where you paste them into the code.
This Woocommerce shortcodes plugin centralizes all woocommerce shortcodes in an interesting way. And adds additional shortcodes to optimize but also personalize the experience of your webshop customers.
This plugin allows you to have “wish lists” created by your visitors. This allows them to come back later and still order.You call the command “add” to your wish list via shortcode.
FAQ
What are WooCommerce shortcodes?
WooCommerce shortcodes are a great way to add content to your WooCommerce store without having to write any code. Shortcodes can be used to add products, product categories, checkout forms, and more. Shortcodes are easy to use and can be inserted into any post or page on your site.
