guillermorangel
3/28/2014 - 8:08 PM

Tutorial: Woocommerce: Display Dynamic Content For Each Product Variation

Tutorial: Woocommerce: Display Dynamic Content For Each Product Variation

jQuery(window).load(function(){
  
    // get the specific select element by id #model
    jQuery('select#model').change(function() {    
        var value = "";
        
        // get the option that has been selected
        jQuery( "select#model option:selected" ).each(function() {
            // get the value data-attribute, prepend it with "model"
            value += "model-" + jQuery( this ).val();
            // the variable value will now be identical to the id of one of the wrapping custom_variation divs
        });
        
        // Hide all custom_variation divs
        jQuery( '.custom_variation').css( 'display', 'none' );
        // Display only the custom_variation div witht the specific id
        jQuery( '.custom_variation#' + value ).css( 'display', 'block' );

    });

});