On the single product page for a variable product, multiple dropdowns display so that users can select their desired attribute choice.

In certain cases, you’d want them to follow the exact top-to-bottom attribute order while they’re selecting a specific variation. With that I mean that you want them to select the first attribute first, then the second, then the third… basically you want to disable the “next attribute select dropdowns” unless the previous select changes to a value that is not null.

Better shown in an image than said, so here’s the GIF, and with that the PHP/jQuery snippet. Enjoy!

On a single variable product page load with more than 1 attribute, all selects but the first are disabled. As soon as you select the first attribute, the second becomes enabled, and so on. If you change your mind and null one of the selects, the following selects will get disabled once again.

PHP/JS Snippet: Disable Next Attribute Dropdowns If Attribute Is Not Selected @ Variable Product Single Product Page

/** * @snippet       Toggle Attribute Selects @ Single Product * @how-to        Get CustomizeWoo.com FREE * @author        Rodolfo Melogli * @compatible    WooCommerce 5 * @donate $9     https://businessbloomer.com/bloomer-armada/ */ add_action( 'woocommerce_before_single_product', 'bbloomer_disable_variable_product_selects_unless_previous_selected' );function bbloomer_disable_variable_product_selects_unless_previous_selected() {	global $product;	if ( ! $product->is_type( 'variable' ) ) return; // exit if not variable	if ( count( $product->get_available_variations() ) < 2 ) return; // exit if only 1 attribute	wc_enqueue_js( "		function toggle_attributes() {			$('table.variations tbody tr').each(function(){				if ($(this).prev().find('td.value select').val()=='') {					$(this).find('td.value select').attr('disabled',true).val(''); // if previous has no value, disable and reset				} else $(this).find('td.value select').attr('disabled',false);			});		}		toggle_attributes();		$('table.variations select').change( function(){			toggle_attributes();		});	" );}

WooCommerce: Disable Attribute Select Unless Previous Is Selected (Variable Products) .

Navigate