Cómo editar los tipos de campos personalizados en WooCommerce

WooCommerce, la herramienta para e-commerce de los creadores de WordPress, es una de las plataformas más versátiles a la hora de ofrecer soluciones para tu tienda online.

Buen ejemplo de ellos son los campos personalizados que podemos añadir a la página de «checkout» al finalizar un pedido. En este artículo vamos a explicar cómo implementarlos con código.

Pero antes de ver cada campo vamos a mostrar lo útil que puede ser las personalizaciones con un ejemplo.

Añadir el campo CIF/NIF/NIE en la página de Checkout

No os voy a contar como hacerlo debido a que Fermando Tellado lo cuenta muy bien en su artículo: Cómo añadir el CIF/NIF/NIE en WooCommerce

Lo que no viene en ese artículo es como añadirle una pequeña ayuda debajo del campo y eso se hace con el atributo description que tiene cada campo.

Imaginaros que queréis añadir que debajo del campo aparezca una leyenda que indique por ej. «Este campo es necesario si quieres una factura válida ante la Administración».

Tendrías que añadir al array el texto en el atributo description tal que así:

function woo_custom_field_checkout($checkout) {
    echo '<div id="additional_checkout_field">';
    woocommerce_form_field( 'nif', array(
        'type' => 'text',
        'class' => array('my-field-class form-row-wide'),
        'required' => true, // ¿El campo es obligatorio 'true' o 'false'?
        'label' => __('NIF / CIF'),
        'placeholder' => __('Ej: 12345678X'),
        'description' => __('Este campo es necesario si quieres una factura válida ante la Administración'),
), $checkout->get_value( 'nif' ));
        echo '</div>';
}
add_action( 'woocommerce_after_checkout_billing_form', 'woo_custom_field_checkout' );

Y el resultado sería el siguiente.

Actualización importante: Si tienes HPOS activado en tu tienda WooCommerce, este método ya no es válido. Para garantizar la compatibilidad con HPOS y evitar problemas de guardado de datos, te recomiendo leer nuestra publicación donde te explicamos cómo añadir el campo de DNI/CIF/NIF en WooCommerce compatible con HPOS: Cómo añadir el campo de DNI en WooCommerce compatible con HPOS.

Tipos de campos personalizados en Woocommerce

Text Box

woocommerce_form_field("my_textbox", array(
    'type'              => 'text',
    'class'             => array('form-row-wide my-textbox'),
    'label'             => 'Textbox Field',
    'placeholder'       => 'Placehoder text',
    'required'          => true,
    'default'           => '',
    'description'       => ''
), $checkout->get_value( 'my_textbox' ) );

Checkbox

woocommerce_form_field("my_textbox", array(
    'type'              => 'checkbox',
    'class'             => array('form-row-wide my-checkbox'),
    'label'             => 'Checkbox Field',
    'description'       => 'A short description of this checkbox',
    'default'           => '',
    'description'       => ''
), $checkout->get_value( 'my_textbox' ) );

Textarea

woocommerce_form_field("my_textarea", array(
    'type'              => 'textarea',
    'class'             => array('form-row-wide my-textarea'),
    'label'             => 'Textarea Field',
    'custom_attributes' => array( 'rows' => 10, 'cols' => 10 ),
    'default'           => '',
    'description'       => ''
), $checkout->get_value( 'my_textarea' ) );

Select

woocommerce_form_field("my_select", array(
    'type'              => 'select',
    'class'             => array('form-row-wide my-select'),
    'label'             => 'Dropdown',
    'options'           => array( '1' => 'Option 1' , '2' => 'Option 2', '3' => 'Option 3' ),
), $checkout->get_value( 'my_select' ) );

Radio

woocommerce_form_field("my_radio", array(
    'type'              => 'radio',
    'class'             => array('form-row-wide my-radio'),
    'label'             => 'Radio',
    'label_class'       => 'radio-box',
    'options'           => array( '1' => 'Option 1' , '2' => 'Option 2', '3' => 'Option 3' ),
), $checkout->get_value( 'my_radio' ) );

Pasword

woocommerce_form_field("my_textbox", array(
    'type'              => 'password',
    'class'             => array('form-row-wide my-textbox'),
    'label'             => 'Password',
    'placeholder'       => '',
    'required'          => true,
    'default'           => '',
    'description'       => ''
), $checkout->get_value( 'my_textbox' ) );

input type=“hidden”

woocommerce_form_field("my_hidden_field", array(
    'type'              => 'hidden',
    'class'             => array('form-row-wide my-hidden-field'),
    'label'             => 'Hidden Field',
    'placeholder'       => '',
    'default'           => '',
    'description'       => ''
), $checkout->get_value( 'my_hidden_field' ) );

Si deseas personalizar por ejemplo el campo de tipo hidden, insertaríamos los siguientes:

function wc_form_hidden_field( $field, $key, $args, $value ){
 
    $defaults = array(
        'label'             => '',
        'id'                => $key,
        'class'             => array(),
        'input_class'       => array(),
        'custom_attributes' => array(),
        'default'           => '',
    ); 
    $args = wp_parse_args( $args, $defaults );
 
    // Custom attribute handling
    $custom_attributes = array();
    if ( ! empty( $args['custom_attributes'] ) && is_array( $args['custom_attributes'] ) )
        foreach ( $args['custom_attributes'] as $attribute => $attribute_value )
            $custom_attributes[] = esc_attr( $attribute ) . '="' . esc_attr( $attribute_value ) . '"';
 
    $field = '<p class="form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $args['id'] ) . '_field">';
 
    $field .= '<input type="hidden" class="input-text ' . esc_attr( implode( ' ', $args['input_class'] ) ) .'" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" value="' . esc_attr( $value ) . '" ' . implode( ' ', $custom_attributes ) . ' /></p>';
     
    return $field;
 
}
add_filter( 'woocommerce_form_field_hidden', 'wc_form_hidden_field', 10, 4 );

El html resultante sería el siguiente:

<p class="form-row form-row-wide my-hidden-field" id="my_hidden_field_field">
    <input type="hidden" class="input-text " name="my_hidden_field" id="my_hidden_field" value="">
</p>

En añadir campos en la página de pago puedes ver cómo utilizar estos campos personalizados con un ejemplo práctico. Esperamos que esta información os sirva de ayuda para vuestros próximos desarrollos en WooCommerce.