List WooCommerce Products by Tags

Here is a quick way to list WooCommerce products by tags using a simple shortcode. To use it, simply place the following shortcode within your pages:

[woo_products_by_tags tags=”shoes,socks”].

I created a simple plugin to do the job. Simply copy and paste the code below in new file called “woocommerce-products-by-tags.php” within a “wp-content/plugins/woocommerce-products-by-tags” folder.

 

About the author

Remi Hey! My name is Rémi Corson, I'm a French WordPress Developer, I code stuff and I write from time to time ;-) Buy a coffee
Show your support

Related Posts

53 comments

  1. Ed:

    This is a wonderful to use!
    just one question, how would the code look like so that all products are next to each other in same style as if we would click on a tag in the site? (included clickable picture ext…)

    the original would be http://yourdomain.be/shop/product-tag/nameoftag/

    thx in advance
    Ed

  2. Peter Sejersen:

    Great addition to WooCommerce!

    Would it be possible to make something similar with product attributes? That would be really cool for creating great landing pages.

  3. Katy:

    Thank you so much for this code. You turned a long search into a quick fix!

  4. demlaip:

    Nice Code !
    Only Problem is: it only fetch the product images based on tags.

    will you please help us out in getting the shortcode for displaying product loop based on Tags at anywhere on webpage.
    the product loop I’m talking about is available right now at :http://goo.gl/LTVpa2

    It would be really helpful to get your response at earliest.

    Thanks,
    demlaip

  5. Maria:

    I seem to have issues, I’ve copied & pasted the code into the woocommerce-products-by-tags.php and then called the shortcode in one of my pages but it doesn’t read, it just reads the shortcode, that’s all. please help?

  6. Marlon:

    Is it possible to make the pictures clickable?

  7. kim:

    Hello – Thanks for the great plugin! I see the products listed but they do not link to the product page. How is this possible? Thank you

  8. kim:

    also, how would I modify the code to keep the product name centered above the thumbnail? Thanks!

  9. Rakesh:

    It’s awesome !
    Thank’s

  10. Jan:

    Thanks Remi, but I got following error when trying to add a tag on a product:

    Warning: Cannot modify header information – headers already sent by (output started at /home/www/xxxxx/wp-content/plugins/woocommerce-products-by-tags/woocommerce-products-by-tags.php:1) in /home/www/xxxx/wp-content/plugins/woocommerce/classes/class-wc-session-handler.php on line 63,

  11. Max:

    Thanks for this code, very cool. It seems similar to what I need to do in my project, but in this case I need to list products by custom field values for a given key. Do you know what I need for that process?

  12. timebinder:

    Great plugin to display highly related items through my site, but isn’t it supposed to also link to the respective product, rather than just display the products image?

    thanks
    Gavriel

  13. leodesigner:

    Hi Remi,
    I just purchased your plugin and it has been a life/time saver. I was just wondering if its possible for the results to include a link to the product as opposed to just its name and an image? Or is it supposed to be doing that already and I’m just doing something wrong. Any help would be appreciated. Thanks.

    – Leo

  14. profnimrod:

    Here is a suggested change that makes all the product images clickable:

    function woo_products_by_tags_shortcode( $atts, $content = null ) {
    // Get attribuets
    extract(shortcode_atts(array(
    "tags" => ''
    ), $atts));
    ob_start();

    // Define Query Arguments
    $args = array(
    'post_type' => 'product',
    'posts_per_page' => 100,
    'product_tag' => $tags
    );
    // Create the new query
    $products = new WP_Query( $args );

    $woocommerce_loop['columns'] = $columns;

    if ( $products->have_posts() ) : ?>

    have_posts() ) :
    $products->the_post(); ?>

    <?php endif;

    woocommerce_reset_loop();
    wp_reset_postdata();

    return '' . ob_get_clean() . '';
    }

    add_shortcode("woo_products_by_tags", "woo_products_by_tags_shortcode");

  15. rnbronstein:

    This didn’t work for me — any help? Do I need to use it in addition to your code? I’m trying to create another way of accessing the list of products — basically making it easier to parse. So having it clickable is key.

    Also, I can’t figure out how exactly to put in my own placeholder thumbnail. I specified $uploads, the file path, and the dimensions, but that didn’t work: echo ''; (I’m probably messing up something with all those commas…)
    Thanks in advance.

  16. BoTbird:

    Have you tested this with 3.9 yet?
    I’m really amazed there isn’t a plugin or a pre-existing built in solution for this.
    Thanks!

  17. cinders:

    Excellent plugin, the original code works though it will not allow the products to be selected or listing in column fashion only vertically down the page.

    So I tried the code that allows the products to be selected and got this outcome:

    http://www.sunviewblinds.co.uk/black-blinds/

    If anyone can offer a fix I would appreciate it as we would really like to get the products listed by tag and be able to be sorted by slug and choose how many columns they are listed by.

    Thank you in advance.

    Nathan

  18. Panchoo18:

    i was using it with no problem, and suddently show me this:

    Fatal error: Call to a member function plugin_url() on a non-object in /home/ivi0/caja22lr.com.ar/wp-content/plugins/woocommerce-products-by-tags/woocommerce-products-by-tags.php on line 59

    what´s the problem? thx

  19. xonek:

    Hi Remi !

    Amazing snippet and plugin and BIG THANKS for sharing it with us.
    I’m trying to use it in my website to display products on pages, but I have some issues. Is it possible to display the output in columns (by columns I mean the default woocommerce columns)? By using your code above I can display the products only in 1 column.

    Would be much appreciated if someone could help!

    Thanks

  20. Alaa:

    Hi Sir,
    I hope everything is good with you,
    Thanks for your nice plugin,
    Please,
    Do you know how can i make the following :
    Please, I need you help,
    Ex:
    The product category is: the product type (e.g Accessories)

    The product tag is: the city (e.g USA).

    I added these to the post if I check it.

    Now I need a modified code to filter the query by city and product type, How can i do that?.

    Best regards
    A.J.

  21. rogerg:

    Hi,

    I am trying to get a shortcode to display the products by tag. (In this case we are using the tag feature for the products brand names). I believe I have followed your instructions but the actual shortcode shows on the frontend and not the relevant products which we tagged. What have I done wrong?
    Regards,
    Roger

  22. jtibbles:

    Thanks for the tutorial. I ran in to issues regarding $woocommerce->plugin_url() …it didn’t know what $woocommerce was.

    Also how could I go about adding a previous and next page link to the bottom?

    Many thanks

  23. nandangse:

    Same Problem here, Can you please help me to get things work for me ?

    • jtibbles:

      nandangse I managed to do it using some information provided at http://callmenick.com/post/custom-wordpress-loop-with-pagination.

      Here is my solution – it’s a bit dirty because I’m using a none-restful / url friendly approach…

      1) Add this before query arguments:
      $paged = ( $_GET[‘page’] ) ? $_GET[‘page’] : 1;
      2) Add this to the query arguments:
      ‘paged’ => $paged,
      3) Here’s the dirty bit…under the endwhile put the following:

      1) echo ‘Prev‘; ?>

      <?php if($pagedmax_num_pages) echo ‘Next‘; ?>

      …you can clean up part 3 if you’re following a more standard approach ie http://www.yourdomain/somepath/page/1/ , where you can utilise the get_next_posts_link( ‘Prev’, $the_query->max_num_pages ) and get_previous_posts_link( ‘Next’ ) method mentioned on that link.

  24. popocat85:

    Hi, nice plugin :)
    you can create a list of only tags? For example in a shop of clothes there will be tags with link:
    shoes
    pants
    skirts
    clothes

    like to index… Tanks and sorry for my bad English.

    • popocat85:

      Hi, sorry for my English, I asked the wrong thing, because I have not read very well.

      The plugin is great!
      But I not have link to title product and image product, I try use: echo ''.get_the_title($product_id).''; but I do not know where paste it.

      The same problem I have (where and how to paste) whit code by "profnimrod" on April 6, 2014 at 9:22 pm .

      Maybe because I use wordpress 4.2.2.?

      Please, I need you help.
      Many thanks

  25. stefoosh:

    Hi Remi,
    This code was a godsend. Thank you so much!!
    My question now is how can I get the images sized properly? Currently all the images are showing up in different sizes and while they are aligned left, each single image is taking up the entire row. I’ve tried changing theshop_catalogue values around to try and get thumbnails but nothing is working. I would love to have them in grid style if possible, but will settle for just being able to size them all consistently! here’s the link so you can see what i’m talking about: http://aloha-couture.com/boutiques/birds-of-paradise/

    Thanks in advance!!

  26. Trynex:

    Hi, thx for code. I have one question.. Lets say I have 2 products. 1st has tags “London” and “trip”. The second has only the “London” tag. And they are both displayed even though i set up the list for tags London and Trip. But I need to display only when it has both of the tags.

    Thx for responce.

  27. genest:

    Nice
    But it’s not working if the tag include a space
    Example “Assiettes plates”
    Is there a solution?

  28. fusiontribal:

    I’ve tried the plugin from WP v.4.5.3 and I have this error:

    Fatal error: Call to undefined method WooCommerce::get_image_size() in /home/content/f/u/s/xxxxxxx/html/hosting/xxxxxxx/wp-content/plugins/woocommerce-products-by-tags/woocommerce-products-by-tags.php on line 57

    The line 57 refers to:
    echo get_the_post_thumbnail($loop->post->ID, ‘shop_catalog’);

    Anyone has idea about how to resolve this issue?

    By the way, Remi Corson should develop this plugin and sell it at codecanyon. Just think about.

  29. anton:

    Thanks for the code Remi. I used a variation of this together with the code from Bruno found here: http://bbird.me/listing-woocommerce-products-by-tags/

    How can you sort the listings by price descending or ascending?

    At the moment it sorts by title.

Leave a Reply