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

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.


Solution:

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 -->

Related Wordpress search:

, , , , ,

Wordpress related questions and answers: