WooCommerce – how do I disable attribute option menus until the one above is selected?

2 Views

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 the user has already selected an option from Option Menu 1

Read More

Example:

My Variable Product

  • Platform: Option Menu 1 (user must select platform, Mac|PC, for example, before they can proceed to…)
  • Version: Option Menu 2 (Full Version | Upgrade for example. Must be selected before…)
  • Shipping: Option Menu 3 (Boxed | Download)

If someone could even point me to the correct way to access these Option Menus with javascript/jQuery, I could try to take it from there.

Thanks for any help.

Post Views: 2

Related posts

Leave a Reply

1 comment

  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 -->
    <script type="text/javascript">
    <?php if ( ! empty( $available_variations ) ) { ?>

        jQuery(document).ready(function($) {

            <?php
                $loop = 0;
                foreach ( $attributes as $name => $options ) {
                $loop++;
            ?>
                $(function() {
                    $( "#<?php echo $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