Cómo personalizar el checkout de WooCommerce: una guía paso a paso

Personalizar la experiencia de pago en tu tienda WooCommerce puede ayudarte a reducir las tasas de abandono de carrito, incentivar a los clientes a completar sus compras e incluso motivarlos a gastar más.

En este tutorial, te daremos una guía paso a paso sobre cómo personalizar la página de pago de tu tienda online, tanto si eres un usuario nuevo de WordPress o un propietario experimentado de una tienda WooCommerce.

Por qué deberías personalizar el checkout de WooCommerce

WooCommerce es uno de los plugins eCommerce para WordPress más populares en el mercado. Ofrece muchas funciones integradas para configurar una tienda sin necesidad de saber programar.

Sin embargo, la página de pago predeterminada podría no alinearse del todo con tus necesidades específicas y la identidad de marca de tu negocio. Al personalizar el checkout predeterminado en WooCommerce, puedes lograr:

Mejorar la experiencia de usuario

Un proceso de compra largo y complicado puede confundir a los visitantes y desmotivarlos a realizar la compra. Al eliminar los campos innecesarios y proporcionar una guía clara, los clientes pueden navegar de manera más fluida y rápida.

Adaptar el proceso de compra a las necesidades y preferencias específicas de tu público objetivo puede hacer que se sientan más a gusto. Por ejemplo, puedes permitir que los compradores elijan su idioma preferido, moneda, plataforma de procesamiento de pagos y método de envío para una experiencia más positiva.

Aumentar las tasas de conversión

Según las recientes estadísticas de eCommerce, casi el 70% de los compradores abandonan su carrito antes de completar el proceso de pago. Entre las razones se incluyen tener un proceso de pago demasiado complejo, costos de envío inesperadamente altos, la obligación de crear una cuenta, un rendimiento deficiente del sitio web y la falta de distintas alternativas de pasarelas de pago.

Podrás mejorar tus tasas de conversión solucionando, a través de la personalización, los problemas que los usuarios tienen en tu página de pago o checkout.

Aumentar el valor promedio de pedido (AOV, por sus siglas en inglés)

La personalización del checkout te permite implementar estrategias para la venta cruzada y la venta adicional.

Las recomendaciones de productos personalizadas, ofertas especiales y ofertas por paquete, si son presentadas durante el proceso de pago, pueden atraer a los clientes a añadir más artículos a su carrito y aumentar el valor promedio de los pedidos.

Cómo personalizar el checkout de WooCommerce usando plugins

Antes de personalizar el checkout, te recomendamos crear un sitio de staging primero. De esta manera, puedes probar los cambios en un entorno seguro sin afectar tu sitio que ya está público.

Afortunadamente, el hosting WooCommerce de Hostinger viene con una herramienta de staging de WordPress integrada que puedes configurar a través del hPanel.

1. Solo tienes que dirigirte a Sitios web en la barra superior y seleccionar Panel junto a tu nombre de dominio.
2. En el menú de la izquierda, navega hasta WordPress → Staging.
3. Haz clic en Crear staging para configurar tu sitio de prueba.

Si eres nuevo en WooCommerce o en WordPress en general, usar un plugin vuelve mucho más sencillo el proceso de personalización.

Aquí tienes varios plugins de embudo de ventas y creadores de páginas de pago compatibles con WooCommerce:

• FunnelKit Creador. Obtén plantillas y formularios de pago ya hechos que puedes editar usando el editor de bloques Gutenberg o creadores de páginas de terceros. Puedes agregar bloques, imágenes, textos y campos personalizados específicos para tus necesidades.
• CartFlows. Es uno de los mejores plugins de WooCommerce para optimizar el flujo de pago. CartFlows simplifica los procesos de agregar ofertas de venta adicional y personalizar la página de Gracias de WooCommerce.
• Flexible Checkout Fields para WooCommerce. Su interfaz fácil de usar te permite editar los campos de checkout de WooCommerce con facilidad. La versión pro también ofrece funciones adicionales como casillas de verificación, botones de radio y cargas de archivos.
• Checkout Field Editor para WooCommerce. Te permite crear fácilmente un campo personalizado para obtener las direcciones de envío y facturación de los clientes y cualquier información adicional que puedas necesitar.

Cómo personalizar el checkout de WooCommerce con FunnelKit

En este tutorial, te mostraremos cómo personalizar el checkout WooCommerce utilizando el creador FunnelKit. Sigue estos pasos para configurar el plugin:

1. Abre tu panel de WordPress, ve a Plugins → Add New Plugin, y busca FunnelKit Builder.
2. Una vez que hayas realizado la instalación y activado el plugin, dirígete al panel de FunnelKit en la barra lateral izquierda.
3. Ve al menú Quick Setup y elige Create Store Checkout.

FunnelKit te permite crear un embudo de ventas desde cero o usar una plantilla prediseñada de checkout de WooCommerce. Si prefieres la segunda opción, haz clic en Create Store Checkout y elige entre una amplia gama de plantillas de embudo.

Para una búsqueda más específica, cambia los filtros según los tipos de página de pago y la compatibilidad con los creadores de páginas: Elementor, Divi, Block Editor, Oxygen u otro.

Ten en cuenta que la versión gratuita solo permite un proceso de pago de una sola página. Para crear una página de pago en varios pasos, necesitas registrarte como usuario pro.

Pasa el cursor sobre cada plantilla y haz clic en el botón Preview para echar un vistazo más de cerca a tu diseño favorito. Así podrás ver una vista previa de tu página de pago en dispositivos de escritorio, smartphones y tabletas.

Después de encontrar el diseño correcto, selecciona Importar este embudo en la parte superior derecha de tu pantalla. Ingresa nombre de tu embudo y haz clic en Done.

Para ajustar el diseño y contenido de tu página de pago, haz clic en el botón Preview dentro de la caja Checkout.

Desde allí, selecciona Edit Checkout en la barra de menú superior, y se abrirá la interfaz de Gutenberg.

Realiza cambios como lo harías en cualquier página de WordPress. Simplemente selecciona cualquier elemento como texto, ícono, botón de pago o contenedor de bloque para personalizar su contenido, tipografía, color, espaciado y tamaño.

Por ejemplo, puedes subir tu propio logo haciendo clic en el predeterminado y seleccionando Replace. Luego, elige una imagen de la biblioteca de medios de WordPress o sube una nueva desde tu computadora.

Puedes personalizar tu logo aun más a través de la pestaña Block en la barra de menú de la derecha. Establece tu logo como Default o Rounded, ingresa un texto alternativo adecuado para la imagen, selecciona una relación de aspecto y ajusta su ancho y altura.

Para personalizar el diseño de tu página, selecciona el contenedor Checkout Form y dirígete a Style en el menú de la derecha. Aquí, puedes jugar con varias opciones de edición:

• Familia de fuentes. Elige una fuente que represente mejor la identidad de tu marca, ya sea profesional o informal.
• Tamaño y peso de la fuente. Ajusta qué tan grande o pequeño debe aparecer el texto y establece el grosor de los caracteres. Ten en cuenta que aumentar el tamaño de la fuente mejora la legibilidad, mientras que ajustar el peso te ayuda a enfatizar ciertos elementos.
• Alineación. Mueve la posición de tu contenido dentro del contenedor o la página a la izquierda, centro o derecha.
• Color. Cambia el fondo, el texto y los colores de links para que coincidan con la identidad visual de tu marca o para resaltar información importante en la página de pago.
• Estilo de borde. Modifica el estilo, color, ancho y radio del borde para mejorar el atractivo visual del formulario.

Una vez que todo se vea bien, no olvides hacer clic en Publicar o Actualizar para guardar tus cambios.

Personaliza el formulario de envío en la página de checkout

También puedes personalizar el diseño del formulario de envío seleccionando el bloque Checkout Form y navegando a General → Shipping Information en la barra lateral derecha.

Desde allí, puedes ajustar el tamaño de cada cuadro de campo que contiene la información personal del cliente, la dirección de envío y la dirección de facturación. Hay cuatro opciones que puedes elegir del menú desplegable:

• Completo. La caja abarcará todo el ancho de su contenedor principal. Como puedes ver en la captura de pantalla de arriba, los campos predeterminados de Email y Street address son ejemplos de columna completa.
• Una mitad. Elegir esta opción significa dividir el contenido en dos columnas iguales, igual a como están posicionados los campos de First name y Last name. 
• Un tercio. Esta opción divide el contenido en tres partes iguales. Toma nota de cómo ajustamos los campos de Apartments, Town/City y Postcode en una sola fila.
• Dos tercios. Selecciona este diseño si quieres hacer una columna más ancha que la mitad de los campos sin ocupar todo el ancho del contenedor principal. La caja de Country es un excelente ejemplo de una columna de dos tercios.

Para editar el contenido de tu formulario de envío, guarda tus cambios y haz clic en Back to Checkout Page en la parte superior del editor de WordPress. Bajo la pestaña Design, personaliza los campos de pago para la dirección de envío, el método de envío y el resumen del pedido.

Para agregar nuevos campos al formulario de la página de pago, simplemente arrástralos desde el menú Fields, en la barra lateral derecha, hacia tu sección deseada.

Lamentablemente, es necesario comprar el plan pro de FunnelKit para añadir campos premium como Products y Order Total.

Si deseas organizar cómo aparecen las columnas en cada sección, haz clic y mantén presionado cualquier campo y suéltalo donde desees. Asimismo, puedes eliminar un campo pasando el cursor sobre él y haciendo clic en el ícono X.

También hay una opción para personalizar la etiqueta de cada campo, de manera que los clientes puedan completar el formulario correctamente y finalizar su proceso de pago sin confusión.

Para hacerlo, haz clic en cualquier campo solo una vez, y aparecerá la ventana emergente Edit Field. Luego, ingresa el nombre de la etiqueta y el valor del marcador de posición. Haz clic en Update para guardar los cambios.

Una vez que todo esté configurado, asegúrate de hacer clic en Save para que no pierdas nada.

Cómo personalizar el campo de cupón de WooCommerce durante el checkout

Integrar un campo de cupones en tu página de pago puede ofrecer descuentos a los clientes y fomentar la conversión.

Para añadir un campo de cupón, dirígete al editor Gutenberg y selecciona el bloque Checkout Form. En la barra lateral derecha, ve a General → Collapsible Order Summary, y luego activa el botón Enable.

Desplázate hacia abajo hasta Coupon Button Text e ingresa un texto breve de llamado a la acción. El valor predeterminado es Apply. Asegúrate de que el botón Enable Coupon esté activado.

También es posible ocultar el campo del código de cupón y solo hacerlo visible una vez que los usuarios hagan clic en él activando la opción Collapsible Coupon Field.

Cómo añadir productos a tu checkout de WooCommerce

Haz clic en Back to Checkout Page, abre la pestaña Products y haz clic en Add Product. Busca los productos que has agregado antes y selecciona Add.

Después de eso, configura los ajustes de descuento, si tienes alguno, y establece la cantidad de stock para cada producto. No olvides guardar tus cambios una vez que hayas finalizado.

Si actualizas a la versión pro, FunnelKit también ofrece la posibilidad de crear ofertas de venta adicionales de un solo clic para aumentar tus ganancias. Para hacerlo, haz clic en el ícono Back (←). En Steps, selecciona One Click Upsell y elige una plantilla adecuada.

Para mejorar la experiencia del usuario, puedes mostrar tus productos y el formulario de checkout en la misma página utilizando plugins como One Page Checkout y Layouts para WooCommerce.

Personaliza las opciones de pago en la página de checkout

Por defecto, FunnelKit es compatible con todos los métodos de pago que WooCommerce admite, incluyendo el pago contra reembolso, las transferencias bancarias y los cheques.

Si deseas ofrecer incluso más opciones de pago, la instalación de plugins como WooCommerce Stripe Payment Gateway puede ayudarte. Además de los principales proveedores de tarjetas de crédito y débito como Visa, MasterCard, UnionPay y American Express, este plugin también admite Google Pay y Apple Pay.

Pero si principalmente recibes pagos a través de PayPal, será necesario realizar una instalación separada del plugin de WooCommerce PayPal Payments.

Para configurar Stripe para WordPress, dirígete a Plugins → Add New Plugin  e ingresa WooCommerce Stripe Payment Gateway en el campo de búsqueda. Una vez encontrado, haz clic en Install Now. Espera unos segundos y activa el plugin.

Luego, ve a WooCommerce → Settings en el menú de la izquierda y abre la pestaña Payments. Desde allí, activa todos los métodos de pago que desees.

Publica tu página de checkout personalizado

Para publicar tu nueva página de pago creada, vuelve a FunnelKit → Store Checkout, haz clic en el ícono de tres puntos dentro del cuadro de pago y selecciona Publish.

¡Listo! Haz creado y publicado con éxito una página de pago o checkout personalizado. Debería aparecer automáticamente cuando los usuarios hagan clic en su carrito.

Para verificarlo, abre tu navegador y visita tu sitio web WordPress para ver si la página de pago personalizada de WooCommerce se muestra correctamente.

Si tu sitio aún muestra el diseño predeterminado de WooCommerce, sigue estos pasos:

• Abre tu panel de WordPress y dirígete a WooCommerce → Settings.
• Elige la pestaña Advanced y desplázate hacia abajo hasta Checkout Page.
• Abre el menú desplegable, ingresa tu URL personalizada de la página de pago y asigna la página correcta.
• Haz clic en Save Changes.

Personalización del checkout de WooCommerce para usuarios avanzados

Usar código personalizado te permite modificar aun más la página de pago de WooCommerce. Dicho esto, no recomendamos este método para aquellos que no están familiarizados con la edición de código, porque hasta los errores más pequeños pueden llevar a problemas críticos en el sitio web.

Cómo personalizar el checkout de WooCommerce usando código personalizado

Puedes añadir campos personalizados a tu página de pago personalizada de WooCommerce editando tu tema en el archivo functions.php.

Pero primero, asegúrate de crear un tema child de WordPress para que tu personalización no se vea afectada por ninguna actualización del tema en sí.

Debes acceder a los archivos de tu sitio WordPress. Puedes usar un cliente FTP como FileZilla o el administrador de archivos de tu cuenta de hosting. Si eres un usuario de Hostinger, sigue estos sencillos pasos:

• Inicia sesión en tu cuenta de hPanel, dirígete a Sitios web y haz clic en Administrar junto a tu nombre de dominio.
• En el menú de la izquierda, desplázate hacia abajo hasta Archivos→ Administrador de archivos y elige Acceder a los archivos de (tu dominio).
• Abre public_html → wp-content → temas y abre la carpeta del tema que estás usando actualmente.
• Haz clic derecho en el archivo functions.php  y luego selecciona Editar.
• Escribe una función PHP que contenga el código que quieres ejecutar al final del archivo. Usa add_action() para incrustar tu función personalizada.

Por ejemplo, para añadir un nuevo campo, usa:

add_action('woocommerce_after_order_notes', 'your_custom_function');

Dentro de la función personalizada, usa woocommerce_form_field para agregar el campo. Después, especifica el tipo, como texto, casilla de verificación, clase, etiqueta, marcador de posición y estado requerido:

function your_custom_function($checkout) {
    echo '<div id="your_custom_div">';
    woocommerce_form_field('your_custom_field', array(
        'type'          => 'text',
        'class'         => array('your-custom-class form-row-wide'),
        'label'         => __('Your Custom Field'),
        'placeholder'   => __('Enter something'),
        'required'      => true,
    ), $checkout->get_value('your_custom_field'));
    echo '</div>';
}

Para eliminar un campo, usa el filtro woocommerce_checkout_fields. Por ejemplo, si quieres eliminar el campo del teléfono de facturación, ingresa este fragmento de código:

add_filter('woocommerce_checkout_fields', 'custom_remove_fields');
function custom_remove_fields($fields) {
    unset($fields['billing']['billing_phone']);
    return $fields;
}

También es posible modificar los campos existentes con el filtro woocommerce_checkout_fields. Puedes cambiar propiedades como etiqueta, clase o tipo de campos existentes.

Aquí tienes un ejemplo:

add_filter('woocommerce_checkout_fields', 'custom_modify_fields');
function custom_modify_fields($fields) {
    $fields['billing']['billing_first_name']['label'] = 'New Label';
    $fields['billing']['billing_first_name']['required'] = false;
    return $fields;
}

Para guardar los datos de tus campos personalizados cuando se realiza un pedido, utiliza el gancho de acción woocommerce_checkout_update_order_meta:

add_action('woocommerce_checkout_update_order_meta', 'save_custom_field_data');
function save_custom_field_data($order_id) {
    if (!empty($_POST['your_custom_field'])) {
        update_post_meta($order_id, 'Your Custom Field', sanitize_text_field($_POST['your_custom_field']));
    }
}

Cómo aplicar un estilo personalizado a la página de checkout con CSS

Cascading Style Sheets (CSS) es uno de los lenguajes más populares para ajustar la apariencia de tu sitio WooCommerce. Con él, puedes ajustar elementos visuales, incluyendo cambiar el color de fondo de los campos y hacer sus esquinas más redondeadas.

Solo tienes que acceder al personalizador de CSS en WordPress yendo a Apariencia → Personalizar. En el Personalizador de tema, ve a la sección CSS Adicional en el menú de la izquierda. Aquí es donde puedes escribir o pegar tu código CSS personalizado.

Para personalizar elementos específicos en la página de checkout, es necesario conocer sus selectores CSS inspeccionando los elementos de la página. Si usas Google Chrome, haz clic derecho en cualquier elemento de la página y selecciona Inspeccionar. Esto abrirá las herramientas de desarrollador y mostrará resaltada la estructura HTML seleccionada.

Pasa el cursor sobre diferentes partes del HTML para encontrar la sección correspondiente de la página de checkout. Las herramientas de desarrollo te mostrarán los selectores CSS de estos elementos.

Desde la sección CSS Adicional, comienza a escribir reglas CSS dirigidas a los selectores que identificaste. Por ejemplo, para cambiar el color de fondo del botón de pago, podrías escribir algo así:

.woocommerce-checkout #place_order {
    background-color: #000; /* Change #000 to your desired color */
    color: #fff; /* Change the text color if needed */
}

Puedes hacer cambios similares para otros elementos como, por ejemplo, campos de formulario, etiquetas, encabezados y más.

Una vez que hayas terminado y estés conforme con los cambios, haz clic en Publicar. Después de eso, revisa tu página de checkout para asegurarte de que los cambios se vean como deseas.

Cómo usar hooks de acción de WooCommerce

Los ganchos de acción o action hooks en WooCommerce y WordPress son puntos donde puedes insertar código PHP personalizado. Estos hooks se ejecutan en momentos específicos durante el procesamiento de una página, lo que te permite modificar o mejorar su funcionalidad.

Por ejemplo, puedes usarlos para agregar logos de tarjetas de crédito en la página de checkout o en el carrito, para aumentar la confianza del usuario y reducir los abandonos.

Los nombres de estos hooks suelen ser autoexplicativos, indicando dónde permite la inserción de código. Algunos ejemplos de WooCommerce son:

woocommerce_before_cart 
woocommerce_checkout_before_customer_details 
woocommerce_after_main_content

Cada hook corresponde a una parte diferente de las páginas de WooCommerce, como Carrito, Pago y Página de producto único.

Para agregar un elemento, puedes usar la función add_action en tu archivo functions.php del tema. Por ejemplo, para agregar un mensaje antes del formulario de envío, puedes insertar el siguiente fragmento:

add_action( 'woocommerce_before_checkout_shipping_form', function() {
    echo 'Your custom message or HTML here';
});

Este código insertará cualquier contenido que incluyas en la declaración echo durante la cual se ejecuta el hook woocommerce_before_checkout_shipping_form.

Si bien los hooks de acción se utilizan principalmente para agregar contenido, puedes usarlos también para eliminar elementos desenganchando o sobrescribiendo las funciones que añaden el contenido predeterminado. Por ejemplo, si un gancho de acción específico llama a una función que agrega un campo o sección que quieres eliminar, puedes ingresar remove_action para desenganchar esa función.

Después de agregar tu código personalizado, prueba tu tienda WooCommerce para verificar de que los cambios funcionen como corresponde. Asegúrate de probar todo en detalle, cualquier pequeño error puede llegar a tener un impacto negativo enorme en la funcionalidad de tu tienda.

Como alternativa, también puedes instalar un plugin de gestión de fragmentos de código como Code Snippets. Este método permite gestionar cada fragmento de código por separado.

Ten en cuenta que algunos temas de WooCommerce también tienen sus propios ganchos o hooks para una mayor personalización. Por ejemplo, el tema Shoptimizer incluye hooks para modificar el encabezado, el pie de página y la barra lateral.

Para aprender más sobre el tema, te recomendamos que leas nuestro tutorial de hooks de WordPress. Explica en detalle qué es un hook de WordPress y cómo funciona.

Los problemas más comunes en las páginas de checkout de WooCommerce

Para poder ofrecer a los clientes una buena experiencia de usuario, es crucial conocer cuáles son los errores comunes en la páginas de pago de WooCommerce y cómo solucionarlos.

A continuación, explicamos brevemente los principales errores en las páginas de pago.

Los medios de pago no aparecen

En la mayoría de los casos, este problema sucede debido a configuraciones incorrectas o problemas de compatibilidad con la pasarela de pago.

Para resolverlo, verifica de nuevo la configuración de tu pasarela de pago y asegúrate de que sea correcta. También debes verificar si tu versión actual de WooCommerce es compatible con los procesadores de pago elegidos.

Problemas de compatibilidad con los plugins

Si bien los plugins brindan la posibilidad de mejorar la funcionalidad de tu sitio de una manera sencilla, lo cierto es que no siempre son compatibles entre sí.

Los conflictos entre los plugins pueden provocar errores en la página de checkout, interrumpiendo la experiencia de navegación del usuario. Para poder solucionar problemas técnicos, debes probar desactivar los plugins uno por uno hasta identificar cuál es el que está causando el problema. Luego, puedes probar con actualizar el plugin conflictivo o bien buscar una alternativa si el problema persiste.

Problemas en el funcionamiento del tema

A veces, el tema que tienes activo puede no ser totalmente compatible con WooCommerce, lo cual puede generar problemas en el checkout. Para solucionar esto, debes contactar al desarrollador del tema para obtener ayuda. También puedes probar cambiando a otro tema temporalmente y ver si así el problema desaparece.

Tiempos de carga lentos

Las páginas de pago que no responden y tardan en cargar hacen desagradable la experiencia de compra para los clientes.

Para evitar esto, asegúrate de elegir un proveedor confiable de hosting WooCommerce. El hosting WooCommerce de Hostinger utiliza un servidor LiteSpeed de alto rendimiento y funciones de optimización de velocidad, incluyendo object caché para WordPress. Esta herramienta de object caching elimina las consultas repetitivas a la base de datos, mejorando en hasta 3 veces el rendimiento de tu tienda online.

Conclusión

Hay miles de formas y tamaños de tiendas, pero absolutamente todas tienen el mismo objetivo: vender productos o servicios en Internet. Los plugins de comercio electrónico como WooCommerce permiten configurar una tienda fácilmente sin necesidad de saber de programación, código o diseño.

Dicho esto, el diseño por defecto de la página de checkout de WooCommerce puede no ser el más óptimo para los usuarios. Puedes crear una experiencia de compra más fluida y agradable que aumente las tasas de conversión al personalizar el checkout.

En este tutorial, hemos explicado cómo crear una página de pago personalizada de WooCommerce utilizando plugins como FunnelKit o editando el código.

Esperamos que este tutorial te haya proporcionado la orientación necesaria sobre cómo personalizar los diseños de la página de pago de WooCommerce. ¡Buena suerte con tu tienda online!

FAQs: cómo personalizar el checkout de WooCommerce

Respuestas a las preguntas frecuentes sobre la personalización del checkout de WooCommerce.