Agregando campos al checkout de WooCommerce

Puede pasar, es bien raro (como cambiar el orden de los campos), pero hay casos que lo ameritan como por ejemplo conocer los puestos de trabajos de quiénes nos compren para completar nuestra base de datos de clientes.

Como siempre, lo vamos a resolver con un poco de código, ya que es bien fácil encontrar como resolverlo con plugins.

Vamos a intervenir el archivo functions.php de nuestro theme agregando el siguiente código:

/** Agregando campos el checkout de WooCommerce */

add_action('woocommerce_after_order_notes', 'custom_checkout_field');

function custom_checkout_field($checkout)
{

echo '<div id="custom_checkout_field"><h2>' . __('Titulo de la nueva seccion') . '</h2>';

woocommerce_form_field('custom_field_name', array(

'type' => 'text',

'class' => array(

'my-field-class form-row-wide'

) ,

'label' => __('Campo que agregamos') ,

'placeholder' => __('Texto guia del nuevo campo') ,

) ,

$checkout->get_value('custom_field_name'));

echo '</div>';

}

Así ya está agregado nuestro nuevo campo, vamos a validarlo.

/* Validación de campos del checkout que agreguemos */

add_action('woocommerce_checkout_process', 'customised_checkout_field_process');

function customised_checkout_field_process()
{

// Mostrar un error si el campo está vacío

if (!$_POST['customised_field_name']) wc_add_notice(__('El campo no puede quedar vacío.') , 'error');

}

Por último vamos a estar seguros de que estamos guardando correctamente los valores.

/* actualizar el valor de los nuevos campos */

add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');

function custom_checkout_field_update_order_meta($order_id)

{

if (!empty($_POST['customised_field_name'])) {

update_post_meta($order_id, 'Nuevo campo',sanitize_text_field($_POST['customised_field_name']));

}

}

Y listo!

extra: fíjense que en el primer código que vimos se declara el type (‘type’ => ‘text’), woocommerce cuenta con diferentes tipos de campo que pueden revisar en este siguiente link.

Deja una respuesta

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