Woocommerce - How Do I Disable Attribute Option Menus Until The One Above Is Selected?

On the Product page of a Variable Product, I'd like to use javascript/jQuery to control the attribute drop down menus. Basically, I want Option Menu 2 to be selectable only when th

Solution 1:

Finally worked this out...

You need to copy: '/wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.php'

to: '/wp-content/themes/my_theme/woocommerce/single-product/add-to-cart/variable.php'

That's the file that generates the Select menus for Variable Product attributes, so you're creating a version to edit for your theme.

After the </form> on approx. line 107 add the following:

<!-- MySite Menu Additions --><scripttype="text/javascript"><?phpif ( ! empty( $available_variations ) ) { ?>jQuery(document).ready(function($) {

            <?php$loop = 0;
                foreach ( $attributesas$name => $options ) {
                $loop++;
            ?>
                $(function() {
                    $( "#<?phpecho$name?>" ).change(function() {
                        if ($(this).val() != "") { // Because "Choose an option..." has a value of ''
                            $(this).closest( 'tr' ).next().find( '.value-variable' ).prop( "disabled", false );
                        }
                        else
                        {
                            $(this).closest( 'tr' ).nextAll().find( '.value-variable' ).prop( "disabled", true );
                            $(this).closest( 'tr' ).nextAll().find( '.value-variable' ).val( "" );

                        }
                    });
                });

            <?php } //End foreach ?>

        });

    <?php } ?></script><!-- End: MySite Menu Additions -->

That works for me. Hope it helps someone.

I got additional help on this here (might also be useful):

Enable Sequential Select Menus when you don't know the IDs