javascript jquery woocommerce wordpress

Convert Woocommerce Attribute Dropdown to Clickable Text

I’m building a WC website and I’d like to change the display of the attributes. Rather than display them as a dropdown form element, each attribute should be displayed as a text link. Here’s an example site that does it right with the shoe sizes:

I purchased the Variations Swatches and Images plugin for the site. It works for product sizing (it’s easy to predict product sizes, so I could make the images) but the product colors are custom for each item (Berry, Turquoise, etc). The end client isn’t saavy enough to generate an image of text for every color possibility, however.

I considered converting the dropdown to radio buttons (seen here on SO), removing the radio elements, and styling the labels, but the WP plugin that’s available doesn’t generate valid labels to click on. Admittedly, my JS knowledge is limited to basic scripts and tinkering, so building a custom thing would be hard…

Any ideas of where to go from here would be appreciated. Here’s what I’m considering:

  • Modifying the SO post from above to have valid labels and pray it works
  • Adding in color swatches for the shoes as colors or text every time
  • Leaving the colors as a drop down and asking client to work with it (not good)