Es bastante común encontrar tutoriales sobre cómo añadir un campo en el formulario de checkout o pedido de WooCommerce, por ejemplo con el NIF, necesario en España si queremos emitir factura y que no viene por defecto con WooCommerce.
En este caso, lo que queremos añadir es un campo select, un desplegable con varias opciones para que el usuario seleccione una antes de enviar su pedido.

El proceso es muy parecido al caso de un campo de texto sencillo, pero con la peculiaridad de que debemos mostrar las opciones posibles y guardarlas.
1- Crear el campo con las opciones posibles:
//* Añadimos el campo select en el formulario, antes del campo de notas
add_action('woocommerce_before_order_notes', 'wps_add_select_checkout_field');
function wps_add_select_checkout_field( $checkout ) {
echo '<h3>'.__('Criterio de sustitución').'</h3><p>Seleccione que quiere que hagamos en caso de que alguna de las referencias solicitadas ya no esté disponible</p>';
woocommerce_form_field( 'criteriosustitucion', array(
'type' => 'select',
'class' => array( 'wps-drop' ),
'label' => __( 'Opciones de sustitución' ),
'options' => array(
'blank' => __( 'Seleccione una opción', 'wps' ),
'Más unidades de otra referencia solicitada' => __( 'Compensar con más unidades de otra referencia solicitada', 'wps' ),
'Abonar importe solicitado' => __( 'Abonar el importe solicitado', 'wps' ),
'Más unidades de otra referencia parecida' => __( 'Compensar con unidades de otra referencia parecida', 'wps' )
)
),
$checkout->get_value( 'criteriosustitucion' ));
}
2- En el caso que queramos que sea obligatorio, añadimos el siguiente código de valoración, con el mensaje de error correspondiente:

//* Revisamos el campo en el proceso de envío del formulario:
add_action('woocommerce_checkout_process', 'wps_select_checkout_field_process');
function wps_select_checkout_field_process() {
global $woocommerce;
// Si está seleccionada la opción 'blank', lanza un error
if ($_POST['criteriosustitucion'] == "blank")
wc_add_notice( '<strong>Por favor, seleccione una de las opciones de sustitución</strong>', 'error' );
}
3- Añadimos la función para guardar el valor del campo junto con el resto de campos del pedido:
//* Guardamos los datos del campo
add_action('woocommerce_checkout_update_order_meta', 'wps_select_checkout_field_update_order_meta');
function wps_select_checkout_field_update_order_meta( $order_id ) {
if ($_POST['criteriosustitucion']) update_post_meta( $order_id, 'criteriosustitucion', esc_attr($_POST['criteriosustitucion']));
}
4- Mostramos el valor en el detalle del pedido y los emails de confirmación:

//* Mostramos el valor del campo en el pedido
add_action( 'woocommerce_admin_order_data_after_billing_address', 'wps_select_checkout_field_display_admin_order_meta', 10, 1 );
function wps_select_checkout_field_display_admin_order_meta($order){
echo '<br><p><strong>'.__('Criterio de sustitución').':</strong> ' . get_post_meta( $order->id, 'criteriosustitucion', true ) . '</p>';
}
//* y en los emails de confirmación de pedido
add_filter('woocommerce_email_order_meta_keys', 'wps_select_order_meta_keys');
function wps_select_order_meta_keys( $keys ) {
$keys['Criterio de sustitución'] = 'criteriosustitucion';
return $keys;
}
Y ya está! En pocos pasos podemos personalizar el checkout de nuestra tienda solicitando datos o información adicional a nuestros clientes.
Si te interesa saber más sobre cómo personalizar la página de checkout, no te pierdas esta guía
Este código está basado en el artículo: https://www.wpstud.io/add-custom-select-field-woocommerce-checkout-page/
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
10 respuestas a «Añadir un campo de selección en el checkout de WooCommerce»
|
super clara la explicación pero como puedo crear un 2do campo según la opción escogida en éste select?
|
Hola Rosa,
Para campos condicionales como el que comentas, creo que te será más útil algún plugin para poder configurarlo como WooCommerce Checkout Manager
Saludos!
|
Hola,
Consulta. logro hacer que se muestre el desplegable y el select, pero no me muestra el alert si no seleccionan, y no me sale aparece lo seleccionado a los datos de envió al finalizar el pedido.
|
Hola César!
Es complicado de saber cual puede ser el problema sin ver el código… mira a ver si te aparece algún error en la consola o en el log de errores de php. Este artículo tiene un tiempo y quizás haya cambiado algun hook o action de WooCommerce. Yo también le daré un repaso para comprobar que sigue funcionando correctamente.
Saludos!
|
Me gustaria tener un campo checkbox o radio que active la visualizacion de otros campos en el ckeckout de woocommerce…
|
Hola Javier,
Para temas más complejos y condicionales como el que comentas, échale un vistazo al plugin Checkout Manager for WooCommerce, lo utilizo en algunos proyectos de clientes y funciona muy bien.
Saludos,
|
Hola Esther,
Un gran post que me ha servido de gran ayuda siguiendo los pasos que indicas pero cuando cambio el literal ‘Opciones de sustitución’ de la etiqueta Label en esta línea:
‘label’ => __( ‘Opciones de sustitución’ )
Se muestra el siguiente error:
syntax error, unexpected ‘ ‘ (T_STRING), expecting ‘)’
¿Por qué puede ser si solamente he modificado el texto que te comento?
Un saludo
Javi
|
Hola Javi,
Vigila el tipo de comillas que estás usando, a veces al copiar/pegar en lugar de comilla simple te coge una comilla tipográfica que PHP no reconoce y da error.
Prueba a ver si el error viene por ahí.
Saludos!
|
Hola Esther!
Tenías razón, he podido hacerlo pero directamente sobre el archivo functions.php fuera de wordpress con un editor de textos y subiendo el archivo por ftp. Me ha sido de gran ayuda 🙂
Muchas Gracias!
|
Genial! Gracias por comentarlo 🙂