Explicar los campos de pago (checkout fields) y personalizarlos en WooCommerce

Los campos de pago (Checkout fields) son aquellos campos que se muestran al cliente en la página de pago (Checkout page) cuando completa su pedido de productos en la tienda en línea. Hay un conjunto de campos predeterminados que aparecen en esta página, como el nombre, dirección y número de teléfono. Si el propietario de la tienda necesita modificarlos, WooCommerce no ofrece una forma directa para editarlos, ya que la modificación se realiza mediante

un conjunto de códigos de programación o a través de complementos especializados. En el artículo de hoy explicaremos cómo modificar los campos de pago de manera fácil y sencilla sin necesidad de agregar ningún código a través de complementos gratuitos especializados para WooCommerce. Aprenderemos cómo utilizar estos complementos para mejorar tu proceso de pago y hacerlo más adecuado a tus necesidades. También explicaremos cómo personalizar estos campos mediante códigos de programación disponibles oficialmente en la plataforma WooCommerce.

Contenido del artículo ¿Qué son los campos de pago (Checkout fields)?

Mejores complementos gratuitos para modificar los campos de pago 1-

(Checkout Manager) 2- Checkout Fields Manager 3. Flexible Checkout Fields Agregar y editar campos de pago Primero- Modificar los campos de pago a través de Checkout Field Editor Segundo: Modificar los campos de pago agregando código de programación a tu sitio 1- Código para agregar un nuevo campo 2- Código para eliminar un campo existente

¿Qué son los campos de pago (Checkout fields)?

Los campos de pago (Checkout fields), como mencionamos en la introducción del artículo, son aquellos campos que aparecen en la página de pago, generalmente la última página que se muestra durante la compra de productos en una tienda WooCommerce, que incluye todos los datos del comprador y la información del producto que desea comprar. El comprador

generalmente agrega en esta página su nombre, número de teléfono y dirección detallada a donde desea que se entregue el producto, y también puede escribir notas sobre el producto que ordenó y elegir la forma de entrega. Además, en esta página aparecen los métodos de pago disponibles en el sitio, el precio del producto, el costo de envío y los impuestos correspondientes, y se determina el precio final que pagará el cliente, ya sea mediante pago en línea con tarjetas de débito o pago contra entrega. Los propietarios de tiendas en línea pueden necesitar controlar y personalizar estos campos según sea necesario, como determinar cuáles son obligatorios y cuáles opcionales, ordenar su prioridad de visualización, o agregar nuevos campos para información que deseen recopilar de los clientes, lo que se determina según el tipo de cada tienda, y esto es lo que explicaremos en los siguientes párrafos.

Mejores complementos gratuitos para modificar los campos de pago

1- (Checkout Manager) El complemento Checkout Field Editor se considera uno de los complementos más utilizados para modificar campos de pago en WooCommerce, funcionando en más de 400 mil sitios que usan WooCommerce en todo el mundo y ayudando a controlar los campos de pago (Checkout Field) con gran flexibilidad y facilidad. Desde su lanzamiento ha acumulado más de 2 millones de instalaciones en diferentes sitios de WordPress.

Características del complemento Es un complemento ligero para WordPress. Contiene más de 7 tipos diferentes de campos como campos de texto, campos de contraseña, correo electrónico, casillas de verificación, números telefónicos, etc.

Soporte técnico rápido con una página de documentación detallada sobre cómo funciona el complemento. Posibilidad de ocultar campos de la página de pago sin eliminarlos si deseas activarlos nuevamente. Si cometes un error en la edición o eliminas un campo, puedes restablecer el complemento para recuperar la configuración predeterminada de los campos.

2- Checkout Fields Manager El complemento Checkout Fields Manager es un complemento destacado para controlar la apariencia de los campos de pago y de la página de pago en general. Se destaca del complemento anterior por la capacidad de controlar el ancho del campo y diseñar la página de manera mejorada con una interfaz de control más fácil y rápida.

Características del complemento Capacidad de agregar un nuevo campo que permite al cliente cargar archivos en la página de pago. Determinar si el comprador debe crear una cuenta obligatoriamente durante el pago o no.

Agregar un mensaje fijo que aparece en la parte superior de la página de pago con cualquier texto que desees. Una variedad de campos diferentes como ( Text, Textarea, Password, Radio, Checkbox, Select, Country, State, Multiselect, Multi Checkbox, Heading, Colorpicker, File uploader). Controlar la visualización y ocultamiento de campos con un solo clic sin necesidad de acceder a la configuración de cada campo individualmente. 3.

Flexible Checkout Fields El complemento Flexible Checkout Fields te ayuda a controlar la página de pago de manera más fácil, con la característica de poder reordenar los campos en la página mediante arrastrar y soltar en el lugar deseado.

También puedes agregar una gran variedad de campos como campo de fecha, color, carga de archivos y también un campo para agregar código HTML personalizado. Este complemento no difiere mucho del anterior excepto en la apariencia y algunas características simples, pero es más rápido y mejor en términos de método de edición, además está mejor organizado y es mucho más fácil de usar, con la capacidad de mostrar campos en otras páginas como la página de cuenta, dentro del correo electrónico que llega al comprador, además de la página de redirección que aparece después de que el comprador completa su pedido.

Agregar y editar campos de pago Explicaremos en los siguientes párrafos

hoy cómo controlar los campos de la página de pago del sitio a través del complemento gratuito más popular para modificar campos de pago, que es el complemento Checkout Field Editor. Este método es la opción más adecuada y fácil para principiantes. También te explicaremos cómo trabajar con estos campos mediante los códigos de programación y filtros que ofrece WooCommerce para modificar los campos de pago, ya sea agregando, eliminando o modificando campos existentes.

Primero- Modificar los campos de pago a través de Checkout Field Editor WooCommerce ofrece el complemento Checkout Field Editor para modificar los campos de pago. Este complemento está disponible en una versión de pago por $49, que te permite trabajar con 17 tipos diferentes de campos en la página de pago y controlar dónde se muestran en el sitio y personalizarlos como desees.

También lo ofrece en otra versión gratuita con características limitadas, por lo que te explicaremos en los siguientes pasos cómo modificar los campos de pago de tu tienda a través de la versión gratuita del complemento. 1.

Primero debes instalar el complemento accediendo

a Complementos < Agregar nuevo y luego busca el nombre del complemento en el cuadro de búsqueda Checkout Field Editor 2.

Después de instalar y activar el complemento, accede al panel de control de WooCommerce y selecciona Complementos < Checkout form como se muestra en la siguiente imagen.

3. Aparecerá una página con todos tus campos de pago. Puedes hacer clic en el botón editar frente al campo que deseas modificar. 4.

Al hacer clic en el botón editar, aparecerán todas las opciones del campo para editarlo como se muestra en la siguiente imagen: 1- Label: es el nombre que aparece encima del campo. 2- placeholder: es el texto informativo que aparece dentro del campo y desaparece automáticamente cuando comenzamos a escribir en él.

3- Default Value: el valor predeterminado del campo. Debes eliminarlo si deseas cambiarlo por otro valor diferente encima del campo. 4- Required: si activas esta opción, significa que este campo es obligatorio e imprescindible y no se puede completar la página sin rellenarlo. Si desactivas esta opción, el campo se vuelve opcional.

5- Enabled: si activas esta opción, significa que el campo está habilitado, es decir, aparecerá en la página de pago. Si no lo activas, el campo desaparecerá de la página. Luego de seleccionar todas las opciones que deseas para el campo, haz clic en el botón guardar ( Save&Close ) para guardar los cambios en el campo, y repite esto con el resto de los campos

Para agregar un nuevo campo, solo debes hacer clic en el botón +Add field como se muestra en la siguiente imagen: Aparecerá la siguiente página. En esta página debes seleccionar el tipo de campo que deseas agregar Type (texto- número- correo electrónico- fecha..) y el nombre del campo name. El nombre debe ser descriptivo y único, es decir, no debe repetirse para cada campo, y el resto de las opciones del campo se configura como te lo explicamos en el párrafo anterior. Segundo: Modificar los campos de pago agregando código de programación a tu sitio Este método no se recomienda excepto para aquellos que tienen conocimientos básicos sobre edición de código de programación. Por supuesto, no es necesario ser un programador profesional, pero debes estar familiarizado

con cómo trabajar con códigos, y antes de probar este método, haz una copia de seguridad de tu sitio. Luego sigue los siguientes pasos. 1.

Debes agregar códigos PHP al archivo functions.php de tu tema. Para acceder a este archivo, ve a Apariencia < Editor de temas. 2.

Ahora selecciona la funciones del tema (functions.php) 3. Agrega los códigos al final de esta página. A continuación, están los códigos que debes agregar.

1- Código para agregar un nuevo campo

Como ejemplo, escribiremos un código para agregar una casilla de verificación personalizada (checkbox) al final de la página de pago para permitir que los usuarios se suscriban al boletín informativo de la siguiente manera: // Add checkbox field add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout'); function quadlayers_subscribe_checkout($checkout) { woocommerce_form_field('subscriber', array( /** se cambia subscriber por el nombre del campo y no aparece en la interfaz y debe estar en inglés */ 'type' => 'checkbox', /** se edita este código con el tipo de campo que desees que sea text o select o radio o Textarea o phone o Email o password*/ //'required' => false, /** se edita este código para que sea true si el campo es obligatorio*/ 'label' => ' Subscribe to our newsletter.' /** se cambia el texto Subscribe to our newsletter con el nombre que aparece encima del campo */ ), $checkout->get_value('subscriber') ); /** se cambia subscriber con el mismo nombre que elegiste arriba*/ } En caso de elegir un tipo de campo que muestre un conjunto de opciones para seleccionar, es decir (select o radio), debes escribir código adicional que incluya todas las opciones antes de llamar al valor del campo mediante el método get_value de la siguiente manera

Nota: este código se agrega solo en caso de elegir el tipo de campo select o radio, para que aparezcan las opciones al usuario en ambos casos.

'options' => array( 'Google' => 'Google', 'Friend' => 'Friend', 'Facebook' => 'Facebook', 'Youtube' => 'YoutTube', 'Other' => 'Other' ) /**---------------------------------------------------------------------*/ 2- Código para eliminar un campo existente Para eliminar un campo que ya existe, debes conocer el nombre y los datos del campo que deseas eliminar, ya que hay muchos campos en WooCommerce.

En esta parte del artículo, explicaremos los nombres de todos los campos en códigos para que puedas eliminarlos. El código de eliminación también se agrega en el mismo archivo (function.php), y a continuación está el código de eliminación del campo anterior: add_filter( 'woocommerce_checkout_fields', 'quadlayers_remove_checkout_fields' ); function quadlayers_remove_checkout_fields( $fields ) { escribe el nombre del campo aquí return $fields; } Reemplaza el texto "escribe el nombre del campo aquí" en el código anterior con uno de los siguientes códigos según el nombre del campo que deseas eliminar.

unset($fields['billing']['billing_first_name']); /** este código es para eliminar el campo de nombre de pila */ unset($fields['billing']['billing_last_name']); /** este código es para eliminar el campo de apellido */ unset($fields['billing']['billing_company']); /** este código es para eliminar el campo de empresa */ unset($fields['billing']['billing_address_1']); /** este código es para eliminar el campo de dirección 1 */ unset($fields['billing']['billing_address_2']); /** este código es para eliminar el campo de dirección 2 */ unset($fields['billing']['billing_city']); /** este código es para eliminar el campo de ciudad */ unset($fields['billing']['billing_postcode']); /** este código es para eliminar el campo de código postal */ unset($fields['billing']['billing_country']); /** este código es para eliminar el campo de país */ unset($fields['billing']['billing_state']); /** este código es para eliminar el campo de estado */ unset($fields['billing']['billing_phone']); /** este código es para eliminar el campo de número de teléfono */ unset($fields['order']['order_comments']); /** este código es para eliminar el campo de comentarios */ unset($fields['billing']['billing_email']); /** este código es para eliminar el campo de correo electrónico */ unset($fields['account']['account_username']); /** este código es para eliminar el campo de nombre de usuario */ unset($fields['account']['account_password']); /** este código es para eliminar el campo de contraseña */ unset($fields['account']['account_password-2']); /** este código es para eliminar el campo de confirmación de contraseña */ Nota: El método add_filter es un gancho woocommerce_checkout_fields que le dimos el nombre quadlayers_remove_checkout_fields y nos devuelve los campos que fueron removidos de la página de pago. Para volver a mostrar los campos de pago que eliminaste de la página de pago, simplemente elimina la línea de código unset del archivo function.php que oculta el campo específico que deseas volver a mostrar.

Por ejemplo, elimina la siguiente línea unset($fields['order']['order_comments']); /** este código es para eliminar el campo de comentarios */ Esto volverá a mostrar el campo de comentarios del pedido en la página de pago para el comprador. Conclusión

Con esto hemos terminado de explicar todos los métodos disponibles para modificar los campos de pago, ya que estos campos constituyen el paso más importante en el proceso de compra de la tienda, ya que te proporcionan todos los datos del cliente necesarios para entregar el pedido. En este artículo te hemos explicado el método de modificación manual mediante códigos de programación, y usando uno de los complementos disponibles en la versión gratuita, este método es mucho más fácil y rápido y no enfrentarás ninguna dificultad, además no requiere ninguna experiencia previa, por lo que te lo recomendamos cuando desees modificar campos o agregar o eliminar campos de Checkout Fields. Lee también: Aumentar las ventas de tu tienda electrónica a través de 15 recomendaciones técnicas y de marketing