WooCommerce: casilla de verificación para ocultar/mostrar campo de pago personalizado

Este fragmento podría ser muy útil por varias razones. Cuando necesite realizar una personalización avanzada del pago y sus campos, espero que me lo agradezca.

En el fragmento de hoy, agregaremos una nueva casilla de verificación y otro nuevo campo "oculto"; luego, si la casilla de verificación está marcada, el campo se mostrará; de lo contrario, desaparecerá nuevamente.

ANTES: la nueva casilla de verificación de pago no está marcada; por lo tanto, el nuevo campo muestra
DESPUÉS: la nueva casilla de verificación de pago está marcada; por lo tanto, el nuevo campo desaparece

Fragmento de PHP: agregue una casilla de verificación para ocultar/mostrar un campo de pago personalizado

/**
 * @snippet       Add a Checkbox to Hide/Show Checkout Field - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WC 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
add_filter( 'woocommerce_checkout_fields' , 'bbloomer_display_checkbox_and_new_checkout_field' );
  
function bbloomer_display_checkbox_and_new_checkout_field( $fields ) {
  
$fields['billing']['checkbox_trigger'] = array(
    'type'      => 'checkbox',
    'label'     => __('Checkbox label', 'woocommerce'),
    'class'     => array('form-row-wide'),
    'clear'     => true
);  
    
$fields['billing']['new_billing_field'] = array(
    'label'     => __('New Billing Field Label', 'woocommerce'),
    'placeholder'   => _x('New Billing Field Placeholder', 'placeholder', 'woocommerce'),
    'class'     => array('form-row-wide'),
    'clear'     => true
);
  
return $fields;
  
}
  
add_action( 'woocommerce_after_checkout_form', 'bbloomer_conditionally_hide_show_new_field', 9999 );
  
function bbloomer_conditionally_hide_show_new_field() {
    
  wc_enqueue_js( "
      jQuery('input#checkbox_trigger').change(function(){
           
         if (! this.checked) {
            // HIDE IF NOT CHECKED
            jQuery('#new_billing_field_field').fadeOut();
            jQuery('#new_billing_field_field input').val('');        
         } else {
            // SHOW IF CHECKED
            jQuery('#new_billing_field_field').fadeIn();
         }
           
      }).change();
  ");
       
}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir