Convert Woocommerce Attribute Dropdown to Clickable Text

2 Views

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: http://shop.nordstrom.com/s/vince-addie-sandal/3761939?origin=category

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.

Read More

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)
Post Views: 2

Related posts

Leave a Reply

1 comment

    1. The example site you provided is not a WooCommerce site (it’s not even WordPress);
    2. There’s a plugin which I’m sure you’ll find helpful: Woocommerce Radio Buttons; It turns drop-downs into radio buttons, which you can easily customize with just plain CSS; Here’s an example to show how radio buttons can be made to look like regular buttons:

    HTML:

    <ul class="donate-now">
<li>
    <input type="radio" id="a25" name="amount" />
    <label for="a25">$25</label>
</li>
<li>
    <input type="radio" id="a50" name="amount" />
    <label for="a50">$50</label>
</li>
<li>
    <input type="radio" id="a75" name="amount" checked="checked" />
    <label for="a75">$75</label>
</li>
<li>
    <input type="radio" id="a100" name="amount" />
    <label for="a100">$100</label>
</li>
<li>
    <input type="radio" id="other" name="amount" />
    <label for="other">other:</label>
</li>
<li>
    <input type="text" id="otherAmount" name="numAmount" />
</li>
</ul>

    CSS:

    .donate-now {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}

.donate-now li {
     float:left;
     margin:0 5px 0 0;
    width:100px;
    height:40px;
    position:relative;
}

.donate-now label, .donate-now input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.donate-now input[type="radio"] {
    opacity:0.011;
    z-index:100;
}

.donate-now input[type="radio"]:checked + label {
    background:yellow;
}

.donate-now label {
     padding:5px;
     border:1px solid #CCC; 
     cursor:pointer;
    z-index:90;
}

.donate-now label:hover {
     background:#DDD;
}

    Here’s a demo in jsfiddle.

    Please let me know if you need any further assistance.

    Edit

    Okay, so the existing plugin doesn’t fit your needs exactly, so I modified it a bit.

    1. Uninstall the previously installed WooCommerce Radio Buttons plugin;
    2. Download and install the modified plugin from here;
    3. Optional: Go to /wp-content/plugins/woocommerce-improved-radio-buttons/woocommerce/assets/frontend/css/ and edit the add-to-cart-variation.css file to your liking;

    If you’re interested to see how the code looks like, feel free to look inside.

    Let me know if this worked for you.