Display WooCommerce Product Color Swatches On Product Listing Pages

May 14, 2015

WooCommerce Product Color SwatchesFor the last few WooCommerce sites I’ve built, clients have asked for a way to display their WooCommerce product color swatches on the product archive and category pages.  I did some cursory research and found that nobody had done it.  Initially I decided to just take a shortcut and use ACF to display the product colors, but this quickly got tiresome, so I decided to buckle down and do the research to figure it out.  Here is my solution, enjoy!

WooCommerce Product Color Swatches Snippet

Please note that this snippet assumes that you are using the WooCommerce Variation Swatches and Photos plugin


3 Responses to “Display WooCommerce Product Color Swatches On Product Listing Pages”

  1. paul

    Hey thanks for this snippet, unfortunately it’s not working for me, it’s displaying only one option per product and they are all #fffff. Any idea if the new version of woocommerce has damaged this approach? Thanks a lot

  2. paul

    Hey Andrew, thanks for your reply. Unfortunately I am working on a local environment and can’t send you a link. However I think I know what my issue is, I’m not using the custom colors setting, I am using the already set up Taxonomy Colors and Images. So of course it wouldn’t work as you are calling the custom colors. I don’t really know how to tweak your code to make it work, though. I’d aprecciate it if you could point me in the right direction!
    Thank you!

Comments are closed.

https://leachcreative.com/wp-content/themes/Leach-Creative-v5/images/unnamed.png" class="pull-left">

© Leach Creative. All rights reserved.
Made with love in Charlotte, North Carolina.