Introducción
Los clientes abandonan regularmente las páginas de pago que son difíciles de navegar, requieren demasiada información o no brindan suficiente orientación sobre el proceso de compra.
Personaliza el WooCommerce formulario de pago a:
- Reducir las tasas de abandono de carritos.
- Agilice el flujo de pagos.
- Promocionar productos relacionados y ofertas especiales.
- Tranquilice a los clientes transmitiendo claramente la información relevante.
Descubra cómo personalizar el formulario de pago de WooCommerce y haz que se sienta como una parte integral de tu tienda WooCommerce.
Aspecto predeterminado de la página de pago de WooCommerce
La página de pago predeterminada de WooCommerce tiene un diseño limpio y práctico. Sin embargo, es genérico y no es efectivo para todos. negocio de comercio electrónico .
Los complementos proporcionan una interfaz fácil de usar para personalizar y administrar la página de pago de WooCommerce. Tres complementos populares explorados en esta guía incluyen:
1. Editor de campo de pago (Administrador de pago) por ThemeHigh
2. Administrador de pago para WooCommerce por QuadLayers
3. Editor de Campo Pedido por WooCommerce
Los usuarios con experiencia en codificación PHP pueden crear plantillas de página de pago personalizadas utilizando WooCommerce Hooks y Shortcodes.
Personalización a través del editor de campo de pago por ThemeHigh
La Checkout Field Editor para WooCommerce es un complemento conveniente para crear, editar y reordenar los campos de la página de pago. La interfaz le permite realizar acciones en varios campos simultáneamente.
Para personalizar la página de pago usando el Editor de Campo Pedido:
1. Acceda al panel de WordPress.
2. Seleccionar Añadir nuevo existentes Plugins .
3. Busque el Editor de Campo Pedido para WooCommerce.
4. Hacer clic en Instalar ahora .
5. Activar el complemento.
6. Acceder al Formulario de pago ficha en el WooCommerce .
7. Seleccione Facturación, Envíos o Campos Adicionales .
8. Utilizar Agregue campo para crear un campo personalizado.
9. El campo Tipo de Propiedad y Nombre son parámetros obligatorios.
10. Hacer clic en Guardar cerrar para crear un nuevo campo.
11. Cambie el orden de los campos arrastrando y soltando su mosaico en la lista.
12. Marque una o varias casillas y haga clic en Deshabilitar, permitiro Eliminar para administrar los campos existentes en el formulario de pago.
13. Utilice el Editar opción para modificar los campos existentes.
14. Ciertos valores de los campos principales existentes (como País) no están disponibles para su edición. Después de editar los valores del campo, haga clic en Guardar cerrar.
15. Guardar los cambios para aplicar las modificaciones al formulario de pago.
Si comete un error, utilice el Restablecer los campos predeterminados opción para volver a la página de pago original de WooCommerce.
Personalización a través de Checkout Manager para el complemento WooCommerce
La Administrador de pago para WooCommerce by Capas cuádruples le permite cambiar la alineación y el orden de los campos de facturación y envío existentes o crear nuevos campos personalizados en la página de pago. Además, utilícelo para mostrar u ocultar campos específicos para productos y categorías individuales.
Paso 1: instale y active Checkout Manager para WooCommerce
Para instalar y activar Checkout Manager para WooCommerce:
1. Acceda al panel de WordPress.
2. Seleccionar Añadir nuevo existentes Plugins .
3. Buscar Administrador de pago para WooCommerce.
4. Hacer clic en Instalar ahora .
5. Acceso Ajustes existentes WooCommerce .
6. Haga clic en el Pagar ahora .
7. Para comenzar a usar el complemento, haga clic en Activar complemento.
A continuación, cree un producto WooCommerce que otorgue a los clientes acceso a la membresía.
Paso 2: crear un producto de membresía
No existen reglas estrictas para el tipo de producto que puede crear. Una membresía puede ser un producto independiente o un complemento para comprar otros productos.
1. Seleccione Añadir nuevo opción en el Productos .
2. Escriba la Producto nombre , por ejemplo, Plan de membresía Silver.
3. Seleccionar Facturación para personalizar los campos de facturación de pago.
4. Hacer clic en Agregar nuevo campo para crear un campo de facturación personalizado.
5. Mueva el control deslizante para establecer los campos existentes en Requerido (o no requerido).
6. Utilice el menú desplegable para configurar el campo Puesto de trabajo en la página de pago (izquierda, derecha o ancha).
7. Los controles deslizantes en el Discapacitado columna habilitar / deshabilitar campos en el formulario de pago.
8. Hacer clic en Editar aplicar condiciones y requisitos especiales para el campo.
9. Acceder al Filtrar .
10. Muestre u oculte el campo para productos o categorías específicos.
11. Guardar la configuración.
12. Hacer clic en Guardar Cambios para aplicar la configuración personalizada.
13. Edite los campos de envío utilizando las opciones de coincidencia en el Envíos .
14. Utilice el Adicionales pestaña para crear campos personalizados no relacionados con el envío y la facturación.
15. Cargue hojas de estilo personalizadas en la página de pago en el Tecnología .
La edición Premium del complemento le permite incluir tarifas personalizadas y campos condicionales para productos específicos en la página de pago.
Personalización a través del editor de campo de pago de WooCommerce
La Editor de Campo Pedido por WooCommerce cuesta $ 49 por año. Utilice esta extensión sencilla para agregar y eliminar campos de pago, actualizar el tipo de campo, hacer que un campo sea obligatorio y editar el valor del marcador de posición.
Después de comprar y descargar el Editor de campo de pago, acceder al panel de WordPress:
1. Hacer clic en Añadir nuevo existentes Plugins .
2. Seleccione Subir Plugin .
3. Utilizar Elija El Archivo para seleccionar y cargar el Editor de Campo Pedido archivo zip.
4. Hacer clic en Instalar ahora para instalar el Editor de Campo Pedido.
5. Para comenzar a usar el complemento, haga clic en Activar complemento.
6. Seleccionar Campos de pago existentes WooCommerce .
7. Acceder al Facturación, Envíos o Campos Adicionales menú para editar campos individuales.
8. Utilice el menú desplegable para definir un tipo de campo. Los tipos de campo disponibles son Texto, Contraseña, Área de texto, Seleccione, Selección múltiple, Radio, Caja, Selector de fechasy Título.
9. Establezca el campo Puesto de trabajo en el formulario usando el menú desplegable.
10. Defina reglas de validación, por ejemplo, si un campo es Requerido o no.
11. Utilizar Agregue campo para crear campos personalizados o Deshabilitar / Eliminar marcado para eliminar los campos existentes.
12. Hacer clic en Guardar Cambios para aplicar la configuración personalizada.
Los campos de pago principales de WooCommerce están marcados en violeta. La desactivación de los campos principales puede tener un impacto negativo en otros complementos. Si planea eliminar algún campo principal, realice una prueba exhaustiva para evitar posibles problemas de compatibilidad.
Personalización de la plantilla de la página de pago (se requieren conocimientos de codificación)
El diseño del formulario de pago de WooCommerce depende del tema del sitio web. Utilice un cliente FTP o cPanel para acceder al directorio de temas wp-content / themes / y cree un tema hijo en su servidor.
Nota: El tema secundario y sus archivos permanecen separados del tema principal y no se ven afectados por las posibles actualizaciones de WooCommerce.
Puede personalizar la plantilla de la página de pago agregando fragmentos de código al functions.php archivo en el directorio del tema hijo.
Ganchos de pago de WooCommerce
la columna Acción y Filtrar Los ganchos permiten a los usuarios insertar código PHP personalizado dentro de los archivos de plantilla existentes. Utilice ganchos de acción para agregar contenido y nuevos campos al formulario de pago. Los enlaces de filtro se utilizan para eliminar campos existentes, establecer campos como opcionales o anular etiquetas y marcadores de posición.
Los ganchos de pago de WooCommerce de uso frecuente incluyen:
- woocommerce_antes_checkout_form
- woocommerce_checkout_antes_de_los_detalles_del_cliente
- woocommerce_before_checkout_billing_form
- woocommerce_checkout_facturación
- woocommerce_after_checkout_billing_form
- woocommerce_before_checkout_shipping_form
- woocommerce_checkout_envío
- woocommerce_after_checkout_shipping_form
- woocommerce_checkout_después_de_los_detalles_del_cliente
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- woocommerce_checkout_después_del_pedido_revisión
- woocommerce_after_checkout_form
- woocommerce_before_checkout_registration_form
- woocommerce_after_checkout_formulario_de_registro
Por ejemplo, puede usar un gancho de acción para insertar un mensaje directo a los clientes en el formulario de pago:
add_action( 'woocommerce_review_order_before_payment', function() {
echo 'Create an online CCBill Pay account and store up to 25 payment methods!';
});La woocommerce_review_order_before_pagohook coloca el mensaje encima del campo de pago.
La documentación oficial de WooCommerce proporciona una lista completa de acciones y ganchos de filtro.
Eliminar campos de la página de pago
Ser capaz de eliminar campos innecesarios es esencial para agilizar el proceso de pago. Los enlaces de filtro son un método eficaz para eliminar campos mediante fragmentos de código.
Pegue el siguiente código en el functions.php archivo del tema hijo:
/**
Remove Company field
**/
function wc_remove_checkout_fields( $fields ) {
// Billing fields
unset( $fields['billing']['billing_company'] );
// Shipping fields
unset( $fields['shipping']['shipping_company'] );
return $fields;
}
add_filter( 'woocommerce_checkout_fields',
'wc_remove_checkout_fields' );El gancho del filtro quita el Empresa campo de las secciones Envío y Facturación.
Contenido personalizado
Utilice los ganchos de acción para agregar contenido relevante y mejorar el impacto visual del formulario de pago. Introduzca nuevos elementos como imágenes, títulos, animaciones y logotipos.
Este código de ejemplo recupera e inserta una imagen del logotipo de la empresa en el formulario de pago:
add_action('woocommerce_before_checkout_form,'woostore_checkout_content');
function woostore_checkout_content(){
echo '<img src="https://ccbill.com/wp-content/uploads/ccbill-logo.jpg" />;
}La woocommerce_antes_checkout_form El gancho de acción coloca el logotipo en la parte superior de la página.
Usando códigos cortos
En lugar de insertar manualmente elementos de contenido individuales, use los códigos cortos de WooCommerce para agregar funcionalidad e incorporar contenido interesante en la página de pago.
La Productos relacionados shortcode agrega una sección que muestra productos relacionados. La límite = "4" valor limita el número de productos mostrados a cuatro.
add_action('woocommerce_after_checkout_form','woostore_checkout_shortcode');
function woostore_checkout_shortcode() {
echo do_shortcode('[related_products limit="4" ]'); }La woocommerce_after_checkout_form El gancho de acción coloca la sección de productos relacionados en la parte inferior del formulario de pago.
CSS personalizado
Edite los aspectos visuales de la página de pago agregando archivos CSS personalizados al tema secundario. Cambie la fuente, los márgenes, la forma y el color de fondo de la página de pago para convertirla en una extensión natural de su tienda WooCommerce.
Por ejemplo, ajuste el color de fondo de los campos de entrada de texto:
input[type="text"] {
background-color: #3292cf;
}Utilice el DOM y el inspector de estilo del navegador para identificar las clases y los selectores en el formulario de pago.
Nota: Una forma de vender más productos a los clientes antes de pasar al proceso de pago es implementando productos relacionados en WooCommerce.
Extensiones de pago de WooCommerce
Las extensiones de pago y los complementos se centran en acelerar y simplificar el proceso de compra y, a menudo, son complementarios con otros complementos. Considere implementar extensiones que agreguen funciones vitales que serían difíciles de lograr mediante la personalización.
Una página de pago
En lugar de redirigir a los clientes de una página de producto a un carrito y luego a la página de pago, introduzca un pago en un solo paso.
Las extensiones que envían a los clientes directamente desde la página del producto al formulario de pago acortan enormemente el proceso de compra. Los clientes necesitan navegar por menos páginas, ingresar menos información y completar las compras rápidamente.
El uso de una extensión para reducir la cantidad de pasos que debe realizar un cliente reduce considerablemente las tasas de abandono del carrito.
Complementos de pago
Es un desafío crear campos de pago personalizados que se llenen dinámicamente. Si ofrece servicios complementarios pagados como entrega prioritaria, empaque especial o tarifas de instalación, es posible que deba usar una extensión.
Por ejemplo, las extensiones pueden ayudarlo a configurar campos condicionales que registran automáticamente los cambios en el carrito de compras y calculan los totales del carrito.
Además, considere implementar una solución que permita a los clientes salir de la página de pago y regresar más tarde mientras guardan las opciones y cargas seleccionadas.
Inicio de sesión en redes sociales
Pedir a los clientes que inicien sesión antes de pagar tiene un impacto negativo en la experiencia de compra. Utilice una extensión para permitir que los clientes inicien sesión con sus cuentas de redes sociales. Este conveniente método reduce sustancialmente el tiempo que lleva crear una cuenta de tienda.
El cliente puede concentrarse en los productos y es más receptivo a las recomendaciones de la tienda. Los inicios de sesión en redes sociales también brindan la oportunidad de participar en campañas de marketing específicas y realizar análisis en profundidad.
Conclusión
Ahora sabe cómo personalizar la página de pago de WooCommerce. Es mucho menos probable que los clientes abandonen sus compras con una página de pago bien optimizada y fácil de usar. El esfuerzo realizado para promocionar productos y atraer clientes a su tienda dará como resultado tasas de conversión más altas.
Si está buscando aumentar el conocimiento de la marca de su tienda, averigüe cómo personalizar los correos electrónicos de WooCommerce y conviértalos en una útil herramienta de promoción.
