Una página de pago es el último y último destino del viaje de compras de un comprador de comercio electrónico. Aquí es donde el cliente ingresa su dirección y detalles de pago y realiza una última llamada para decidir si desea completar la compra o no. Podría parecer una sección que no entraña muchas complicaciones, pero en realidad la página de pago es una de las principales culpables del abandono del carrito. ¿Cómo? Las razones son múltiples, pero una de las más importantes es la complejidad del proceso de pago.
A los usuarios, sin importar su edad, siempre les encantan las experiencias en línea simplificadas. En el momento en que algo parece demasiado abstruso, la gente tiende a evitar participar, especialmente cuando se trata de dinero de por medio. Entonces eso significa personalizando su página de pago para satisfacer las necesidades de sus clientes es obligatorio. Tiene dos opciones para hacer esto, una es usar ganchos de WooCommerce y la otra es con complementos.
Tabla de contenido
Personalice su página de pago utilizando fragmentos de código
Primero veamos cómo puedes modificar tu página de pago sin depender de complementos. WooCommerce ofrece a sus usuarios la conveniencia de personalizar la página de pago como quieran con ganchos personalizados. Los diferentes ganchos en WooCommerce son:
- Woocommerce_default_address_fields: cualquier cambio realizado aquí afectará los campos de facturación y envío en Mi cuenta y en las páginas de pago.
- Woocommerce_shipping_fields: afecta solo a los campos de envío
- Woocommerce_billing_fields: afecta solo a los campos de facturación
- Woocommerce_checkout_fields: afecta solo a los campos de la página de pago
En este blog, veremos principalmente cómo utilizar el enlace de campos de dirección predeterminado para personalizar la página de pago.
Agregar nuevos campos
Así es como se ve una página de pago predeterminada de WooCommerce
Página de pago predeterminada de WooCommerce
Para agregar nuevos campos a esta página, algunos de los parámetros esenciales son:
- tipo: determina el tipo de campo (texto, correo electrónico, contraseña, etc.)
- etiqueta: contiene la etiqueta de un campo en particular
- marcador de posición: contiene un marcador de posición que se mostrará dentro de un campo
- clase – clase para el campo
- requerido: indica si el campo es obligatorio o no
- label_class – clase para el elemento etiqueta
- prioridad: para decidir la ubicación de los campos dentro de la página de pago
Ahora veamos el código para entenderlo mejor.
add_filter( 'woocommerce_default_address_fields', 'themehigh_add_field' );function themehigh_add_field( $fields ) {$fields[ 'land_mark' ] = array('label' => 'Flat Number','required' => true,'class' => array( 'form-row-wide', 'my-custom-class' ),'priority' => 65'placeholder' => 'Enter your flat number',);return $fields;}Una vez que agregue el nuevo campo, así es como se verá la página de pago.
La posición exacta donde aparecerá el nuevo campo dependerá del valor que agregue como «prioridad». Hablaremos un poco más sobre esto más adelante.
Editar campos
Veamos ahora cómo realizar algunos cambios básicos en los campos de la página de pago utilizando fragmentos de código de WooCommerce.
Cambiar etiqueta o nombre de marcador de posición
Para cambiar estos dos parámetros de campo, deberá editar los parámetros ‘etiqueta’ y ‘marcador de posición’, respectivamente.
add_filter( 'woocommerce_default_address_fields', 'themehigh_add_field' );function themehigh_add_field( $fields ) {$fields[ 'land_mark' ] = array('label' => 'flat no.','required' => true,'class' => array( 'form-row-wide', 'my-custom-class' ),'priority' => 65,'placeholder' => 'Enter flat no.',);return $fields;}
Se ha cambiado el marcador de posición y el nombre.
Alinear campos
Si desea cambiar el ancho de un campo en particular, puede hacerlo agregando cualquiera de las cadenas siguientes al atributo de clase.
- form_row_wide
- form_row_first
- form_row_last.
Como ya habrás notado, en la página de pago predeterminada de WooCommerce, los campos de nombre y apellido son los únicos dos campos que están alineados uno al lado del otro. El primer nombre tiene un valor form_row_first, mientras que el apellido tiene un valor form_row_last. El resto de los campos ocupan todo el ancho, lo que significa que tienen el valor form_row_wide. Aquí alineamos el número plano del campo a la izquierda de la página usando el atributo form_row_first.
add_filter( 'woocommerce_default_address_fields', 'themehigh_add_field' );function themehigh_add_field( $fields ) {$fields[ 'land_mark' ] = array('label' => 'Flat Number','required' => true,'class' => array( 'form-row-first', 'my-custom-class' ),'priority' => 65,'placeholder' => 'Enter your flat number',);return $fields;}
Número plano alineado a la izquierda
Cambiar los campos obligatorios a opcionales
Para hacer esto, deberá cambiar el parámetro «requerido» a «falso».
add_filter( 'woocommerce_default_address_fields', 'themehigh_add_field' );function themehigh_add_field( $fields ) {$fields[ 'land_mark' ] = array('label' => 'Flat Number','required' => false,'class' => array( 'form-row-wide', 'my-custom-class' ),'priority' => 65,'placeholder' => 'Enter your flat number',);return $fields;}
El campo de número plano ahora es opcional
Reposicionar campos
Para cambiar el orden de los campos mostrados o mover ciertos campos a la parte superior o inferior de la página de pago, el parámetro que debe cambiarse es «prioridad». Para colocar un campo en particular donde desee, necesita conocer la prioridad de los campos predeterminados existentes. Aquí está la lista:
Nombre – 10
Apellido – 20
Nombre de la empresa – 30
País – 40
Dirección postal – 50
Apartamento, suite, unidad, etc. (opcional) – 60
Pueblo / Ciudad – 70
Estado – 80
Código postal/ZIP – 90
Teléfono – 100
Correo electrónico – 110
Por ejemplo, si desea colocar el campo de número plano antes del campo país, debe cambiar su prioridad a un valor inferior a 40.
add_filter( 'woocommerce_default_address_fields', 'themehigh_add_field' );function themehigh_add_field( $fields ) {$fields[ 'flat_number' ] = array('label' => 'Flat number','required' => true,'class' => array( 'form-row-wide', 'my-custom-class' ),'priority' => 35,'placeholder' => 'Enter your flat number',);return $fields;}
Número de piso movido por encima del país
Eliminar campos
Es bastante fácil eliminar campos. Sólo tienes que utilizar el siguiente código. Intentemos eliminar la línea de dirección 2 y el campo de estado.
add_filter( 'woocommerce_default_address_fields', 'themehigh_remove_fields' );function themehigh_remove_fields( $fields ) {unset( $fields[ 'address_2' ] );unset( $fields[ 'state' ] );return $fields;}
Se han eliminado la línea de dirección 2 y el campo de estado.
Sin embargo, debes saber que el campo del país es un campo no eliminable. Si lo elimina, el pedido no se completará, lo cual se explica por sí mismo.
Mientras tanto, hemos estado discutiendo la personalización de un solo campo. Pero mientras administra una tienda, tendrá que manejar múltiples campos y varios fragmentos de código en el backend si desea personalizar de manera efectiva su página de pago. Además, los pasos que comentamos anteriormente no son suficientes para una personalización detallada, que necesitará pasos mucho más complicados.
Imagine tener que depurar fragmentos de dicho código cada vez que se produce un error. Suena engorroso, ¿verdad? ¿Pero adivina que? No es necesario tomar el camino difícil y que requiere mucho tiempo para lograr los resultados deseados. WooCommerce te brinda la opción de atender tus requisitos de una manera mucho más sencilla. Entonces, pasemos rápidamente a la ruta más fácil.
Personaliza tu página de pago sin esfuerzo con Themehigh
Si no está bien versado en lenguajes de programación o no tiene tiempo para atender la exigente tarea de administrar la parte posterior de su página de pago, entonces lo tenemos cubierto. El Checkout Field Editor (CFE) para WooCommerce de Themehigh está diseñado específicamente para abordar sus puntos débiles y simplificar el proceso de personalización. Es uno de los complementos más populares del mercado y por todas las razones correctas. Puede agregar, reordenar, editar, eliminar campos y hacer mucho más con solo unos pocos clics y diseñar una página de pago impecable que hará que sus clientes regresen por más. Entonces, ¿estás listo para descubrir cómo hacer la vida más fácil con nuestros complementos? Veamos cómo realizar todos los pasos que comentamos en la sección anterior utilizando el complemento CFE.
Agregar/editar nuevos campos
Agregar campos nunca ha sido tan fácil. Intentemos agregar un nuevo campo: número plano. Para agregar un campo, debe realizar los siguientes pasos:
- Navegue a la página WooCommerce → Formulario de pago → Campos de pago.
- Haga clic en el botón Agregar campo.
- Ingrese un nombre, tipo de campo, etiqueta y otros detalles de su campo.
- Haga clic en el botón Guardar y cerrar.
Como puede ver en la ventana emergente, todos los parámetros pasados al código personalizado (en la sección anterior) se pueden ingresar aquí sin problemas. No más códigos largos. ¡Simplemente ingrese los parámetros sobre la marcha y cree los campos de su elección! Marcar un campo como opcional u obligatorio también es posible con solo un clic. Además, si es necesario, existe una opción para mostrar estos campos en correos electrónicos y páginas de detalles del pedido. Puedes agregar facturación, envío y otros campos personalizados de la misma manera.
El nuevo campo ha sido añadido.
Para editar, sólo tienes que hacer clic en el botón editar de la derecha y repetir los mismos pasos.
Reordenar campos
Para reordenar campos, todo lo que tienes que hacer es colocar el campo en la posición deseada arrastrando las dos líneas a la izquierda del nombre del campo. Aquí hemos colocado el campo «número de piso» encima del campo «país».
El número del piso ha sido subido
Eliminar campos
Puede eliminar campos fácilmente haciendo clic en el botón ‘Eliminar’.
Una vez que hace clic en eliminar campos, el campo se elimina.
WooCommerce le permite personalizar su página de pago según su elección. Podría ser a través de fragmentos de código o con la ayuda de complementos. Depender de complementos simplifica su tarea y permite una personalización rápida con unos pocos clics. Entonces, si eliges la forma fácil o la tradicional, depende totalmente de ti. De cualquier manera, la idea detrás de la personalización es brindarles a sus clientes una experiencia de pago perfecta. Así que adelante y crea uno de la manera que quieras. ¡Feliz personalización!
