# Show Variation Options as Buttons

> Turns the variation dropdowns on product pages (size, colour and so on) into clickable buttons, keeping WooCommerce's own logic for prices, stock and images.

- Type: PHP
- Runs: Run everywhere
- Category: [WooCommerce](https://wpide.com/library/category/woocommerce/)
- Requires: WooCommerce
- Tags: woocommerce, variations, javascript, ux
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/woo-variation-buttons/

## Code

```php
add_action( 'wp_footer', function () {
    if ( ! function_exists( 'is_product' ) || ! is_product() ) {
        return;
    }
    ?>
    <style>
    .wpide-var-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
    .wpide-var-buttons button{padding:.45em .9em;border:1px solid #c3c4c7;background:#fff;color:inherit;border-radius:4px;cursor:pointer;font:inherit;line-height:1.2}
    .wpide-var-buttons button[aria-pressed="true"]{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor;font-weight:600}
    .wpide-var-buttons button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
    .wpide-var-buttons button:focus-visible{outline:2px solid #2271b1;outline-offset:2px}
    .variations select.wpide-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0 0 0 0)}
    </style>
    <script>
    jQuery( function ( $ ) {
        $( 'form.variations_form' ).each( function () {
            var form = $( this );
            function build() {
                form.find( '.variations select' ).each( function () {
                    var select = $( this ), wrap = select.siblings( '.wpide-var-buttons' );
                    if ( ! wrap.length ) {
                        wrap = $( '<div class="wpide-var-buttons" role="group"></div>' ).attr( 'aria-label', $( 'label[for="' + this.id + '"]' ).text() );
                        select.addClass( 'wpide-hidden' ).attr( 'tabindex', '-1' ).after( wrap );
                    }
                    wrap.empty();
                    select.find( 'option' ).each( function () {
                        if ( ! this.value ) { return; }
                        var option = this;
                        $( '<button type="button"></button>' ).text( option.text ).attr( 'aria-pressed', select.val() === option.value ? 'true' : 'false' ).prop( 'disabled', ! option.classList.contains( 'enabled' ) && option.disabled ).on( 'click', function () {
                            select.val( select.val() === option.value ? '' : option.value ).trigger( 'change' );
                        } ).appendTo( wrap );
                    } );
                } );
            }
            form.on( 'woocommerce_update_variation_values reset_data', function () { setTimeout( build, 0 ); } );
            build();
        } );
    } );
    </script>
    <?php
}, 30 );
```

## Notes

Unavailable combinations are greyed out, and the original dropdowns stay hidden in the page so other plugins keep working.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Show Variation Options as Buttons" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/