product tag shortcode

Adding a handy product tag navigation with shortcode

I think that WooCoomerce product tags are an underrated resource. They can offer that bridge across different categories in an eCommerce shop. In a well-organised shop product tags can keep people on your site – giving a better experience, lower bounce rates and increased sales.

What’s surprising is that there is little support for Woocommerce product tags, even at Woocommerce itself. There’s no standalone shortcode. It is possible to use the category shortcode with tag as an attribute but this may not be the best solution.

Simple product tag shortcode

If you want a simple and straightforward product tag shortcode then Category Tinymce now has that option. Not only can you display a list of product tags but you can do it in an image-based navigation. Just set an image for each tag and you have a great looking navigation menu to your tag pages.

The new shortcode offers a couple of attributes to help customise the output. You can set a limit on the number of product tags that are shown with number=””.

A more useful attribute is the product_tag=””. Here you can put in a comma-separated list of product tag ids. This gives you full control of what is displayed in your menu.

Product tag shortcode in action

You can see it in action at a web site that I’m putting together of predominantly cd sales. I’ve used the product tags as a way of organising the artists of the CDs. I could then call the tag id of the artists that I want to promote. See it at b-brave.co.uk in the Popular Music Artists. This menu was put together using the shortcode in Category Tinymce.

The shortcode is:

[ protagimmg ]

I added the product_tag=”” attributes so I could highlight the artists that I wanted to promote.

The shortcode has no styling so your are free to stlye up how you want. In this situation I used the follow CSS to put it into a grid of 4 columns.

.protagimmgmain{display:block;}
.protagimmgeach{display:inline-block;width:20%;vertical-align:bottom;margin:10px;}
.cattitle{font-weight:600;}

Then to make sure it looked great on mobile I used a media check and added the following CSS to give a 2 column display on smartphones,

@media only screen and (max-width: 600px) {
.protagimmgeach{display:inline-block;width:42%;vertical-align:bottom;margin:10px;}
}

Enjoy the updated version of Category Tinymce

If you have a lot of product tags it may get a little overwhelming but there is definitely a place for this sort of product tag shortcode in Woocommerce.

As I build out the store I’ll use product tags for authors and main actors and then I can build out tag menus for each using the product_tag attribute to promote those that are most popular with my web visitors.

I hope users of the pro version of Category Tinymce enjoy this new feature.

 

Spread the love
Posted in Blog.

Blog postings from the developer of Y Praise Digital. some thoughts and wonderings of a web developer of over 25 years experience.

Leave a Reply

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