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!
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();
});
" );
}
I love this code. Can we hide all the variable options and display: none? So only the first option will be visible, and the next option will appear once the user selects the previous option.
Thank you! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Dear author,
It seems that the plugin stopped working in the recent Woocommerce versions (I think 6.0). We would be grateful if you could check.
Thank you,
AT
Works for me, sorry! Try switching theme and disabling plugins (except Woo) temporarily, and see if the snippet works?