Variations As Buttons in WooCommerce

This code changes the default WooCommerce variation drop down menu options into buttons. The code dynamically changes drop down menus of all attribute variations options to buttons like you see in in this screenshot and the demo video.

The download folder also includes some basic CSS to style each variation button differently based on selection.

Also works with subscriptions for WooCommerce like this :

Variation subscriptions for WC

Demo Video

Shows how the code written for WooCommerce by Brad Dalton changes the default variations drop down menu options to clickable buttons.


There’s 3 simple steps :

  1. Upload the folder named woocommerce and file named var-buttons.js to your child theme folder.
  2. Copy and paste the PHP code to the end of your child themes functions file.
  3. Copy and paste the CSS to the end of your child themes style.css file.

Download Folder

Related Solutions