Monday, December 10, 2018
WooCommerce

How to use WooCommerce product shortcode

Take advantage using WooCommerce product shortcode

How to use WooCommerce product shortcode

WooCommerce is a complete ecommerce solution. Although in strictly terms it is a plugin, it’s much more than that.

There are plenty of WooCommerce related plugins. This way you can add all kind of functionalities to your digital store, customizations and much more.

One of the greatest tools WooCommerce has to offer is the ability of using shortcodes. There are so many of them so will cover here only the most important, used and useful. The WooCommerce product shortcode.

First of all, let’s start learning how to use a shortcode. If you are familiarized with shortcodes you can skip to the next section to know everything about WooCommerce product shortcode.

How to use a shortcode in WordPress

A shortcode basically is a word you type in any page of a website. WordPress recognizes any word written within the square brackets as a shortcode.

A shortcode looks like this [do-something].

The above shortcode will give the instruction to WordPress to run the do-something function, which is typically provided by plugins or themes.

To enter a shortcode you can simply type it in text editor with the square brackets. You’ll have to find the square brackets in your keyboard for doing it manually.

Fortunately many plugins integrates with WordPress visual editor so you can easily push the button and it will insert the shortcode for you.

There are some more advanced shortcodes that passes variables to the function, like this:

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ]

This shortcode tells WooCommerce to show four products in four columns on a same row, the most popular products that are currently on sale. It also adds a CSS class “quick-sale” for further customization.

Okay, now that we’re getting in this, let’s talk about WooCommerce products shortcodes:

Using WooCommerce products shortcode

As you might already know, every product shortcode starts with the word “product”. But if you enter [product] and publish nothing’s going to happen.

You need to be more specific in telling WooCommerce what you want to do. So you must pass some more information for the shortcode to work.

These are the available parameters that must be specified when using the WooCommerce product shortcode:

  • limit – The number of products to display.
  • columns – The number of columns to display.
  • orderby – Sorts the products displayed by the entered option. One or more options can be passed by adding both slugs with a space between them. Available options are:
    • date – The date the product was published.
    • id – ID of the product.
    • menu_order – The Menu Order, if set.
    • popularity – Number of purchases.
    • rand – Randomly order the products on page load.
    • rating – Average product rating.
  • category –category slug, if more than one separated by comma.
  • cat_operator – Operator to compare category terms. Available options are:
    • AND – Will display products that belong in all of the chosen categories.
    • IN – Will display products within the chosen category.
    • NOT IN – Will display products that are not in the chosen category.
  • order – States whether the product ordering is ascending (ASC) or descending (DESC)
  • class – Adds an HTML class so you can custom CSS.
  • on_sale – Retrieve on sale products.
  • best_selling – Retrieve best selling products.
  • top_rated – Retrieve top rated products.
  • visibility – Display products based on the selected visibility. Available options are:
    • visible – Products visible on shop and search results. This is set by default.
    • catalog – Products visible on the shop only, but not search results.
    • search – Products visible in search results only, but not on the shop.
    • hidden – Products that are hidden from both shop and search, accessible only by direct URL.
    • featured – Products that are marked as Featured Products.
  • ids – Comma separated list of Post IDs.
  • skus – Comma separated list of SKUs.

Let’s see some examples:

This shortcode will display featured products in two rows, with two products in each one:

[products limit="4" columns="2" visibility="featured" ]

If you simply want to display some specific items you just need to grab their ID and include them in shortcode like this:

[products limit="4" columns="2" ids=”43, 56, 58, 73” ]

The following shortcode will display the four newest items aligned in one row. Using orderby=”id” and order=”DESC” will show latest added items in descending order:

[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"]

This shortcode will display all product categorized in “hoodies” and “tshirts” in two rows and four products each:

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

If you want to display every product that is not in these categories, you should use the cat_operator argument, with “NOT IN” value:

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

The WooCommerce product shortcode gives a wide range of possibilities to display items. You can use them at will by combining any of the variables available.

Please take note that some are not compatible with others. Refer to WooCommerce documentation for more details.


Now that you’ve learned how to use WooCommerce product shortcodes, you are ready to take advantage of this powerful tool.

Things are much easier using shortcodes, this way you can build your online store with much more freedom.

Setting your pages with shortcodes instead of using the default WooCommerce pages will be very easy.

I hope this guide helped you in some way.

If you liked, please leave a comment and share your thoughts with everybody.

Seba Rossi
the authorSeba Rossi
Experienced Web Editor with more than 1500 published articles. Passionate about Web development and with advanced knowledge of SEO, amateur guitarist and lover of tasty beer with the company of good and old friends.

Leave a Reply