Personalizar los campos del checkout en WooCommerce

La página de checkout en WooCommerce se puede personalizar para mejorar la experiencia del usuario. WooCommerce permite agregar, quitar y reorganizar los campos del formulario de pago utilizando filtros y acciones.

Agregar campos personalizados al Checkout

Añadiremos dos nuevos campos:

• billing_num_dni: Un campo de texto para el número de identificación.
• billing_type_dni: Un conjunto de opciones de radio con los valores «DNI» y «NIT».

 'radio',
        'label'    => __( 'Tipo de Documento', 'woocommerce' ),
        'options'  => [
            'DNI' => __( 'DNI', 'woocommerce' ),
            'NIT' => __( 'NIT', 'woocommerce' )
        ],
        'required' => true,
        'class'    => [ 'form-row-wide' ],
        'priority' => 20
    ];

    // Campo de número de documento
    $fields['billing']['billing_num_dni'] = [
        'type'        => 'text',
        'label'       => __( 'Número de Documento', 'woocommerce' ),
        'placeholder' => __( 'Ingrese su número de documento', 'woocommerce' ),
        'required'    => true,
        'class'       => [ 'form-row-wide' ],
        'priority'    => 25
    ];

    return $fields;
} );

Eliminar un campo del Checkout.

Si no queremos mostrar un campo en el checkout, podemos eliminarlo con unset(). En este caso, eliminamos la segunda línea de la dirección de facturación:

 
Cambiar la posición de un campo
Los campos en WooCommerce se ordenan con la propiedad priority. Cuanto menor sea el número, más arriba aparecerá el campo.
Por ejemplo, para mostrar el campo «Teléfono» antes que «Correo Electrónico»:

 
Guardar los campos personalizados en el pedido
Para que los valores ingresados en billing_type_dniy billing_num_dnise guarden en el pedido, usamos woocommerce_checkout_update_order_meta:
update_meta_data( '_billing_type_dni', sanitize_text_field( $data['billing_type_dni'] ) );
    }

    if ( ! empty( $data['billing_num_dni'] ) ) {
        $order->update_meta_data( '_billing_num_dni', sanitize_text_field( $data['billing_num_dni'] ) );
    }

    $order->save_meta_data();
}, 10, 2 );

 
Mostrar los campos en la administración de WooCommerce
Para que el administrador pueda ver estos datos en la página del pedido, los agregamos en la sección de facturación:
get_meta( '_billing_type_dni' );
    $numDni  = $order->get_meta( '_billing_num_dni' );

    if ( $typeDni ) {
        echo '
' . __( 'Tipo de Documento:', 'woocommerce' ) . ' ' . esc_html( $typeDni ) . '
';
    }

    if ( $numDni ) {
        echo '
' . __( 'Número de Documento:', 'woocommerce' ) . ' ' . esc_html( $numDni ) . '
';
    }
} );

Con estos métodos, podemos agregar nuevos campos personalizados al checkout, eliminarlos y reordenarlos según nuestras necesidades. También aseguramos que los datos se guarden correctamente y sean visibles en la administración de WooCommerce.
Si necesitas más ejemplos o tienes alguna duda, ¡pregunta con confianza!





Related posts:
No related posts.