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