Como añadir un campo de confirmación del email en WooCommerce

Como todos sabemos, cuando un usuario introduce sus datos en la página del checkout en WooCommerce para realizar una compra, se le pide el correo electrónico porque ahí le llegan todos los emails con los datos de su cuenta y de sus pedidos. ¿Pero que pasa si introducen mal su dirección de correo sin darse cuenta? Que no les llegará ninguna notificación y se pueden poner nerviosos…. Y, creedme, pasa más de lo que nos podemos imaginar. Por eso, algunos de nuestros clientes nos piden que introduzcamos en el checkout un campo de confirmación de la dirección de correo electrónico; ya sabéis, les obligamos a que metan su dirección de correo electrónico 2 veces y, que se confundan 2 veces ya sería demasiado ¿no?

Para poder hacerlo, instalamos el plugin gratuito Flexible Checkout Fields. Además, os viene bien conocer este plugin porque os dejará pedir más datos al usuario en el checkout, añadiendo los campos que consideréis precisos. Este plugin permite: cambiar el nombre de los campos, cambiar el orden de los campos, añadir nuevos campos y añadir validaciones a los campos.

Cómo añadir un campo para que el cliente confirma su dirección de correo electrónico en WooCommerce

1.- Tras instalar el plugin, en el menú lateral izquierdo del backoffice, nos dirigiremos a WooCommerce > Checkout Fields.

2.- En la pestaña de facturación (billing), añadiremos un nuevo campo de texto de tipo «Single Line Text».

3.- Después, lo ordenaremos para que quede justo debajo del campo de dirección del usuario.

4.- Guardaremos cambios.

5.- Para editar el nuevo campo y indicar si es obligatorio, añadir condiciones y validaciones, haremos clic sobre el nombre del campo.

6.- Se abrirán una serie de opciones divididas en pestañas. En la primera pestaña, la de ajustes generales, marcaremos el campo como obligatorio (required).

7.- Después, nos tendremos que dirigir al archivo functions.php de nuestro tema hijo y añadir este código:

/**
 * Comparar campo de confirmación de email con el email de facturación
 */
class WPDesk_FCF_Validation_Confirm_Field {
    /**
     * Field to compare with validated field.
     *
     * @var string
     */
    private $field_to_compare;
    /**
     * WPDesk_FCF_Validation_Confirm_Field constructor.
     *
     * @param string $field_to_compare .
     */
    public function __construct( $field_to_compare ) {
        $this->field_to_compare = $field_to_compare;
    }
    public function hooks() {
        add_filter( 'flexible_checkout_fields_custom_validation', array( $this, 'register_custom_validation' ) );
    }
    /**
     * Register custom validation.
     *
     * @param array $custom_validation .
     *
     * @return array
     */
    public function register_custom_validation( $custom_validation ) {
        $custom_validation[ 'field_confirmation_' . $this->field_to_compare ] = array(
            'label'    => sprintf( __( 'Compare with %1$s', 'wpdesk' ), $this->field_to_compare ),
            'callback' => array( $this, 'validate' )
        );
        return $custom_validation;
    }
    /**
     * Validate.
     *
     * @param string $field_label Field label.
     * @param string $value Field value.
     */
    public function validate( $field_label, $value ) {
        $field_to_compare_value = sanitize_text_field( $_POST[ $this->field_to_compare ] );
        $valid = $field_to_compare_value === $value;
        if ( ! $valid ) {
            wc_add_notice( sprintf( __( 'Invalid %1$s value.', 'wpdesk' ), '<strong>' . $field_label . '</strong>' ), 'error' );
        }
    }
}
$fcf_validation_confirm_field = new WPDesk_FCF_Validation_Confirm_Field( 'billing_email' );
$fcf_validation_confirm_field->hooks();

8.- Ahora podremos volver a la página WooCommerce > Checkout fields (o recargarla si ya estamos en ella). Y, en la pestaña de ajustes avanzados (Advanced), podremos seleccionar como método de validación que el campo sea igual que el campo de email de facturación.

9.- Guardaremos cambios y ¡listo!