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:

La página de pago predeterminada de WooCommerce.
La página de pago predeterminada de WooCommerce.

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

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:

La página de Checkout en WooCommerce.
La página de Checkout en WooCommerce.

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]:

El atajo de la página de pago de WooCommerce en WordPress.
El atajo de la página de pago de WooCommerce en WordPress.

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

La pestaña 'Avanzado' en la configuración de WooCommerce
La pestaña ‘Avanzado’ en la configuración de WooCommerce

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:

La página de configuración general en WooCommerce.
La página de configuración general en WooCommerce.

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

La pestaña "Cuentas y Privacidad" de la configuración de WooCommerce
La pestaña «Cuentas y Privacidad» de la configuración de WooCommerce

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:

Configuración de la política de privacidad en WooCommerce
Configuración de la política de privacidad en WooCommerce

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:

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.

¿Quiero... ✅ reducir el abandono del carrito de la compra, ✅ aumentar las conversiones, y ✅ aumentar los ingresos? Entonces este artículo está dirigido a ti. 👇 Aprende a construir una página de pago personalizada de WooCommerce en minutos ⏱Click to Tweet

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:

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:

El editor de campo de pago WooCommerce plugin
El plugin de WooCommerce 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:

El plugin del editor de formularios de compra en WooCommerce
El plugin del editor de formularios de pago en WooCommerce

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:

El panel de edición del campo de pago en el plugin de edición de campo de pago WooCommerce
El panel de edición del campo en el plugin de WooCommerce Checkout Field Editor

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:

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:

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:

La carpeta de plantillas de WooCommerce
La carpeta de plantillas de 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:

El archivo de la plantilla de la página de pago de WooCommerce
El archivo de la plantilla de la página de pago de WooCommerce

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:

La extensión de WooCommerce One Page Checkout
La extensión 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:

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:

El icono de la extensión de One Page Checkout en el editor de WordPress
El icono de la extensión de One Page Checkout en el editor de WordPress

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.

¿Necesitas un alojamiento rápido, fiable y totalmente seguro para su sitio web de comercio electrónico? Kinsta proporciona todo esto y soporte de clase mundial 24/7 por parte de expertos en WooCommerce. Consulta nuestros planes

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:

La configuración de envío de WooCommerce
La configuración de envío de WooCommerce

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ñadir un método de envío gratuito en WooCommerce
Añadir un método de envío gratuito en WooCommerce

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:

Configuración de envío gratuita en WooCommerce
Configuración de envío gratuita en WooCommerce

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 identificación de producto de WooCommerce
Identificación de un producto de WooCommerce

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:

El plugin de Direct Checkout for WooCommerce
El plugin de Direct Checkout para 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:

La configuración del plugin de Direct Checkout for WooCommerce
La configuración del plugin de Direct Checkout for WooCommerce

En la pestaña General, selecciona 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:

La opción de redirigir al carro en Direct Checkout for WooCommerce
La opción de redirigir al carro en Direct Checkout para WooCommerce

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):

El plugin de pagos de WooCommerce
El plugin de WooCommerce Payments

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

El modo de prueba de los pagos de WooCommerce
El modo de pruebas de los pagos de WooCommerce

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:

Probando las transacciones en WooCommerce
Probando las transacciones en WooCommerce

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!

Aprende a estilizar, cambiar y aprovechar tu página de checkout de WooCommerce ⚡️ para optimizar las conversiones y 💰 aumentar tus ingresos aquí ⬇️Click to Tweet

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:

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!


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 29 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.