Añadir un campo de selección en el checkout de WooCommerce

En este tutorial vamos a ver cómo añadir un campo desplegable en WooCommerce con varias opciones para que el usuario seleccione una antes de enviar su pedido.


por

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.

Campo select en checkout de WooCommerce

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:

Campo select en checkout de WooCommerce
//* 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:

Campo select en checkout de WooCommerce
//* 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»

  1. Avatar de ROSA ESTER

    |

    super clara la explicación pero como puedo crear un 2do campo según la opción escogida en éste select?

    1. Avatar de esther

      |

      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!

  2. Avatar de Cesar Sandoval

    |

    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.

    1. Avatar de esther

      |

      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!

  3. Avatar de Javier Millar

    |

    Me gustaria tener un campo checkbox o radio que active la visualizacion de otros campos en el ckeckout de woocommerce…

    1. Avatar de esther

      |

      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,

  4. Avatar de Xab

    |

    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

    1. Avatar de esther

      |

      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!

      1. Avatar de Xab

        |

        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!

        1. Avatar de esther

          |

          Genial! Gracias por comentarlo 🙂