La Guía Completa de WooCommerce Checkout – Personalización de Campos, Cambios de Plantillas, Creación de Checkout de Una Página

WooCommerce es un plugin flexible y potente que puedes usar para convertir tu sitio de WordPress en una dinámica tienda de comercio electrónico. Sin embargo, si buscas reducir el abandono del carrito de compras, impulsar las conversiones y aumentar los ingresos, es importante que prestes mucha atención a la página de pago (checkout) de WooCommerce.

Hay tantas formas diferentes de estilizar y editar la página de pago en WooCommerce. Ya sea que estés creando tu primera tienda en línea y quieras entender cómo funciona esta página, o quieras mejorar la experiencia de pago en tu sitio WooCommerce existente, te tenemos cubierto.

En este post, explicaremos qué es la página de pago de WooCommerce y cómo funciona. Luego te guiaremos a través de las muchas opciones que tienes para estilizarla, cambiarla y aprovecharla para optimizar las conversiones usando plugins, código, temas y mucho más.

¡Vamos directamente al grano!

Una Visión General de la Página de Checkout de WooCommerce

Cuando configuraste tu tienda WooCommerce por primera vez, el plugin crea y asigna automáticamente una página de pago. Si la previsualizas en la parte delantera de tu sitio, notarás que es bastante simple:

Por defecto, WooCommerce pide a los clientes alguna información básica. Esto incluye:

• Detalles de facturación
• Nombre y apellido
• Nombre de la empresa
• Dirección (Ciudad, País, Distrito y Código Postal)
• Número de teléfono
• Dirección de correo electrónico
• Notas de pedido
• Declaración de la política de privacidad

Esta es una información importante para incluir en una página de pago de WooCommerce. Proporciona los detalles necesarios para que un cliente complete su compra, y para que el sitio web procese su información de pago.

Sin embargo, no hay nada aquí que necesariamente ayude a aumentar las conversiones o reducir el abandono de la compra. Es más, la página predeterminada puede no ofrecer la información más relevante o útil para tu negocio específico. Por lo tanto, como muchos propietarios de sitios de WooCommerce, puede que estés buscando cambiar tanto el diseño como el contenido de tu página de pago.

Antes de entrar en las diferentes formas en las que puedes personalizar la página de pago en WooCommerce, hay algunas cosas que debes entender primero.

Hablemos dónde puedes  encontrar esta página, así como de las diversas configuraciones y características predeterminadas disponibles en el plugin WooCommerce.

Dónde Puedes Encontrar la Página de Checkout de WooCommerce por Defecto y la Configuración

WooCommerce crea automáticamente una página de pago para tu tienda una vez que activas el plugin. Puedes localizarlo navegando a Páginas > Checkout en tu panel de control de administración:

Puedes editar esta página como lo harías con cualquier contenido de WordPress. Por ejemplo, puedes cambiar el título y el enlace permanente de la página, añadir una imagen destacada, modificar los atributos de la página, etc. También puedes usar el atajo [woocommerce_checkout]:

Hay un puñado de opciones estándar para configurar esta página, algunas de las cuales puedes encontrar en WooCommerce > Ajustes > Avanzado:

En esta pantalla, en la sección Instalación de páginas, puedes seleccionar una página diferente para usarla como pantalla de pago de tu tienda. También tienes la opción de forzar una conexión HTTPS segura.

En la página de configuración general, puedes habilitar los cupones que se utilizarán en la caja y configurar cómo se calcularán los impuestos:

En la pestaña Cuentas y Privacidad, también puedes encontrar algunas opciones para la creación de cuentas y pagos de invitados:

Debajo de eso, hay una sección de Política de privacidad donde puedes modificar el texto de la política de privacidad que aparece en la página de pago:

Más allá de estos ajustes incorporados, tienes opciones limitadas para personalizar tu página de pago usando solamente el plugin WooCommerce. Afortunadamente, hay otros métodos que puedes usar para mejorar su apariencia y extender su funcionalidad.

Por Qué Podrías Querer Cambiar Tu Página de Checkout de WooCommerce

La página de pago es lo último que los clientes ven antes de completar sus compras. Puede marcar la diferencia entre si terminan convirtiéndose o abandonando tu sitio por completo.

Por lo tanto, es esencial asegurarse de que la página de pago de WooCommerce esté bien diseñada y funcione de manera que fomente las conversiones. Hay muchas maneras en las que puedes proporcionar una mejor experiencia, como por ejemplo:

• Cambiar el diseño y la plantilla de la página
• Creando una página de pago de una página
• Añadir, quitar o reorganizar los campos
• Cambiar las etiquetas de los campos de entrada y el texto de los botones
• Requiriendo que se rellenen ciertos campos
• Activando automáticamente el envío gratuito
• Vincular directamente los productos a la página de compra

Ya sea que quieras revisar completamente la página predeterminada o hacer pequeñas modificaciones, lo importante es que puedas hacerlo con facilidad. Afortunadamente, tienes múltiples opciones.

Métodos que Puedes Utilizar para Cambiar Tu Página de Checkout de WooCommerce

Existen muchas maneras de cambiar la página de pago de WooCommerce. La mejor depende de un puñado de factores, como el cambio específico que estás tratando de hacer y tu nivel de comodidad con la codificación.

Algunos de los métodos que puedes usar para mejorar tu página de pago de WooCommerce incluyen:

• Características, bloqueos y atajos de WooCommerce. WooCommerce viene con algunas características y ajustes incorporados que puedes usar para mejorar tu tienda. Por ejemplo, puedes activar automáticamente el envío gratuito, así como vincular directamente los productos a la página de compra. También hay bloques y atajos para modificar la página.
• Plugins y extensiones. Si no eres un experto en tecnología o simplemente quieres una manera rápida y sin complicaciones de mejorar tu página de pago de WooCommerce, hay un montón de plugins que puedes usar. La mayoría son fáciles de usar y requieren poco soporte. Algunos complementos son proporcionados por WooCommerce y están disponibles en la biblioteca de extensiones, mientras que otros son desarrollados y ofrecidos por plataformas de terceros.
• Plantillas de páginas y temas. Si quieres cambiar el estilo de tu página de pago, puedes usar una plantilla o un tema pre construido. Al igual que con los plugins, esta es una opción sólida si tienes una experiencia de codificación limitada y quieres hacer cambios en la apariencia general de la página, para que coincida mejor con tu marca. La desventaja es que no ofrece tanta flexibilidad como lo haría la codificación personalizada.
• Código personalizado. Otro método que puedes aprovechar para cambiar la página de pago de WooCommerce es la codificación personalizada. Esta es una ruta poderosa si te sientes cómodo editando los archivos de tu sitio y quieres añadir mucha personalización.

En las siguientes secciones, veremos algunos de los cambios más efectivos que puedes hacer en tu página de WooCommerce. Para cada uno de ellos, explicaremos por qué podrías querer hacer la edición, y te guiaremos a través de los diferentes métodos que puedes usar para hacerlo.

Cómo Personalizar los Campos de Checkout de WooCommerce

Uno de los cambios más comunes que puedes hacer en una página de WooCommerce es modificar sus campos de formulario. Estos típicamente ocupan la mayor parte del espacio en la página, por lo que deben ser relevantes. Ya sea que quieras eliminar campos, reorganizar su orden o agregar nuevos campos personalizados, tienes un par de opciones para hacerlo. Puedes usar un plugin o editar el código directamente.

Usar un Plugin para Cambiar los Campos de Checkout de WooCommerce

Si quieres una forma rápida y sencilla de personalizar los campos de pago en WooCommerce, te recomendamos que utilices un plugin. Existen un puñado de opciones para elegir.

Uno de los más populares es el plugin de Checkout Field Editor:

Esta es una herramienta gratuita que te permite añadir o editar los campos de formulario en tu página de pago de WooCommerce. Puedes habilitar o deshabilitar ciertos campos, así como reorganizar su orden.

Aunque la versión gratuita te permite manejar estas tareas básicas, WooCommerce Checkout Field Editor Pro viene con una funcionalidad adicional. Esto incluye 17 tipos de campo y ganchos personalizados.

Para usar este plugin, puedes instalarlo en tu sitio WooCommerce navegando a Plugins > Añadir Nuevo y luego buscarlo. Una vez que lo encuentres, haz clic en el botón Instalar ahora, seguido de Activar.

Cuando está activado, puedes configurar los ajustes yendo a WooCommerce > Formulario de pago:

Hay tres tipos diferentes de campos que puedes editar:

1. Billing (Facturación)
2. Shipping (Envío)
3. Additional (Adicional)

Puedes seleccionar el campo que quieras cambiar y luego hacer clic en el botón Eliminar, Activar o Desactivar. Para añadir un nuevo campo, selecciona Añadir un campo.

Si desea cambiar un campo de formulario existente, selecciona el cuadro de la izquierda y haz clic en el botón Editar. Se abrirá un panel en el que podrás cambiar el tipo de campo (solo en la versión premium), editar la etiqueta del campo, elegir si es necesario y mucho más:

Cuando termines, haz clic en el botón Guardar. Una vez que hayas terminado de hacer todos los cambios que desees en los campos de la página de pago, asegúrate de pulsar el botón Guardar cambios en la parte inferior de la pantalla.

Para una orientación más detallada, puedes consultar la documentación de WooCommerce sobre el uso del plugin Checkout Field Editor.

Por supuesto, este es solo uno de los muchos plugins que puedes usar para cambiar los campos de pago de WooCommerce. Otras opciones adicionales que vale la pena considerar son Flexible Checkout Fields y WooCommerce Checkout Manager, de las que hablaremos más adelante en este post.

Edición de los Campos de Checkout Usando Código

Otra opción para editar los campos de la página de pago de WooCommerce es utilizar una codificación personalizada. Por supuesto, esto requiere un cierto nivel de conocimiento técnico y comodidad al trabajar con los archivos de tu sitio. La ventaja es que tienes más flexibilidad en términos de personalización que con un plugin de terceros.

Puedes editar los campos de pago usando el archivo functions.php de tu sitio y filtros como:

• woocommerce_checkout_fields
• woocommerce_billing_fields
• Woocommerce_shipping_fields

Las acciones y filtros de WooCommerce te permiten manipular los campos de pago casi como quieras. Por ejemplo, puedes eliminarlos por completo, añadir nuevos, o cambiar el texto mostrado. Usar el filtro woocommerce_checkout_fields te permitirá anular cualquier campo.

Digamos que quieres cambiar el texto del marcador de posición para el campo order_comments. De forma predeterminada, se establece de la siguiente manera:

_x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')

Para cambiarlo, puedes añadir este fragmento de código a tu archivo functions.php:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function custom_override_checkout_fields( $fields ) {

$fields['order']['order_comments']['placeholder'] = 'My new placeholder';

return $fields;

}

Para eliminar un campo, puedes utilizar el siguiente:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {

unset($fields['order']['order_comments']);

return $fields;

Hay muchos cambios que puedes hacer en los campos de tu página de pago, así que no los exploraremos todos aquí. Puedes encontrar una lista útil de códigos de campo de pago en GitHub.

Cómo Cambiar la plantilla de la Página de Checkout de WooCommerce

De forma predeterminada, la plantilla de la página de pago de WooCommerce se basará en el tema de tu sitio. Pero tal vez quieras cambiar el diseño para que se ajuste mejor a tu marca o tal vez solo quieras hacer pequeños cambios en el contenido de la página de la plantilla.

Los dos métodos principales que puedes usar para cambiar esto son usar una plantilla pre-construida o añadir código. Empecemos con el primero.

Empezando Con una Plantilla Pre-construida para Personalizar Tu Página de Checkout

La manera más fácil de cambiar el diseño de tu página de pago de WooCommerce es instalando un tema pre-construido, como los de la tienda de temas de WooCommerce. Hay una variedad de opciones gratuitas disponibles, así como temas premium.

Puedes buscar temas de pago de una página, por ejemplo, o cualquier otro tipo de plantillas específicas que te interese utilizar. También puedes encontrar muchos temas de WooCommerce en Envato Market.

Usar el Código para Personalizar la Plantilla de la Página de Checkout de WooCommerce

Si te sientes cómodo editando códigos, también puedes cambiar manualmente la plantilla de la página de pago. Dependiendo de tu proveedor de alojamiento, puedes hacerlo a través del Administrador de archivos en cPanel o un cliente de Protocolo de transferencia segura de archivos (SFTP).

Puedes usar ganchos de acción para añadir, editar o eliminar elementos de la página de pago. Hay nueve ganchos de acción principales que WooCommerce utiliza para la página de pago:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_checkout_shipping
• woocommerce_checkout_after_customer_details
• woocommerce_checkout_before_order_review
• woocommerce_checkout_order_review
• woocommerce_checkout_after_order_review
• Woocommerce_after_checkout_form

Estos ganchos de acción añaden un marcado a la página, que puedes usar para personalizar tanto su estilo como su funcionalidad. Si deseas utilizar estos ganchos de acción para modificar la plantilla de la página de pago, puedes hacerlo editando el archivo PHP del formulario de pago.

Puedes localizar los archivos de plantillas de WooCommerce en /woocommerce/templates. Desde el directorio raíz de tu sitio, necesitarás navegar a wp-content/plugins/woocommerce:

Dentro de estos archivos, hay ganchos que puedes usar para añadir y reorganizar el contenido de la página de plantilla, sin necesidad de editar los archivos de plantilla. Para crear una plantilla de tema personalizada para la página de pago, primero deberás crear una carpeta «woocommerce/checkout» dentro de la carpeta del tema.

A continuación, copia la plantilla de la página de pago de WooCommerce, que puedes encontrar en woocommerce/templates/checkout/form-checkout.php:

Luego, agrégalo a la nueva carpeta que acabas de crear. Después de eso, puedes editar el archivo para hacer los cambios que desees. Cuando guardes el archivo, el plugin WooCommerce cargará esta plantilla y anulará la plantilla de página predeterminada.

Cómo Crear un Checkout de Una Página de WooCommerce

Una de las formas de mejorar la experiencia de compra de tus clientes, y en el proceso reducir las tasas de abandono, es hacerlo lo más rápido y simple posible. Si quieres acortar el proceso de compra, puedes hacerlo creando una página de pago de una página en WooCommerce.

Existen múltiples maneras de hacer esto. Como mencionamos anteriormente, puedes buscar un tema o plantilla de una página que proporcione una única página de pago. Sin embargo, si te gusta el tema actual, es posible que no quieras cambiarlo.

Si ese es el caso, no te preocupes. Hay otras opciones, como la extensión Premium de WooCommerce One Page Checkout:

Desde que esta solución fue desarrollada por WooCommerce, sabes que es segura, confiable y ofrece mucho soporte. Además de permitirte transformar cualquier página en una página de checkout, viene con una gran cantidad de características para optimizar el proceso de pago de una página.

Tú puedes:

• Mostrar tanto la selección de productos como los formularios de compra en una página.
• Permitir a los clientes añadir o quitar artículos de sus carritos.
• Deja que los clientes completen los pagos sin salir de la página.
• Añade campos personalizados a las páginas.

Después de comprar la extensión a través de tu cuenta de WooCommerce, puedes descargar el plugin, y luego instalarlo y activarlo en tu sitio de WooCommerce.

Para usarlo, navega a Páginas > Añadir Nuevo y selecciona el icono de One Page Checkout en la barra de herramientas del editor:

En el panel que se abre, puedes hacer clic dentro del campo Productos, y comenzar a escribir el nombre del producto o productos que deseas añadir.

A continuación, elige la plantilla que deseas utilizar (Lista de productos, Tabla de productos, Tabla de precios o Producto individual) y haz clic en Crear código corto.

También puedes insertar manualmente el código abreviado de una página en cualquier publicación o página. Para aprender más acerca de este plugin y cómo usarlo, puedes consultar la documentación de WooCommerce One Page Checkout.

Cómo Activar el Envío Gratuito Durante el Proceso de Checkout de WooCommerce

Como propietario de un negocio de comercio electrónico, existen muchas estrategias diferentes que puedes aprovechar para animar a tus clientes a gastar más. Una de ellas es ofrecer el envío gratuito.

Por supuesto, puede que no quieras ofrecer envío gratis en cada pedido. Sin embargo, añadirlo como un incentivo en los totales de los pedidos que alcancen una cierta cantidad puede ayudarte a animar a los compradores a gastar más de lo que harían de otra manera.

Por lo tanto, es posible que desees configurar la página de pago de WooCommerce para que active automáticamente el envío gratuito en los pedidos que superen un cierto número, como por ejemplo 100 dólares.

Lo primero que tendrá que hacer es ofrecer el método de envío gratuito a la(s) zona(s) de envío pertinente(s).

Para ello, navega a WooCommerce > Ajustes > Envío:

Pasa el cursor sobre la zona de envío que desea modificar y luego haz clic en el enlace Editar. Si aún no has añadido ninguna zona, selecciona primero el botón Añadir zona de envío y sigue las indicaciones antes de continuar.

A continuación, haz clic en Añadir método de envío. En el modal que se abre, selecciona Envío gratuito en el menú desplegable, seguido de Añadir método de envío nuevamente:

A continuación, en la lista de métodos de envío de la página de configuración, pasa el cursor sobre Envío gratuito y haz clic en el enlace Editar.

Se abrirá un panel de Ajustes de envío gratuito. En el menú desplegable El envío gratuito requiere…., selecciona Una cantidad mínima de pedido:

Entonces puedes definir la cantidad mínima de pedido. Cuando hayas terminado, haz clic en el botón Guardar los cambios.

Cómo Vincular Directamente los Productos a la Página de Checkout de WooCommerce

Otra forma de mejorar la experiencia de compra de tus clientes es crear enlaces directos de compra. Esto es útil para enviar a los clientes directamente a la caja desde las páginas de productos y ventas.

Crear un Enlace de Pago Directo Manualmente

Para crear y añadir un enlace de pago directo en WooCommerce, puedes usar la siguiente URL: exampledomain.com//checkout/?add-to-cart=ID.

Nota: querrás sustituir «exampledomain» e «ID» por tu nombre de dominio y el ID de producto específico que estás enlazando a la página de pago.

Para encontrar la identificación de un producto, navega a Productos > Todos los productos en tu panel de administración. Navega hasta el producto para el que quieres crear el enlace directo y luego pasa el cursor por encima del nombre del mismo para revelar el número de identificación del producto:

Una vez que pegues el ID del producto en la URL mencionada, puedes colocar el enlace en cualquier lugar de tu sitio WooCommerce. Puedes repetir este proceso para cada uno de tus productos, incluso para artículos variables y agrupados.

Creación de Un Enlace de Pago Directo Usando un Plugin

Tenemos en cuenta de que la estrategia anterior puede no ser el método más eficiente para todos los usuarios. Dependiendo de la cantidad de productos que tengas en tu tienda WooCommerce, puede ser muy lento.

Afortunadamente, si buscas un método más rápido, también puedes usar el plugin de Direct Checkout for WooCommerce:

Esta herramienta freemium te permite simplificar el proceso de compra de varias maneras, incluyendo la adición de un enlace directo desde la página de un producto a la pantalla de pago. Una vez que instales y actives el plugin en tu sitio WooCommerce, navega a WooCommerce > Direct Checkout:

En la pestaña General, selecciona Sí para la opción de Redirección al añadir al carrito y luego elige Finalizar Compra en el menú desplegable Añadido al carrito <redirigir a>. Haz clic en Guardar los cambios cuando hayas terminado.

A continuación, navega hasta la pestaña de Productos:

Habilita la opción Redirigir a la página del carrito tras añadir productos con éxito. De nuevo, haz clic en el botón Guardar los cambios. ¡Eso es todo!

Cómo Probar tu Página de Checkout de WooCommerce

En este punto, se espera que hayas implementado una variedad de formas para mejorar tu página de pago de WooCommerce. Ahora, es esencial asegurarte de que el proceso de compra funciona correctamente, para reducir el abandono y confirmar que ningún error interrumpa el trayecto del cliente.

Afortunadamente, hay una forma fácil de enviar una orden de prueba y pago a través de tu tienda WooCommerce, para asegurarte de que todo funciona como debe. Para hacer esto, primero necesitarás instalar el plugin de WooCommerce Payments en tu sitio (si no lo has hecho ya):

Una vez que instale y active el plugin, podrá activar el «modo de pruebas». Para ello, navega a WooCommerce > Pagos > Ajustes:

Recuerda guardar los cambios.

Una vez que el modo de pruebas está activado, puedes navegar por tu tienda WooCommerce y seleccionar cualquier producto. Añádelo a tu carrito de compras y luego pasa a la página de pago.

Rellene los campos del formulario de la página de pago según sea necesario. Para la información de pago, puedes usar cualquiera de los números de tarjeta de crédito falsos proporcionados por WooCommerce. También puedes usar tres dígitos cualquiera para el código CVC, y seleccionar cualquier fecha futura.

Cuando termines, haz clic en Realizar pedido. A continuación, navega hasta la pantalla Pagos > Transacciones:

Aquí, deberías ver la carga. Si está ahí, sabrás que tu página de pago funciona como debería. ¡Recuerda desactivar el modo de prueba cuando termines!

Los Mejores Plugins y Extensiones de WooCommerce Checkout

A lo largo de este post, hemos cubierto una amplia variedad de formas de cambiar la página de pago de WooCommerce, incluyendo bloques, atajos y código personalizado. También hemos mencionado algunos plugins clave que pueden ayudarte a añadir características y funcionalidades que de otra manera no estarían disponibles.

Sin embargo, hay algunos  add-ons, plugins y extensiones adicionales que aún no hemos mencionado, pero que te proporcionan más opciones de personalización para tu página de pago de WooCommerce. Algunas de las mejores que vale la pena considerar incluyen:

• WooCommerce Cart Notices Add-On. Este  add-on de WooCommerce te permite mostrar mensajes y notificaciones procesables a tus clientes durante el proceso de compra. Por ejemplo, puedes usarlo para notificarles de ventas y promociones relevantes.
• WooCommerce Checkout Manager. Hecho por el mismo equipo que desarrolló Direct Checkout para WooCommerce, este plugin es una poderosa extensión que puedes usar para optimizar tu página de pago. Puedes usarlo para editar, eliminar y añadir campos personalizados, así como para crear campos de condición.
• WooCommerce Checkout Add-Ons. Este plugin premium te permite añadir complementos gratuitos y de pago en la fase de compra. Es una herramienta útil para aumentar las conversiones y generar ingresos.

Dependiendo del tipo de sitio de comercio electrónico que tengas, puede que estés buscando más opciones. Si es así, te recomendamos que visites la Biblioteca de Extensiones de WooCommerce, que ofrece una gran cantidad de  add-ons para ampliar las características y la funcionalidad del plugin de WooCommerce, incluyendo tanto soluciones gratuitas como de pago.

Resumen

Hay diferentes maneras que puedes implementar para mejorar y optimizar tu página de pago de WooCommerce.

Dependiendo del cambio que quieras hacer y tu nivel de experiencia, puedes aprovechar los plugins y extensiones de WooCommerce, las plantillas de páginas y los temas, e incluso el código personalizado.

¿Tienes alguna pregunta sobre el uso o la edición de la página de pago de WooCommerce? ¡Háznoslo saber en la sección de comentarios de abajo!