WooCommerce Shortcodes Explained – More Individuality for Your WordPress Shop


A really attractive online shop can be set up relatively quickly with WordPress, WooCommerce, and a professional shopping theme. The shop will come preloaded with a variety of configuration options. And if these are not enough, a bit of programming skills will open up virtually endless additional options for customization. The so-called WooCommerce shortcodes offer another option for users to create a more individualized design of their shops.

This post will explain more about the concept of WooCommerce shortcodes and how to use them (with or without an additional plugin). At the end of the post, you will find two possible use cases as well. By the way: you can also create new shortcodes for your WooCommerce shop if you have some basic PHP skills.

Important: A complete list of WooCommerce shortcodes will be published here on our blog shortly. That list will also include a detailed description of the various shortcodes.


What are Shortcodes?

First of all, shortcodes are not WooCommerce-specific, but are a basic WordPress feature, and have made our lives a lot easier ever since WordPress 2.5. Shortcodes are a type of macro, with which a specific function is executed within pages or posts.

WordPress comes with a few (very few) shortcodes as standard, and most plugins and themes are offered with a set of shortcodes as well. Users therefore have a lot more options for content editing that the WordPress Editor can provide. And all that without any programming skills.

The WordPress Codex describes how to use shortcodes, and how to create your own with minimal PHP skills. Have a look at the posts Shortcode and Shortcode API in the Codex. The article WordPress Shortcodes: A complete Guide can be found at smashingmagazine.com and provides plenty of information.

Let’s have a closer look at the topic by way of the Standard WordPress shortcodes gallery for image galleries, and caption for image captions.

Simple Shortcodes

Shortcodes are generally written in square brackets. The simplest form of a shortcode is its name in square brackets, e.g.:

This shortcode displays all images associated with a page or an article via the image library as a gallery.

Shortcodes with Parameters

Shortcodes can also have parameters. In the case of the gallery shortcode, the images in the gallery can be sorted according to specific criteria. That is what the parameters order and orderby are for.

The images are ordered by upload date in descending order from new to old.

Shortcodes with Content

Meant are shortcodes with an opening and closing tag, just like in HTML elements. For example:

The caption shortcode is such a shortcode with content, which will be used by WordPress when inserting images from the image library into a post or page. Putting it simply, the image and the image caption are the content specified between the opening tag and the closing tag.

Create Your Own Shortcodes

WordPress wouldn’t be WordPress if there weren’t a plethora of options to extend the system. The Shortcode API allows you to create virtually any shortcode for use in your pages and posts as often as you want – and all you need are some basic PHP and HTML skills.

There are just two things that are absolutely necessary:

  • a so-called callback function, which will provide the code to be executed, and
  • a call-up of the function add_shortcode, which generates a shortcode from the callback function. add_shortcode comes complete with two parameters: the name of the shortcode and the name of the callback function.

This code must then be added to the functions.php of your theme or child theme.

A simple shortcode, which could output a small ad in a blog post, would look like this:

The relevant CSS styles can be added in the child theme or via plugin:

Where the advert text is a little longer, it may make sense to use the shortcode version with enclosing tags. You can then do without the header parameters, as these will simply be included in the enclosed text.

shortcode advert wrap

The same shortcode, but this time for a longer advert text, enclosed by an opening and closing tag:

The WordPress Codex and the post linked above at smashingmagazine.com describes the creation of complex shortcodes with parameters and content in detail.

Shortcodes in Widgets

WordPress can interpret shortcodes in posts, pages, or custom post types as standard. An additional filter type for the function.php allows you to also use shortcodes in sidebar widgets (see description in the WordPress Codex post on shortcodes).

Alternatively, this functionality can be enabled using the plugin shortcodes in sidebar widgets. The article in Smashing Magazine linked above also describes the use of shortcodes in comments and excerpts.

The WooCommerce Shortcode Plugin

Those of you, who have been working with WooCommerce for a while, may remember the WooCommerce shortcode button, which used to be provided in the visual editor. The button allowed easy adds of existing shortcodes without having to read through all the documentation. Unfortunately, the button was removed in WooCommerce 2.2.

You don’t have to do without that functionality if you want it back, because it can now be found in the plugin WooCommerce Shortcodes. It remains to be seen if WooThemes will do proper maintenance upkeep on this plugin. Once the plugin is installed, you should see the shortcode button at the top of the text editor in the button bar:

woocommerce shortcodes
The WooCommerce shortcodes button in the editor.

WooCommerce Shortcodes in Use: Two Use Cases

Now that you have all these WooCommerce shortcodes, what will you do with them? We have put together two use case scenarios for you using the standard theme Twenty Thirteen, so that you will have no problems trying things out for yourself.

A Shop Advert in a Blog Post

Our first example is an advert for the shop, which will be displayed in a blog post. We have made sure that it is properly recognizable as an advert, as that is required for an editorial post. Let’s have a look at the screenshot first:

advert woocommerce shortcode
An advert in a blog post, implemented using WooCommerce shortcode.

… and here is the code we placed in the blog post:

We used the WooCommerce shortcode recent_products to output the three latest products from the shop sorted by date. The shortcode recent_products displays newly added products, sorted according to various criteria. The sorting is done using the WordPress-specific parameters order and orderby, which are explained in detail in the WordPress Codex. You can specify the number of products to be displayed per page ( per_page) and the number of columns ( columns).

The whole thing will then be entitled “New arrivals in the shop”, and will have the note “advert”. The advert also has a frame around it to better distinguish it from the rest of the content.

A Sale Page for Your WooCommerce Shop

The second example shows a Sale page, i.e. a static page displaying your current special offers in the shop. You can even specify that page as your frontpage via the Customizer.

First of all, here is the screenshot:

sale woocommerce shortcode
A Sale page, implemented using WooCommerce shortcode.

… and here is the code:

We have created a static page for this example, entitled “Sale – Everything Must Go!” – and have inserted the above code via the editor. The WooCommerce shortcode sale_products is used here to output three Sale products. We have placed some formated text above and below to make the whole thing a bit more attractive.

The shortcode sale_products displays newly added products. Here too, you can sort the products via the parameters order and orderby, and can specify the number of products to be displayed per page ( per_page) and the number of columns ( columns).

As you can see, the WooCommerce shortcodes can do quite a lot. In most cases, programming skills are not needed, or only some very basic knowledge. So you see, you are not limited to the WooCommerce template specifications, or those given by the theme of your choice.

So lastly, we are looking forward to hearing about your ideas. How are you using the WooCommerce shortcodes? We look forward to your comments!

Post Sharing

Author Avatar

Life is great with family, WordPress, and a little chocolate. MarketPress supporter, blogger, and co-founder of WordPress Meetup Franconia – and last but not least: Google is my friend and helper.

Similar Posts


New Plugin: Slack Connector - Connect WordPress, WooCommerce and Slack

by Christina Fuchs

Initially we merely wanted to optimize our own Slack-processes. With automated notifications from our MarkettPress shop, the blog and our forums. The resul ...

Read more

Role Based Prices for WooCommerce is available again: Different prices for different customer groups

by Christina Fuchs

You want different prices for different customers and users of your online shop? E.g. for subscribers or wholesaler? Or do you need bulk prices? A lot of o ...

Read more

Inpsyde is the first WordPress.com VIP partner in Germany

by Christina Fuchs

Automattic has given us the title of WordPress.com VIP Service Partner, the first in Germany, Austria and Switzerland. Worldwide, there are only eleven com ...

Read more

WooCommerce Weekly Review #7: Woo vs Magento, shop security and customer confidence

by Christina Fuchs

What is a WooCommerce shop in practice? And how do you protect it against external attacks? This and more in our Weekly Review. WooCommerce vs Magento: ...

Read more


1 Comment

  1. #1

    Do you know of any way to render a list of WooCommerce products with a combination of tags, categories and or attributes? For example show all products with a category of shoe and a tag or attribute of red

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">