Como modificar los campos que se muestran en el formulario de Woocommerce

Aprenderemos a eliminar los campos que no nos interese que se muestre en el proceso de compra y como añadir nuevos campos gracias a Checkout Field Editor for WooCommerce.
Aprenderemos a eliminar los campos que no nos interese que se muestre en el proceso de compra y como añadir nuevos campos gracias a Checkout Field Editor for WooCommerce.
Tabla de contenidos

Comparte esta entrada

Aprenderemos a eliminar los campos que no nos interese que se muestre en el proceso de compra y como añadir nuevos campos gracias a Checkout Field Editor for WooCommerce.

Hoy vamos a hablar de los formularios de compra que traer por defecto todas las tiendas onlines que desarrollamos bajo el CMS WordPress haciendo uso de Woocommerce. Muchas veces estos formularios solicitan más información que la que necesitamos para que nuestros clientes puedan completar el proceso de compra de algún producto.

Woocommerce es un plugins de uso internacional, por lo que su configuración está realizada para poder adaptarse a cualquier país donde se instale, como vemos su formulario de pago quizás tenga algunos campos de información no necesaria que puede hacer a nuestros clientes finalmente desistir a realizar una compra en nuestra Tienda Online.

Gracias a Checkout Field Editor for WooCommerce, podemos personalizar que campos deseamos mostrar y cuáles no, que campos son obligatorios para realizar el proceso de compra y cuáles no, configurar alguna validación si queremos que estos cumplan algunos requisitos, eso y mucho más es posible gracias a este plugins gratuito.

 

Como añadir el DNI en Woocommerce

Gracias Checkout Field Editor for WooCommerce añadir un campo donde poder guardar el DNI del usuario es posible. Recuerda que el campo DNI es un campo necesario para realizar las compras aquí en nuestro país.

Para añadir el campo DNI solo tendremos que buscar el menú forma de pago que se ha creado dentro de Woocommerce al instalar el plugins. En la nueva ventana verás que nos mostrará una tabla con los campos actuales del formulario, en la parte superior tendremos un botón en color azul para añadir un nuevo campo, antes de pulsar este botón tenemos que tener claro dónde queremos que solicite la información, si en los campos de facturación (en nuestro caso será este) o con los campos de envío.

Listado con todos los campos del formulario de pago de Woocommerce
Listado con todos los campos del formulario de pago de Woocommerce

En el formulario que se abre tendremos que seleccionar que tipo de campo es, en nuestro caso sería de texto, asignarle un nombre y una etiqueta para poder reconocer el campo, luego decidiremos si el campo es obligatorio, si está activado y entre otras opciones donde queremos mostrarlo una vez que el cliente complete la compra.

Con esto ya tendríamos creado fácilmente en unos segundos el nuevo campo DNI en nuestra Tienda Online, como lado positivo es la facilidad para crear el campo, como negativo de esta forma decir que requiere de la instalación de un plugins quizás solo para esto, plugins que consumirá recursos al servidor y puede llegar a ralentizar la web un poco.

 

Como añadir el DNI mediante código

Para los amantes de la programación, o las personas que no quieran sobrecargar nuestra página web con plugins innecesarios vamos a explicarle de una forma sencilla como añadir este campo sin tener que instalar ningún plugins.

Para ello deberás agregar el siguiente código que te dejo más abajo dentro del fichero functions.php de nuestro tema activo, recuerda que si en algún momento actualizas el tema posteriormente toda esta programación desaparecerá. Es por ello que te recomiendo que antes de hacer nada crees un tema hijo para que no pierdas nada de información

/*

* AÑADIR CAMPO NIF/CIF EN EL FORMULARIO DE PAGO

*/

function woo_custom_field_checkout($checkout) {

echo '<div id="additional_checkout_field">';

woocommerce_form_field(‘nif', array( // Identificador del campo

'type'          => 'text',

'class'         => array('my-field-class form-row-wide'),

'required'      => true,            // ¿El campo es obligatorio 'true' o 'false'?

'label'       => __('NIF / CIF'),   // Nombre del campo

'placeholder'   => __('Ej: 12345678X'), // Texto de apoyo que se muestra dentro del campo

), $checkout->get_value( 'nif' ));    // Identificador del campo

echo '</div>';

}

add_action( 'woocommerce_after_checkout_billing_form', 'woo_custom_field_checkout' );

/*

* INCLUYE NIF/CIF EN LOS DETALLES DEL PEDIDO CON EL NUEVO CAMPO

*/

function woo_custom_field_checkout_update_order($order_id) {

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

update_post_meta( $order_id, 'NIF', sanitize_text_field( $_POST['nif'] ) );

}

}

add_action( 'woocommerce_checkout_update_order_meta', 'woo_custom_field_checkout_update_order' );

/*

* MUESTRA EL VALOR DEL CAMPO NIF/CIF LA PÁGINA DE MODIFICACIÓN DEL PEDIDO

*/

function woo_custom_field_checkout_edit_order($order){

echo '<p><strong>'.__('NIF').':</strong> ' . get_post_meta( $order->id, 'NIF', true ) . '</p>';

}

add_action( 'woocommerce_admin_order_data_after_billing_address', 'woo_custom_field_checkout_edit_order', 10, 1 );

/*

* INCLUYE EL CAMPO NIF/CIF EN EL CORREO ELECTRÓNICO DE AVISO A TU CLIENTE

*/

function woo_custom_field_checkout_email($keys) {

$keys[] = 'NIF';

return $keys;

}

add_filter('woocommerce_email_order_meta_keys', 'woo_custom_field_checkout_email');

 

Este código que acabamos de facilitarte realiza varias acciones por nosotros:

  • Crea un nuevo campo en el formulario de pago de nuestra web donde el usuario podrá insertar el DNI antes de realizar la compra.
  • Obliga a rellenar este campo, ya que lo hace obligatorio, además lleva un texto de ejemplo asociado para ayudar a rellenar este campo a tus clientes.
  • Muestra el DNI en los correos electrónicos que se mandan de confirmación del pedido, a su vez nos dejara modificar dicho campo a la hora de modificar el pedido en nuestro administrador web.

 

Conclusión

Te damos dos opciones para agregar el campo DNI en nuestra Tienda Online, ya según tus conocimientos podrás elegir si usa el método 1 o el método 2, ambos casos darán el mismo resultado.

En mi opinión, soy más de hacer las cosas sin tener que hacer uso de plugins innecesarios por la gran cantidad de ficheros que carga para realizar poco trabajo, así siempre mantenemos optimizado la carga de nuestra página web.

En el caso de que necesites eliminar también otros campos que ya existan o cambiar la obligatoriedad de estos, puedes hacer uso de la opción 1.

¿Buscas Hosting?

Hosting

Sígueme en Redes Sociales

Sobre la firma

Luis Alberto Agea Duran

Diseñador Web Freelancer desde 2016. Previamente, trabajé para empresas como Estepona Web y en Franclima Hostelería. He colaborado con otras empresas en proyectos como MasEmpresas de la Confederación de Empresarios de Andalucía. Actualmente diseño páginas web con WordPress y Tiendas Online

Apúntate a nuestro boletín

También te puede interesar...

Las principales herramientas para la resolución de problemas web en tu sitio
Mantenimiento Web

Las principales herramientas para la resolución de problemas web en tu sitio

Conoce las herramientas de análisis web que te ayudarán a mejorar la experiencia de usuario y el rendimiento de tu sitio. Descubre cómo Google Analytics, Google Search Console, PageSpeed Insights, Screaming Frog, Hotjar, Google Optimize, Pingdom y GTmetrix pueden optimizar tu sitio para obtener una mejor tasa de conversión.

Ir al contenido