Introduction
I was recently working on a project, building a website for a company that manufactures rustic furniture. They wanted a nice way for customers to select different variations of their products. Rather than WooCommerce's default dropdown menus, they wanted something that provided the customers a little more visualization, and just an overall better experience building out the piece of furniture they would like built. To do this I replaced WooCommerce's default variation dropdown menus with custom buttons.
How?
I try my best to stay away from adding unnecessary plugins to websites I manage so I wanted to add this functionality myself. After digging around, I came to the conclusion that the best way to accomplish this was to just keep WooCommerce's variation pickers.
I realized that, while certainly not ideal, the easiest and most reliable solution was to to leave the default pickers in place and add buttons that update the dropdowns, taking advantage of all the functionality WooCommerce already had in place.
Getting started
To start things off I copied WooCommerce's default variable.php found in plugins/woocommerce/templates/single-product/add-to-cart to my theme so I could make my modifications. I then added my custom code right beneath the <table></table> with the default variation picker.
Adding the buttons
Next, I added the custom buttons and gave them two data attributes that get used to update the default dropdown menus. The first one is data-variation-selected, which is what gets used use to select the appropriate dropdown menu since there will be more than just one. The second attribute is data-variation-value, which is what gets used to select the appropriate dropdown option. Below is simplified version of the code I added.
In my project I used the Sage starter theme which allows you to use blade templates, so the PHP you will see isn't using standard PHP syntax.
mytheme/woocommerce/single-product/add-to-cart/variable.blade.php
For the attribute images I just created a few ACF repeater fields, and added some logic to find the appropriate image for each attribute. I could have added an image field to the global attribute values, but the way things were setup on this site it made more sense to do via ACF.
Updating the dropdown when a button is clicked
Next I made a function that will get triggered anytime one of the custom variation buttons is clicked.
javascript
Now every time one of the custom buttons is clicked the selectElement function runs and updates the appropriate dropdown menu.
single-product.js
Hiding buttons when not allowed in variation
Lastly, I need to make sure that buttons weren't showing when they weren't allowed in the current variation of the product. For example, the company sells different lengths of bathroom vanities. Longer countertops allow double bowls, while shorter lengths only allow one bowl. So if the customer says they want a countertop with a double bowl, we need to make sure that they can't also select a shorter countertop.
To do this I added event listeners to each button, inside the querySelectorAll shown above, that listens for changes to form.variations_form.cart and hides buttons that aren't not in the attributes dropdown for the.
single-product.js
See it in action
https://luxcretedesign.com/product/bathroo-vanity-with-concrete-countertop
