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.
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.
Preguntas frecuentes sobre cómo modificar los campos que se muestran en el formulario de Woocommerce
¿Cómo edito el formulario de facturación de WooCommerce?
Para editar el formulario de facturación de WooCommerce, puedes hacerlo a través de diferentes métodos. Uno de los más comunes es utilizando un plugin específico, como "WooCommerce Checkout Field Editor", que te permite añadir, editar o eliminar campos fácilmente. También puedes realizar modificaciones directamente en el código de tu tema, aunque esto requiere conocimientos técnicos.
- Uso de plugins: Facilita la gestión sin necesidad de programar.
- Edición manual: Permite un mayor control pero es más complejo.
- Utilizar hooks y filtros: Ideal para desarrolladores que desean personalizar aún más.
¿Cómo editar WooCommerce_checkout?
Para editar el formulario de checkout en WooCommerce, puedes utilizar un plugin como WooCommerce Checkout Field Editor. Este tipo de herramienta te permite agregar, eliminar o modificar los campos existentes de manera sencilla y sin necesidad de programar. Simplemente instala y activa el plugin desde el panel de administración de tu WordPress.
Otra opción es hacerlo mediante código en el archivo functions.php de tu tema activo. A continuación, puedes usar los hooks de WooCommerce para personalizar el formulario. Por ejemplo, puedes agregar un nuevo campo con el siguiente código:
add_filter('woocommerce_checkout_fields', 'custom_checkout_field');
function custom_checkout_field($fields) {
$fields['billing']['billing_custom_field'] = array(
'type' => 'text',
'label' => __('Campo Personalizado', 'woocommerce'),
'required' => true,
);
return $fields;
}
Recuerda siempre hacer una copia de seguridad de tu sitio antes de realizar modificaciones directamente en el código. Así, podrás restaurar tu sitio en caso de que algo no funcione como esperabas.
¿Cómo agrego un campo adicional en el formulario de pago de WooCommerce?
Para agregar un campo adicional en el formulario de pago de WooCommerce, puedes utilizar un fragmento de código en el archivo functions.php de tu tema. Este código se basa en los ganchos de acción que proporciona WooCommerce para personalizar el formulario según tus necesidades.
Los pasos básicos son los siguientes:
- Accede al archivo functions.php de tu tema activo.
- Utiliza el gancho
woocommerce_after_order_notespara insertar el nuevo campo. - Define el campo usando la función
woocommerce_form_field. - Guarda el campo adicional en la base de datos utilizando
woocommerce_checkout_update_order_meta.
¿Cómo editar la página de finalizar una compra en WooCommerce?
Para editar la página de finalizar una compra en WooCommerce, puedes utilizar filtros y acciones que proporciona WordPress. Accediendo al archivo functions.php de tu tema, puedes añadir o modificar campos utilizando funciones como `woocommerce_checkout_fields()`, que te permite personalizar los campos del formulario. Además, puedes implementar plugins como "WooCommerce Checkout Manager" para una interfaz más amigable y opciones de personalización sin necesidad de código.
