La página de pago predeterminada de WooCommerce está pensada para una tienda y un público medios. Sin embargo, es muy probable que tu tienda sea todo menos corriente y que tu público tenga necesidades y preferencias únicas que un flujo de pago básico no satisface.
Si este es el caso de tu tienda, probablemente quieras personalizar la página de pago predeterminada de WooCommerce para hacerla más fácil de usar para tus clientes y animarlos a completar sus compras.
Afortunadamente, hay muchas maneras de editar la página de pago de WooCommerce. Puedes usar extensiones o bloques de WooCommerce, o editar la página manualmente con código. Al optimizar esta página, puedes crear una experiencia de pago más fluida.
Sin embargo, antes de hacer cambios, asegúrate de tener un plugin de copias de seguridad de WordPress instalado y activo, para que puedas restaurar rápidamente tu sitio si algo sale mal o simplemente quieres deshacer los cambios.
En esta publicación, analizaremos más de cerca por qué podrías querer editar la página de pago en WooCommerce. Luego, te guiaremos a través de tres métodos sencillos.
¿Por qué crear una página de pago personalizada de WooCommerce?
El año pasado, casi la mitad de los consumidores estadounidenses abandonaron sus compras en línea durante el proceso de pago. Algunas de las razones de esto incluyen un proceso de pago largo o complicado, y que el cliente no pueda calcular por adelantado el coste total del pedido.
Por lo tanto, es importante eliminar todas las barreras en el proceso de pago y ofrecer un proceso sencillo. Una forma de hacerlo es simplificando el flujo de pago para que los compradores puedan completar sus pedidos mucho más rápido.
Además, la personalización de la página de pago de WooCommerce puede utilizarse como estrategia de marketing. Por ejemplo, podrías recopilar datos de tus clientes para mejorar tus productos.
También puedes hacer ventas adicionales y ventas cruzadas de artículos para aumentar el valor medio del pedido. Podrías sugerir productos relacionados u ofrecer complementos como seguro y envoltorio para regalo.
Otra razón para crear una página de pago personalizada de WooCommerce es asegurarte de que encaje con el resto de tu sitio web. Podrías aplicar colores y fuentes personalizados o subir tu logotipo. Esto puede ayudarte a reforzar tu marca y ofrecer una experiencia de pago memorable.
Cómo editar los campos de pago de WooCommerce
Una forma eficaz de personalizar tu página de pago es editar los campos de pago de WooCommerce. Así, puedes ofrecer un proceso simplificado a los compradores y facilitarles completar un pedido.
De forma predeterminada, WooCommerce ofrece un conjunto de campos útiles para tu página de pago. Entre ellos se incluyen Nombre, Apellidos, Dirección de correo electrónico, Teléfono, Nombre de la empresa, Población/Ciudad, y más.
Si vendes principalmente a particulares, es poco probable que necesites el campo Nombre de la empresa en el formulario. Mientras tanto, si ofreces regalos o descuentos a los clientes en sus cumpleaños, tiene sentido añadir el campo Fecha de nacimiento al formulario.
Hay otras formas de personalizar los campos de WooCommerce. Puedes aplicar nuevos colores, ajustar el tamaño de los campos o cambiar el texto del marcador de posición.
También es una buena idea eliminar los campos innecesarios y configurar los campos obligatorios que deben completarse antes de que el cliente pueda continuar con el pedido. Puedes ir un paso más allá y permitir que los clientes confirmen una preferencia de entrega, soliciten una fecha de entrega específica o establezcan un método de contacto preferido.
Extensiones para editar los campos de pago de WooCommerce
La forma más sencilla de editar los campos de pago de WooCommerce es usar una extensión. Afortunadamente, hay muchas herramientas entre las que elegir.
Checkout Field Editor es una extensión premium de WooCommerce que te permite optimizar tu página de pago añadiendo, eliminando o editando campos.
Aunque no puedes eliminar los campos principales, sí puedes moverlos. Esto te da un mayor control sobre el flujo del proceso de pago.
Si gestionas una tienda grande, puede que necesites una herramienta más avanzada, como WooCommerce Checkout Add-Ons.
Con esta herramienta, puedes insertar complementos gratuitos (y de pago) en la fase de finalización de compra. Por ejemplo, si vendes productos personalizados o regalos, puedes permitir que los clientes añadan un mensaje al pedido.
También te permite ofrecer servicios de envoltorio para regalo y seguro. Incluso puedes dar a los clientes la opción de dejar una propina.
El plugin te ofrece total flexibilidad sobre tus campos de WooCommerce. Puedes crear complementos condicionales, añadir costes fijos o basados en porcentajes y actualizar dinámicamente los totales del pedido. Además, la herramienta es compatible con WooCommerce Subscriptions y los pedidos de renovación.
Cómo personalizar tu página de finalización de compra de WooCommerce
Ahora que sabes un poco más sobre los campos de finalización de compra de WooCommerce, veamos tres formas de personalizar tu página de finalización de compra.
1. Usa los bloques de carrito y de finalización de compra de WooCommerce
La primera forma de personalizar tu página de finalización de compra de WooCommerce es usar la extensión Woo Cart and Checkout Blocks. Esta herramienta es completamente gratuita.
Busca la página de WooCommerce Blocks y haz clic en Descarga gratuita.
A continuación, se te guiará por el proceso de finalización de compra (aunque no se te pedirá que pagues nada).
Hay distintas formas de personalizar tu experiencia de finalización de compra con estos bloques. Puedes configurar complementos de producto, aceptar varios métodos de pago, ofrecer opciones de pago exprés y mucho más.
Ten en cuenta que los bloques de carrito y de finalización de compra solo están disponibles en sitios con WordPress 6.9 o superior. Además, tendrás que reemplazar los shortcodes existentes en tus páginas de carrito y de finalización de compra.
Primero, ve a Páginas en tu escritorio y abre Finalización de compra desde la lista de páginas. Aquí, puedes eliminar el shortcode de finalización de compra [woocommerce_checkout].
![Elimina el shortcode de finalización de compra [woocommerce_checkout] en el editor de la página.](https://jetpackstaging.wordpress.com/wp-content/uploads/2023/09/3b8d8-image-56.png)
Luego, busca el Bloque de finalización de compra y añádelo a tu página. Ahora deberías ver una vista previa de tu carrito basado en bloques, que puedes personalizar usando los ajustes de la barra lateral.
Ahora ya lo tienes todo listo para personalizar tu página de finalización de compra. Puedes mostrar u ocultar los números de los pasos de finalización de compra, mostrar u ocultar ciertos campos y hacer que el campo Teléfono sea obligatorio usando los ajustes del bloque.
Además, puedes configurar complementos de pago, permitir a los compradores aplicar cupones o notas a sus pedidos, habilitar varias opciones de envío y mucho más.
2. Personaliza tu página de finalización de compra usando extensiones de WooCommerce
Aunque WooCommerce Blocks ofrece una forma sencilla de personalizar tu página de finalización de compra, también puedes empezar con varias extensiones de WooCommerce. Veamos algunas opciones.
Haz recomendaciones de productos
Una de las mejores formas de aumentar el valor medio de los pedidos es hacer recomendaciones de productos en la página de pago. Afortunadamente, la extensión Product Recommendations hace que esto sea muy sencillo.
Puedes presentar ventas cruzadas bajo títulos llamativos como «Comprados juntos con frecuencia» o «También te podría gustar».
Como alternativa, puedes ofrecer ventas adicionales de productos para aumentar el valor del pedido. Además, puedes presentar tus recomendaciones de productos en toda tu tienda, incluidas las páginas de producto individuales y tu página de confirmación del pedido.
Activa varias direcciones de envío
Otra forma de personalizar tu página de pago de WooCommerce es activar varias direcciones de envío. A veces, los clientes hacen pedidos que constan de varios productos que deben enviarse a distintas direcciones (como las direcciones de casa y del trabajo).
Además, a algunos clientes les gusta comprar regalos y enviarlos directamente a sus amigos y familiares. Sin esta opción, los clientes se ven obligados a hacer pedidos separados para cada dirección de envío, lo que puede llevar bastante tiempo.
Puedes usar la extensión Shipping Multiple Addresses para ofrecer esta función.
Los clientes pueden solicitar que cualquier cantidad de productos se envíe a cualquier número de direcciones. Además, pueden guardar todas estas direcciones de envío en sus cuentas.
Una vez que compres esta extensión, todo lo que tienes que hacer es instalarla en tu sitio de WordPress y habilitar varios métodos de envío.
Permite que los clientes elijan una fecha de entrega
Una excelente manera de darle a tu tienda una ventaja competitiva es permitir que los clientes elijan una fecha de entrega para recibir sus pedidos. Esto puede mejorar la satisfacción general de los clientes, ya que demuestra que estás dispuesto a ir un paso más allá.
Con la extensión Order Delivery for WooCommerce, puedes limitar el número de pedidos por día para asegurarte de poder procesar todos los pedidos dentro del plazo especificado.
Además, puedes ofrecer a los clientes una lista de opciones de fechas de entrega basada en días festivos, métodos de envío y otros factores.
Una vez que compres e instales la extensión en WooCommerce, puedes mostrar un selector de fecha de entrega en tu formulario de pago. Aquí, puedes determinar franjas horarias, definir un rango de entrega y cobrar costes adicionales cuando los clientes elijan una fecha/hora específica.
Ofrece complementos al finalizar la compra
Otra forma de optimizar la página de pago de WooCommerce es añadir opciones de venta adicional. Por ejemplo, podrías ofrecer seguro de envío, gestión urgente, artículos promocionales de la empresa o envoltorio para regalo.
También podrías permitir que los clientes elijan entre una variedad de complementos de pago al finalizar la compra, como mensajes de regalo o recibos para regalo. WooCommerce Checkout Add-Ons ofrece una forma sencilla de hacerlo.
Con esta extensión, puedes añadir varios tipos de campos a tu formulario de pago, según el tipo de complemento. Así, podrías incluir campos de texto adicionales, botones de opción, casillas de verificación o subidas de archivos.
Puedes configurar costes de importe fijo o basados en porcentaje. Mientras tanto, puedes incluir complementos condicionales que cambian según factores como el número de productos en el carrito y el subtotal del carrito.
Muestra mensajes a los clientes al finalizar la compra
La personalización de tu página de pago de WooCommerce puede consistir simplemente en mostrar un mensaje. Puedes hacerlo para captar la atención de los clientes, promocionar ofertas en tu tienda o dirigirlos hacia artículos relacionados.
Puedes usar Cart Notices, una extensión de WooCommerce, para hacerlo.
Una vez que hayas comprado e instalado la extensión, puedes mostrar mensajes dinámicos al finalizar la compra para animar a los clientes a comprar más productos. Por ejemplo, podrías mostrar un aviso que diga: «Añade un artículo más para optar a envío gratis».
Si ofreces envío exprés, podrías motivar a los clientes a hacer un pedido mostrando un mensaje que diga: «Haz tu pedido en los próximos diez minutos para recibirlo al día siguiente».
Ofrece una opción de envoltorio para regalo
Aunque muchos de tus clientes compran para sí mismos, algunos están comprando regalos para sus seres queridos. Por lo tanto, es una gran idea ofrecer una opción de envoltorio para regalo en tu página de pago de WooCommerce.
La extensión Gift Wrapper for WooCommerce te permite añadir esta opción a tu tienda.
De esta manera, puedes personalizar tu página de la tienda permitiendo a los clientes añadir envoltorio para regalo a artículos individuales. Los compradores también pueden aplicar el envoltorio para regalo a todo su pedido al finalizar la compra. Además, puedes configurar diferentes opciones de precio para este servicio.
Este plugin es compatible con productos WooCommerce simples y variables, y puedes ofrecer un número ilimitado de diseños de envoltorio para regalo. Los compradores incluso pueden añadir un mensaje personalizado a sus pedidos.
3. Personaliza manualmente tu página de pago de WooCommerce
También puedes realizar cambios en la página de pago manualmente. Esta opción es la mejor si te sientes cómodo trabajando con código.
Si editas directamente los archivos de tu sitio, lo mejor es crear un tema hijo. De lo contrario, cuando cambies de tema o incluso actualices tu tema principal actual, perderás todos los cambios que hayas realizado.
Además, es buena idea hacer una copia de seguridad nueva de tu tienda WooCommerce ya que un solo error puede romper tu sitio. Hay muchos plugins de copias de seguridad de alta calidad entre los que elegir, pero Jetpack VaultPress Backup es una herramienta potente y fiable.
El plugin funciona automáticamente y crea copias de seguridad en tiempo real que se almacenan de forma segura en Jetpack Cloud. Además, VaultPress Backup está diseñado específicamente para sitios WordPress y WooCommerce, lo que significa que hace copias de seguridad de tus archivos, base de datos y datos de clientes.
Edita el diseño visual de tu página de pago de WooCommerce usando CSS
Para editar manualmente tus campos de WooCommerce, primero querrás usar la herramienta de inspección de tu navegador para identificar el área exacta que deseas personalizar. Luego, ya estarás listo para aplicar los cambios a tu tema.
Aquí tienes una lista de las etiquetas principales (incluidas las clases y los ID) que te permiten editar el diseño de tu página de pago:
<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout">
<div id="customer_details" class="col2-set">
<div class="woocommerce-billing-fields">
<p class="form-row">
<div class="woocommerce-shipping-fields">
<p class="form-row">
<div class="woocommerce-additional-fields">
<div id="order_review" class="woocommerce-checkout-review-order">
<table class="woocommerce-checkout-review-order-table">
<div id="payment">
<ul class="wc_payment_methods payment_methods methods">
<div class="form-row place-order">Para darte un ejemplo, quizá quieras cambiar el color de fondo de un campo de entrada. En este caso, puedes usar el siguiente fragmento de código:
.woocommerce-checkout input[type="text"] {
background-color: #222;
}Como alternativa, quizá quieras eliminar un campo de tu página de pago, como Nombre de la empresa en la sección Facturación correspondiente. En este caso, tendrás que añadir el siguiente fragmento de código a functions.php para aplicarlo.
function wc_remove_checkout_fields( $fields ) {
unset( $fields['billing']['billing_company'] );
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );Asegúrate de guardar los cambios cuando estés listo.
Cómo crear un proceso de pago de WooCommerce en una sola página
Si quieres simplificar la experiencia de compra, quizá quieras crear una experiencia de pago en una sola página, utilizando un plugin como WooCommerce One-Page Checkout. Con esta herramienta, puedes añadir campos de pago a cualquiera de tus páginas de destino.
Esta extensión ofrece tres formas de crear un pago en una sola página. Primero, puedes activarla producto por producto.
Como alternativa, puedes configurar un pago en una sola página con un shortcode. Todo lo que tienes que hacer es añadir el siguiente shortcode a cualquier página o entrada de tu sitio:
[woocommerce_one_page_checkout]
Cómo aumentar la velocidad de tu página de pago
Aunque es una buena idea personalizar tu página de pago de WooCommerce, también querrás asegurarte de que esté optimizada para el rendimiento. La tasa de rebote aumenta en un promedio del 32 % a medida que el tiempo de carga de la página pasa de uno a tres segundos.
Para maximizar las conversiones y las ventas, es importante mejorar la velocidad de tu sitio web. Hay diferentes formas de optimizar tu página de pago de WooCommerce, pero Jetpack Boost ofrece una solución fácil y práctica.
Hay una versión gratuita del plugin, que es fácil de configurar. Ve a Plugins → Añadir nuevo y busca «Jetpack Boost». Después, haz clic en Instalar ahora → Activar.
Ahora puedes ir a Jetpack → Boost en tu panel de administración.
Aquí, puedes activar cualquiera de los ajustes de optimización que quieras aplicar a tu sitio web. Por ejemplo, quizá quieras cargar las imágenes de forma diferida para mejorar tus tiempos de carga.
También es una buena idea optimizar la carga de CSS crítico. Esta función mueve la información de estilo al inicio de la página para que tu contenido se cargue mucho más rápido. Por ello, es una excelente manera de mejorar tu experiencia general de usuario.
También puedes pasarte a un plan premium de Jetpack para acceder a funciones adicionales. Por ejemplo, el plugin regenerará automáticamente el CSS crítico de tu sitio (y las puntuaciones de rendimiento) cada vez que hagas un cambio en tu sitio.
Preguntas frecuentes sobre la personalización de la página de pago
Este artículo ha cubierto lo básico de la personalización de la página de pago de WooCommerce, pero quizá todavía tengas algunas preguntas. Respondamos a algunas de ellas.
¿Qué es la página de pago de WooCommerce?
Cuando instalas WooCommerce en WordPress, obtendrás una página de pago predeterminada. Esta incluye campos para que los clientes introduzcan su nombre, dirección, correo electrónico, información de pago y más. Una vez que hayan introducido estos datos, podrán completar su pedido.
¿Cuál es la mejor manera de personalizar una página de pago de WooCommerce?
No existe una única mejor manera de personalizar la página de pago de WooCommerce, ya que depende de tus preferencias, nivel de habilidad y experiencia. Para principiantes, puede resultar más fácil usar WooCommerce Blocks o una extensión de WooCommerce, ya que no necesitarás usar código.
Es posible que a los usuarios con más experiencia les guste editar los campos de pago de WooCommerce usando fragmentos de código. Esto implica añadir fragmentos de CSS en el Personalizador de WordPress o en tu tema hijo.
¿Debería hacer una copia de seguridad de mi sitio antes de editar la plantilla de la página de pago?
La página de pago de WooCommerce es una de las páginas más importantes de tu sitio web. Por lo tanto, es importante hacer una copia de seguridad de tu sitio de WordPress antes de realizar cualquier edición.
De este modo, si cometes un error o haces un cambio que no te gusta, es fácil restaurar tu sitio web a una versión anterior. No tendrás que solucionar errores en tu sitio ni pasar por la molestia de deshacer el cambio.
La forma más sencilla de hacer una copia de seguridad de tu sitio es usar un plugin como Jetpack VaultPress Backup. Una vez instalado, esta práctica herramienta hace copias de seguridad en tiempo real que se almacenan de forma segura en la nube de Jetpack.
Además, obtendrás acceso a un registro de actividad para reforzar la seguridad de tu sitio. Mientras tanto, el proceso de restauración es superfácil, lo que te permite volver a poner tu sitio en funcionamiento en solo unos pocos clics.
¿Qué más puedo hacer para mejorar mi página de pago de WooCommerce?
Es una gran idea personalizar tu página de pago de WooCommerce para aumentar las ventas y mejorar la experiencia del cliente, pero hay otras formas de mejorar tu página de pago.
Es importante priorizar la velocidad de tu sitio, ya que esto puede reducir la tasa de rebote y mejorar la experiencia de compra. Puedes instalar un plugin como Jetpack Boost para acelerar tus tiempos de carga.
Una vez activado, Jetpack Boost te ofrece acceso a una interfaz limpia donde puedes vigilar tu puntuación de rendimiento. Además, la herramienta facilita activar funciones de optimización como la carga diferida, CSS crítico y el aplazamiento de JavaScript no esencial.
Optimiza la experiencia de pago de tu tienda WooCommerce
Aunque WooCommerce ofrece una página de pago integrada, hay muchísimas formas de mejorarla para aumentar las ventas y configurar opciones útiles de pago. Por ejemplo, puedes habilitar varias direcciones de envío, hacer obligatorios ciertos campos u ofrecer envoltorio para regalo.
En resumen, aquí tienes tres formas de editar y personalizar tu página de pago de WooCommerce:
- Usa los bloques WooCommerce Cart and Checkout.
- Usa extensiones de WooCommerce como Cart Notices y Product Recommendations.
- Usa código para personalizar manualmente la página de pago.
También querrás optimizar tu página de pago para mejorar el rendimiento, usando una herramienta fácil de usar para principiantes como Jetpack Boost. De esta manera, puedes acelerar tu sitio y mejorar la experiencia del usuario, lo que puede generar más conversiones.
Jetpack 