Get a fast, conversion-focused WooCommerce theme in 2019. Switch to Shoptimizer.

Home Blog – eCommerce News, tips and tutorials WooCommerce Shortcodes – Add Buying Signals Anywhere On Your Site

WooCommerce Shortcodes – Add Buying Signals Anywhere On Your Site

WooCommerce shortcodes may not be familiar to everyone. Even if you have a WooCommerce store, it may be a feature you haven’t come across and don’t yet realise how useful they can be in sprinkling product references and buying call to action buttons throughout your site.

WooCommerce shortcodes are small code snippets which you can place anywhere in your site to display WooCommerce products or calls to action such as ‘Buy Now’ buttons. There are a multitude of uses for these and we wanted to incorporate some great examples directly within our Shoptimizer WooCommerce theme. But, they should of course work with any theme with WooCommerce installed.

Utilizing WooCommerce shortcodes to add the latest products to the homepage

The first obvious place where WooCommerce shortcodes come in handy is on your homepage. This is an ideal space to display a dynamically updated grid of your latest products. Once the shortcode has been added, you don’t need to edit it again.

It will automatically display the most recent products, giving your homepage a fresh new feel each time you add new items to your store.

This is the WooCommerce shortcode we use on the Shoptimizer homepage to display recent additions:

To describe each attribute:

  • Limit – the number of products to display
  • Columns – the number of columns. This should be based on the number of products being displayed.
  • Orderby – you can arrange these by date, id, menu_order, popularity, rand, rating and title.
  • Order – this is either in descending order (DESC), or ascending (ASC).
  • Visibility – the products viewable within the shop and search results.

Result:

This WooCommerce shortcode results in a neat grid of 8 products, divided into 4 columns. If you want this is very each to change into a grid of say, 3. You could adjust the limit value to 6 and the columns value to 3 to keep it looking even.

Using the latest products WooCommerce shortcode
Using the latest products WooCommerce shortcode

Displaying the most popular products using WooCommerce shortcodes

Just as you can show the most recent items, it is also possible to display your best selling products. This again is dynamically updated and is great to show seasonal popular gift ideas.

You can use the following WooCommerce shortcode for this:

Result:

Displaying the most popular products in your store
Displaying the most popular products in your store

Create a grid of sale items

Next up, we’re going to create a brand new page and call it ‘Men’s Sale Items’ – it’s going to list solely sale items with the Men category. This is what it looks like on our live theme demo. We want this page to automatically populate with every reduced price product item within the Men WooCommerce category.

I’m using this WooCommerce shortcode to do so.

I don’t have so many products in this category, so setting the limit to be 100 is more than enough and covers any additional items added later. The key additional variables are the on_sale=”true” and the category=”men” which lists only sale items within the aforementioned category. Leaving out the specific category selector name will simply display all sale items amongst every category. This might be a better fit for your particular WooCommerce store.

Result:

Displaying Sale items
Displaying Sale items

Using WooCommerce shortcodes to add products within a blog post

One aspect which is often overlooked is that WordPress is fundamentally a superb blogging platform. Many eCommerce stores make the mistake of not posting often enough or even not having a well defined content strategy in the first place. That’s not a conversation for this article but a quick and easy thing to do is add direct buying actions to products mentioned in a blog post.

If we take this article as an example – let’s say that it mentions three must-have jackets to buy this season. How would you go about adding these specific products to the article.

The first step is to find the unique ID of each product. You can do this by going to Products and hovering over the item in question.

Hover over a product to reveal the ID
Hover over a product to reveal the ID

You can see in the example above that this particular product’s ID is 677. Do the same for two more products and write down the IDs for each.

When thinking about WooCommerce shortcodes for this, we’ll simply create a new one based on the previous example but explicitly referencing these three product IDs.

Result:

Displaying specific products within a blog post
Displaying specific products within a blog post

Adding just a single product to a blog post (includes custom CSS styling)

If we want to add just a single product to a post, it’ll take up the entire width of the content – which would look a bit strange. I would like to float it to the right and let the text to flow around it.

Firstly, the WooCommerce shortcode, with just one product looks like this.

And now some custom CSS which you can add to: Appearance > Customize > Additional CSS. Note the presence of a media query, which means the style kicks in on viewports above 768px. So, on smaller screens, the product will be full width.

Result:

The result of this, looks like the screenshot below. You can also see it live on this post on the Shoptimizer demo site.

Adding a single product to a blog post - result of custom CSS
Adding a single product to a blog post – result of custom CSS

Adding a product call to action – just the buy button

If you don’t want to display the entire product there is a way to just display the buy button. On the same post at the very bottom, you can see how it looks within the Shoptimizer WooCommerce theme.

The WooCommerce shortcode for this is simply:

You once again just swap in the ID for the product you want to display.

Result:

Displaying just the product call to action button
Displaying just the product call to action button

In Shoptimizer, it automatically picks up the button colors set within the Theme Options and adds a nice shadow which lifts it off the page and provides definition compared to the other elements.

Page Shortcodes

One page which doesn’t get added by default in WooCommerce is the Order Tracking page. You’d need to create this yourself, by yes, using a WooCommerce Shortcode.

In Shoptimizer you can do this by creating a new page called Order Tracking, and adding a new shortcode block to the content. This is the shortcode to include:

You’d also change the Template dropdown on the right hand side to Full width. The result will look like this:

Order Tracking in WooCommerce
Order Tracking in WooCommerce

Summary

We can see that WooCommerce shortcodes are extremely useful snippets of functionality which would benefit any store owner using this platform. So how are you using WooCommerce shortcodes? If you have any favourites include them in the comments below.

About Simon: Designer, developer and pixel pusher until things are just right. Interested in modern, functional design with a focus on speed, clean typography and conversions. Enjoys whitespace and strong coffee.
I have bought lots of WP themes before but this is the first time I have had such great support. They fixed my problem within 24 hours. No worries. No fuss. No having to tell my customer they will have to wait. That means a lot to me.
affinityfordesign
buyer of Broker WordPress Theme

See our products

Leave a Reply

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

Latest Updates

{"cart_token":"","hash":"","cart_data":""}