Cómo editar y personalizar las páginas de pago de WooCommerce

¿Por qué crear páginas de pago personalizadas para WooCommerce?

Garantizar que el proceso de pago sea fluido y sin complicaciones es esencial para mejorar la experiencia del comprador. Una forma sencilla y directa de hacerlo es agilizar el proceso de pago para que los compradores puedan completar sus pedidos rápidamente.

No solo eso, sino que personalizar tu página de pago de WooCommerce puede ser una estrategia de marketing inteligente. Por ejemplo, puedes mejorar tus productos recopilando información detallada sobre tus clientes para conocerlos mejor.

Además, aproveche la oportunidad para realizar ventas cruzadas y ventas adicionales, lo que significa recomendar a los clientes que compren más artículos u otros productos relacionados con el artículo actual, lo que puede ayudar a aumentar el importe medio por pedido. También puede recomendar productos relacionados u ofrecer servicios adicionales como seguros o envoltorios de regalo.

Cómo editar los campos de pago de WooCommerce

Una forma eficaz de definir la página de pago es editar los campos de pago de WooCommerce. Esto proporcionará un proceso simplificado a los compradores y les facilitará completar sus pedidos.

Por defecto, la página de pago de WooCommerce proporciona un conjunto de campos útiles. Estos incluyenNombre, apellidos, dirección de correo electrónico, número de teléfono, nombre de la empresa, localidadetc.

No tanto si es principalmente minorista"Nombre de la empresa"Campos. Además, si se ofrece un regalo o descuento a un cliente el día de su cumpleaños, añada el campofecha de nacimientoCampos. Hay otras formas de personalizar los campos de WooCommerce. Puedes aplicar nuevos colores, cambiar el tamaño de los campos o cambiar el texto del marcador de posición. Eliminar los campos innecesarios y configurar los campos obligatorios que deben rellenarse antes de que el cliente continúe con el pedido puede acelerar el proceso de pago del cliente y reducir los pedidos perdidos.

Editar extensiones de campo de pago de WooCommerce

La forma más fácil de editar los campos de pago de WooCommerce es utilizar una extensión. Hay muchas herramientas disponibles.

Editor de campos de pagoes una extensión avanzada de WooCommerce que optimiza la página de pago añadiendo, eliminando o editando campos.

Aunque no puede eliminar los campos principales, puede moverlos. Esto le dará más control sobre el proceso de pago.

Si gestiona una tienda grande, necesitará un plugin más complejo, por ejemploComplementos de pago WooCommerce.

Con esta herramienta se pueden insertar complementos gratuitos (o de pago) en la fase de pago. Por ejemplo, los clientes pueden añadir información a sus pedidos. También puede ofrecer servicios de envoltorio para regalo y seguros. Incluso puede dar a los clientes la opción de dejar propina.

El complemento permite una flexibilidad total en la gestión de los campos de WooCommerce. Es posible crear complementos condicionales, añadir costes fijos o porcentuales y actualizar dinámicamente los totales de los pedidos. Además, la herramienta es compatible con los pedidos de suscripción y renovación de WooCommerce.

Cómo personalizar la página de pago de WooCommerce

Una vez comprendidos los campos de pago de WooCommerce, veamos tres formas de personalizar la página de pago.

1. Uso del bloque de carro de la compra y pago de WooCommerce

La primera forma de personalizar la página de pago de WooCommerce es utilizar la funciónBloques Woo Cart y CheckoutExtensión. La herramienta es completamente gratuita.

localiceBloques WooCommercey haga clic enDescargar gratisListo para salir.

A continuación, el sistema le guiará a través del proceso de pago (aunque no hay que pagar nada).

Hay diferentes formas de personalizar la experiencia de pago utilizando estos bloques. Puede configurar complementos de productos, aceptar varios métodos de pago, ofrecer opciones de pago rápido, etc.

tome nota deLos bloques de carrito de la compra y pago sólo están disponibles para sitios WordPress 6.9 o posterior. También es necesario sustituir los shortcodes existentes en las páginas del carrito de la compra y de la caja.

En primer lugar, navegue hasta el salpicadero en la secciónPágina y pago abiertoPágina. Aquí, el shortcode de pago se puede quitar

A continuación, busquebloque de cajay añádalo a la página. Ahora debería ver una vista previa del carrito basado en bloques, que puede personalizarse mediante los ajustes de la barra lateral.

Ahora es posible personalizar la página de pago. Puede mostrar/ocultar los números de los pasos del proceso de pago, mostrar/ocultar determinados campos y utilizar la configuración de bloque para establecer los parámetros de la página de pago.El campo Teléfono es obligatorio.

Además, se pueden configurar complementos de pago para que los compradores puedan aplicar cupones o notas a los pedidos, activar varias opciones de entrega, etc.

2. Personalizar la página de pago con extensiones de WooCommerce

WooCommerce Blocks proporciona una forma sencilla de personalizar tu página de pago, o puedes utilizar varias extensiones de WooCommerce para empezar. Echemos un vistazo a algunas opciones.

Hacer recomendaciones de productos

Una de las mejores formas de aumentar el tamaño medio de los pedidos es recomendar productos en la página de pago.Recomendación de productosLas extensiones lo hacen muy fácil.

La venta cruzada puede hacerse bajo epígrafes llamativos como "Compre juntos a menudo" o "Podría gustarle también".

Otra posibilidad esMejorar las ventas para aumentar el valor de los pedidos. Las recomendaciones de productos pueden mostrarse en toda la tienda, incluyendopágina de un solo productoy la página de confirmación del pedido. 

Habilitar varias direcciones de envío

Otra forma de personalizar la página de pago de WooCommerce es habilitar múltiples direcciones de envío. A veces los clientes piden varios productos que necesitan ser enviados a diferentes direcciones (por ejemplo, direcciones de casa y del trabajo).

Además, algunos clientes prefieren comprar regalos y enviarlos directamente a amigos y familiares. Sin esta opción, los clientes tendrían que hacer pedidos separados para cada dirección de entrega, lo que puede llevar bastante tiempo.

Puede utilizar el"Envíos a múltiples direcciones"para proporcionar esta funcionalidad.

Los clientes pueden solicitar el envío de cualquier número de productos a cualquier número de direcciones. Además, pueden guardar todas estas direcciones de envío en su cuenta. Después de comprar esta extensión, simplemente instálela en su sitio web WordPress y habilite múltiples métodos de envío.

Dejar que el cliente elija la fecha de entrega

Una forma estupenda de que los comercios obtengan una ventaja competitiva es permitir que los clientes elijan la fecha de entrega para recibir su pedido. Esto puede aumentar la satisfacción general del cliente porque usted está dispuesto a hacer un esfuerzo adicional.

hacer uso deWooCommerce Entrega de pedidosAmpliación para limitar el número de órdenes por día para garantizar que todas las órdenes puedan procesarse en un plazo determinado.

Los clientes pueden disponer de una lista de opciones de fechas de entrega en función de los días festivos, los métodos de entrega y otros factores.

Después de comprar e instalar esta extensión en WooCommerce, es posible mostrar el selector de fecha de entrega en el formulario de pago. Aquí, es posible determinar el período de tiempo, definir el rango de entrega y cobrar una tarifa adicional si el cliente selecciona una fecha/hora específica.

3. Personalización manual de la página de pago

También es posible cambiar la página de pago manualmente. Esta es la mejor opción si estás familiarizado con el funcionamiento del código. 

Si edita los archivos del sitio directamente, es mejor crear un tema hijo. De lo contrario, los cambios realizados se perderán al cambiar de tema o incluso al actualizar el tema padre actual. Nota, recuerda hacer una copia de seguridad de tus datos¡!

El plugin crea automáticamente copias de seguridad en vivo que se almacenan de forma segura en Jetpack Cloud. Aún mejor, VaultPress Backup está diseñado para sitios de WordPress y WooCommerce, lo que significa que puede hacer copias de seguridad de archivos, bases de datos y datos de clientes.

Editar el diseño visual de las páginas de pago de WooCommerce con CSS

Para editar manualmente un campo de WooCommerce, utiliza primero la herramienta Inspeccionar del navegador para determinar el área específica que deseas personalizar. Después, es el momento de aplicar los cambios al tema.

A continuación encontrará una lista de las principales etiquetas (tanto de clase como de ID) para diseños de páginas de pago editables:

<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout" action="">
<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"><input type="hidden" name="trp-form-language" value="es"/>

Supongamos que desea cambiar el color de fondo del cuadro de entrada. En este caso, se puede utilizar el siguiente fragmento de código:

.woocommerce-checkout input[type="text"] {
     color de fondo: #222;
}

Si desea eliminar un campo de la página de pago, por ejemplo"Facturas".en parte"Nombre de la empresa"campo. En este caso, es necesario añadir el siguiente fragmento de código al archivofunciones.phppapelesMedio.

function wc_remove_checkout_fields( $fields ) {
    unset( $fields['billing']['billing_company'] ); }
    return $fields.
}

add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

Recuerde guardar los cambios cuando esté listo.

resúmenes

Aunque WooCommerce ofrece una página de pago integrada, hay muchas formas de mejorar la página para aumentar las ventas y configurar opciones de pago útiles. Por ejemplo, es posible habilitar múltiples direcciones de envío, hacer que ciertos campos sean obligatorios u ofrecer envoltorio para regalo. Hay tres formas de editar y personalizar las páginas de pago de WooCommerce: utilizar el botónCarro de la compra y pago de WooCommerceutilice la extensión WooCommerce para personalizar manualmente la página de pago mediante código.