Hide second vraiation dropdown until first is selected

Yea, that is possible to do – but will take some customization. Probably just a little bit of custom JS.

You wouldn’t happen to have the JS snippet handy, would you?

Or able to point me in the right direction?

I don’t, sorry. I did find this with a quick google search though: https://stackoverflow.com/questions/22080663/woocommerce-how-do-i-disable-attribute-option-menus-until-the-one-above-is-sel

Though:

1) You don’t need to override that template. Can just enqueue the custom JS with a hook.
2) That code disables the further down attributes, and you need to hide: https://api.jquery.com/hide/ then show: https://api.jquery.com/show/

If you aren’t sure how to code this, you may need to hire a developer for a quick customization:

– https://jobs.wordpress.net/
– https://codeable.io/
– https://woocommerce.com/experts/?project-scope%5B0%5D=1819

Thank you so much for your help Caleb.

Here’s what I eventually did that works for me:

1. Create JS file: product-attributes.js with content:

   jQuery(document).ready(function($) {
   		$("#ID-ATTRIBUTE-2").closest('tr').hide();
   		$(function() {
   			$( "#ID-ATTRIBUTE-1" ).change(function() {
   				if ($(this).val() != "") {
   					$(this).closest( 'tr' ).next().show();
   				}
   				else
   				{
   					$(this).closest( 'tr' ).next().hide();
   				}
   			});
   		});
   	});

2. Upload to /wp-content/themes/CHILD-THEME/js/product-attributes.js
3. Add code to functions.php file:

   function product_attributes_enqueue_script() {
   	if (is_singular( 'product' )) {
   		wp_enqueue_script( 'product-attributes', get_stylesheet_directory_uri() . '/js/product-attributes.js', array(), '', true );
   	}
   }
   
   add_action( 'wp_enqueue_scripts', 'product_attributes_enqueue_script' );