Need an image for your WooCommerce Tags?

Have you run into a situation requiring an image for each of your WooCommerce tags? Lucky for you, so did we! We had a bunch of products and a bunch of categories, but we wanted to keep brands separate from actual categories, so rather than using subcategories under a parent of “Brands” we used tags. Hundreds of products later our client wanted to show an image on each of the tag pages — specifically the brand’s logo. Uh oh! No such option.

We could go through every single product, grab its brand tag, make a category and assign it to a parent category of “Brands” but that seems like a lot of extra work. This is especially true considering we actually liked the way the brands were displayed in a tag cloud on the front-end of the site.

Solution: the Taxonomy Images plugin

The taxonomy images plugin works with custom taxonomies and assigns a GUI option for attaching images to that taxonomy. In this case our taxonomy is a Product Tag. Implementing this takes two steps, installing/configuring the plugin and uploading images as well as setting up your WooCommerce tag template.

Setting up the plugin and uploading images

  1. Log in to your WordPress admin and choose Plugins > Add New
  2. Search for and install the “Taxonomy Images” plugin. Be sure to activate it after installing!
  3. Go to Settings > Taxnomy Images
  4. Check the “Product Tags” box and choose “Save Changes”

You should now see the option to upload an image beside every single product tag under Products > Tags. We’re half-way there already! Go ahead and upload an image for each tag as you would normally upload images in WordPress — be sure to select the “Associate with tag_name” button after uploading (where tag_name is your actual tag name). Update your tag and you’re almost good to go!

Configuring your WooCommerce Template

Now we need to inform WooCommerce that you wish to display the image on the single-tag page. This is a bit more involved and requires editing some code. You will also need FTP access to your WordPress install in order to adjust some template files.

Start by setting up your template file:

  1. Log in via FTP and navigate to your WordPress themes directory (wp-content/themes/{your_theme_name})
  2. Create a new folder called woocommerce if it doesn’t already exist (this folder contains all template overrides)
  3. Copy the tag page template into this folder. The tag page template is found under wp-content/plugins/woocommerce/templates/taxonomy-product_tag.php. But wait! There’s a trick here, it actually just pulls all content from wp-content/plugins/woocommerce/templates/archive-product.php, although we really want to override the tags only… not all product pages. To do this, copy the archive-product.php file from wp-content/plugins/woocommerce/templates into wp-content/themes/{your_theme_name}/woocommerce then rename it to taxonomy-product_tag.php

We’ve now set up an override template file that will override only product tags yet contains all the content we need. We now need to edit the template file to insert some code that will show your product tag images. Here’s how:

Open up your new template file (wp-content/themes/{your_theme_name}/woocommerce/taxonomy-product_tag.phpwith your favourite text editor.

Directly above the line that looks like this:

<?php do_action( 'woocommerce_archive_description' ); ?>

Insert the following:

<aside id="tag-brand-logo"><?php print apply_filters( 'taxonomy-images-queried-term-image', '' ); ?></aside>

Save the file and head to one of your single product tag pages (make sure it’s one that you’ve actually uploaded an image to!) and bask in the glory of having hacked WooCommerce to get your images where you wanted them.

You can also style your image with some CSS like this (for example):

#tag-brand-logo{ float:right !important; margin-top:-25px; }

Jordan is a computer, security, and network systems expert and a lover of all things web and tech. Jordan consults with project management for software companies. Jordan is a founder and managing partner at Websavers Inc.

6 Comments

  1. Ergi on February 16, 2015 at 10:19 pm

    Hello,
    I cant manage to make this work, I added the image to my tag and when looking my tag page I don’t see the image there, even if I see the source code I cant find anywhere it…

    Another thing that I want to mention is that beside this I am looking to do something else, and I don’t know if you can help me or not…

    What I want to do is that I want to create a page where it shows all of my tags with their respective images there, this should be clickable so when I click on the tag or the image it sends me to the tag page…

    Hope I explained it well…

    Is this something that I can do with your solution??? Or should I find another way to do this???

    Best Regards
    Thank You

    P.s
    I am looking to do this automated because I know that I can create manually all of this in html, but like this I have to add new line of codes everytime I add a new tag. Like this I risk to forget to add new tags time to time…



  2. james on February 7, 2014 at 8:59 pm

    is this still working in latest woo and wp?

    i followed instructions but im not seeing my tags change in my template, i even tried editing the woo templates directly.. seems that filter does not work now?

    the taxonomy plugin seems to work fine tho..!?



    • Jordan Schelew on February 10, 2014 at 4:50 pm

      Hi James,

      Are you using the new WooCommerce 2.1 version? I haven’t had a chance to test this with that just yet, so perhaps there’s a compatibility problem?

      -Jordan



  3. juanma on October 8, 2013 at 12:20 am

    hi jordan, i have tray to use this example in my woo, but it´s not working fine!

    can you explain about this line:

    regards
    juanma



    • Jordan Schelew on October 10, 2013 at 10:57 am

      It looks like the line didn’t make it through! Could you re-post that (or indicate which line it is rather than paste it in)?



  4. juanma on September 30, 2013 at 1:32 am

    great example jordan, i´ve been searching something like this plugin to achieve my results set out.
    thx juanma