1. Home
  2. Knowledge Base
  3. WooCommerce Product Add-Ons Ultimate
  4. Display hidden fields as disabled
  1. Home
  2. Knowledge Base
  3. Product Page
  4. Display hidden fields as disabled
  1. Home
  2. Knowledge Base
  3. Front End
  4. Display hidden fields as disabled
  1. Home
  2. Knowledge Base
  3. Conditions
  4. Display hidden fields as disabled
  1. Home
  2. Knowledge Base
  3. Advanced
  4. Display hidden fields as disabled

Display hidden fields as disabled

Maybe you want to display fields that would otherwise be hidden (because they’re conditional on another field’s value). This code snippet keeps all fields visible, but disables and greys out fields that are unavailable:

<?php
/**
* Display hidden fields as disabled
*/
function prefix_disable_hidden_fields() { ?>
<script>
jQuery( document ).ready( function( $ ) {
function disableHiddenFields(){
$( 'form.cart' ).find( '.pewc-hidden-field' ).each( function() {
// Display and disable hidden fields
$( this ).show().css( { visibility: 'visible', opacity: 0.5 } ).find( '.pewc-form-field' ).prop( 'disabled', true );
});
}
$( '.pewc-form-field, .pewc-radio-form-field' ).on( 'change update', function() {
$( 'form.cart' ).find( '.pewc-item' ).each( function() {
// Reset fields
$( this ).css( { opacity: 1 } ).find( '.pewc-form-field' ).prop( 'disabled', false );
});
// Set a delay to let the plugin do its stuff first
setTimeout( disableHiddenFields, 150 );
});
disableHiddenFields();
});
</script>
<?php }
add_action( 'pewc_after_product_fields', 'prefix_disable_hidden_fields' );

Here’s how to add a snippet.

Was this article helpful?

Related Articles