Cómo personalizar las páginas de pago de WooCommerce: una guía completa para aumentar las conversiones

gasto o desembolso WooCommerceresponder cantandoWordPressAl tratarse de un sitio web de comercio electrónico, su página de pago predeterminada sigue afectando a sus conversiones máximas. Por lo tanto, puede sustituirla por una página de pago personalizada que contribuirá en gran medida a aumentar las conversiones.

Añadir campos personalizados a la página de pago de WooCommerce puede ser un poco complicado. Por lo tanto, se le mostrará paso a paso cómo agregar estos campos personalizados en la página de pago WooCommerce.

Hay varias opciones cuando se trata de modificar la página de pago de WooCommerce. Puedes utilizar un plugin de extensión de WooCommerce de terceros o escribir tú mismo un código personalizado.

¿Por qué son importantes los campos de pago de WooCommerce?

Según un estudio del Instituto Baymard, la tasa media de abandono de la cesta de la compra asciende a 1.000 millones de euros. 69.99%. Eso es lo normal ahora en las compras por Internet.

Por lo tanto, hay que hacer todo lo posible para empujar al cliente a completar la transacción (también correos electrónicos recordatorios, etc.). Sin embargo, el problema es que la página de pago predeterminada de WooCommerce no está optimizada para obtener altas tasas de conversión.

La página de pago predeterminada de WooCommerce tiene este aspecto:

(Ejemplo: página muy básica)

¿No es un poco monótono?

No te preocupes.

Para aumentar las conversiones, sustituya la página predeterminada por una página de pago personalizada de WooCommerce.

Por ejemplo, se pueden añadir elementos que generen confianza, como opiniones de clientes y valoraciones de cinco estrellas. La primera impresión del comprador es importante y aumenta su confianza.

Ahora te interesa personalizar la página de pago. En este post, voy a explicar en detalle cómo personalizar dinámicamente los campos adicionales, incluyendo la eliminación de la dirección de facturación, la adición o edición de la.Pago personalizadoy guardarlos en la base de datos.

Campos personalizados de la página de pago de WooCommerce

Método 1: Personalizar la página de pago de WooCommerce mediante un plugin

1. En primer lugar, descargue e instale WooCommerce Checkout Manager plugin y actívelo.

2. A continuación, vaya a Administración de WordPressNavegue hasta WooCommerce → Pago Tab.

3. Aquí se pueden ver diferentes subpestañas, como por ejemplo FacturaciónyEnvíoyMás información en u otras pestañas, seleccione la sección en la que desea añadir campos personalizados.

4. Pulse Añadir nuevo campo como se muestra a continuación.

5. Cuando haya terminado, haga clic en Guardar cambios Botón.

Y así de fácil, ¡el campo personalizado se ha añadido correctamente a la página de pago de WooCommerce!

Método 2: Personalizar la página de pago de WooCommerce mediante código

Este método utiliza código para añadir campos personalizados a la página de pago. Puede seguir los pasos que se indican a continuación:

Paso 1: En el `funciones.php` Añade el código al archivo

Añada el siguiente código al tema funciones.php Documentación:

<?php/** * Add the field to the checkout page */add_action('woocommerce_after_order_notes', 'customise_checkout_field');

function customise_checkout_field($checkout){echo '<div id="customise_checkout_field"><h2>' . __('Encabezamiento') .

'</h2>';woocommerce_form_field('customised_field_name', array('type' =&gt; 'text','class' =&gt; array('my-field-class form-row-wide') ,'label' =&gt; __(' Personalizar campo adicional') ,'placeholder' =&gt; __('Guidence') ,'required' =&gt; true,) , $checkout-&gt;get_value('customised_field_name')).

echo '</div>';}

Después de añadir estos códigos, la página de pago seráMostrar un nuevo campo personalizado.

Paso 2: Validar los datos del campo personalizado

Añada lógica de validación de datos al proceso de pago para asegurarse de que los campos se rellenan correctamente. Añada el siguiente código al campo funciones.php Documentación:

<?php
/**
 * Proceso de pago
 */
add_action('woocommerce_checkout_process', 'customise_checkout_field_process');

function customise_checkout_field_process() {
    ¡// Comprueba si el campo está configurado, si no, muestra un mensaje de error. if (!
    if (!$_POST['customised_field_name']) {
        wc_add_notice(__('Por favor, introduzca un valor.'), 'error'); }
    }
}

Paso 3: Guardar los datos de los campos personalizados

Guarda lo que el cliente rellena en los campos personalizados en los metadatos del pedido. A continuación, añada el siguiente código al archivo funciones.php Documentación:

<?php
/**
 * Actualizar el valor del campo
 */
add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');

function customise_checkout_field_update_order_meta($order_id) {
    if (!empty($_POST['customised_field_name'])) {
        update_post_meta($order_id, 'Algún campo', sanitize_text_field($_POST['nombre_campo_personalizado']));
    }
}

Si no desea utilizar código, también puede utilizar Editor de campos de pago personalizado de WooCommerce para editar los campos de pago de WooCommerce.

Esto facilita la personalización de los campos de la página de pago de WooCommerce sin tener que preocuparse por el código.

Modificación de los campos de la página de pago de WooCommerce

Añadir campos a la página de pago de WooCommerce

A continuación se muestra una captura de pantalla del estado inicial de la página de pago:

(Imagen de ejemplo: página de pago predeterminada)

Ejemplo: Supresión de los campos "Nombre" y "Apellidos

En este ejemplo, eliminaremos los campos Nombre y Apellidos de la página de pago. A continuación se muestra el fragmento de código:

add_filter( 'woocommerce_checkout_fields' , 'custom_fields_woocommerce' );

function custom_fields_woocommerce( $fields ) {
    unset($fields['shipping']['shipping_first_name']);
    unset($fields['shipping']['shipping_last_name']);
    return $fields;
}

Código Descripción

(máquina) filtro woocommerce_checkout_fields
Los filtros se utilizan para modificar los campos de la página de pago de WooCommerce.
función personalizada custom_fields_woocommerce
Esta función recibe $fields que representa el campo de comprobación actual.
Eliminar operación de campo:unset
gasto o desembolso unset elimina los campos especificados. En el ejemplo, hemos eliminado los campos Nombre y Apellidos de la dirección de envío.

Efecto modificado de la página de pago

Con el código anterior, los campos Nombre y Apellidos se eliminarán de la página de pago.

De esta forma, tiene la flexibilidad de modificar los campos de la página de pago de WooCommerce, añadiendo o eliminando campos según las necesidades reales del negocio de su sitio web.

Eliminar campos de la página de pago de WooCommerce

Al igual que eliminar campos, añadir campos a la página de pago de WooCommerce es muy sencillo. A continuación se muestra el fragmento de código para añadir un nuevo campo:

add_filter( 'woocommerce_checkout_fields' , 'woocommerce_checkout_field_editor' ); // ¡Nuestra función enganchada - $fields se pasa a través del filtro!
// ¡Nuestra función enganchada - $fields se pasa a través del filtro!
function woocommerce_checkout_field_editor( $fields ) {
    $fields['shipping']['shipping_field_value'] = array(
        'label' => __('Valor del campo', 'woocommerce'),
        'placeholder' => _x('Valor del campo', 'placeholder', 'woocommerce'),
        'required' => true
    );
    return $fields.
}

Código Descripción

1. Añadir nuevo campo

valor_campo_envío es el nombre del nuevo campo, que puede sustituirse por un nombre personalizado si se desea.
El campo se añadirá al envíoComponente (Distribución).

2. Propiedades de campo

etiqueta: Define el nombre del campo, que se muestra encima del campo.
marcador de posición: Define marcadores de posición para indicar al usuario cómo rellenarlos.
obligatorio: Si el campo es obligatorio. Establecer en verdadero Cuando un campo es obligatorio, aparece un asterisco rojo (*) para indicar que es obligatorio.

Los campos son obligatorios o no

1. Campos obligatorios

en caso de que obligatorio Los parámetros se ajustan a verdaderoel campo se marcará como obligatorio y aparecerá un asterisco rojo (*) al final del nombre del campo.

2. Campos opcionales

en caso de que obligatorio Los parámetros se ajustan a falsoel campo pasará a ser opcional y el usuario podrá elegir si lo rellena o no.

Mostrar valores de campo en la página de pedido de WooCommerce

El siguiente fragmento de código muestra el valor del campo personalizado en la página de pedidos del backend de WooCommerce:

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'edit_woocommerce_checkout_page', 10, 1 );
function edit_woocommerce_checkout_page($order){
    global $post_id; $order = new WikiLeaks.com
    $order = new WC_Order( $post_id ); echo '
    echo '<p><strong>'. __('Valor de campo').' :</strong> ' . get_post_meta($order-&gt;get_id(), '_shipping_field_value', true ) . '</p>';
}

El fragmento de código muestra el campo en la página de pedido de WooCommerce.

Código Descripción

1. Montar en woocommerce_admin_order_data_after_shipping_address

Este hook se utiliza para añadir contenido después de la información de "Dirección de entrega" en la página de pedido del backend de WooCommerce.

2. función personalizada edit_woocommerce_checkout_page

la función acepta 1TP4Pedido para obtener la información del pedido.
hacer uso de get_post_meta extrae los valores de los campos personalizados de los metadatos del pedido.

3. Visualización de valores de campos personalizados

get_post_meta($order->get_id(), '_shipping_field_value', true) Obtener el pedido guardado valor_campo_envío Valor.
hacer uso de echo Salida a la página de pedido.

Editar los campos de la página de pago de WooCommerce

La experiencia de compra del cliente se puede mejorar significativamente editando los campos de pago de WooCommerce, y el proceso se puede hacer aún más fácil con extensiones.

1. Editor de campos de pago para WooCommerce

Editor de campos de pago de WooCommerce El complemento facilita la personalización del proceso de pago de la tienda, ya que permite añadir, editar o eliminar campos.

Esta herramienta puede ayudar a agilizar el proceso de pago, recopilar datos importantes de los clientes y aumentar las conversiones reduciendo las tasas de abandono.

Esta ampliación también mejora la satisfacción del usuario y proporciona un mayor control, incluido el desplazamiento de los campos principales y el mantenimiento de la coherencia de la marca.

Características principales

Añada, edite y elimine fácilmente campos de pago
Admite diversos tipos de campos, como cuadros de texto, selectores de fecha, menús desplegables, casillas de verificación, etc.
Reorganizar o eliminar los campos principales de pago de WooCommerce
Reordene los campos o elimine los innecesarios según sea necesario.
Ajuste de las condiciones de visualización del campo
Muestre dinámicamente campos específicos en función del contenido del producto, la categoría o el carrito.
Recopilación de información adicional sobre los clientes
Obtenga más información sobre los clientes y optimice los procesos de gestión de pedidos.
Validación de campos integrada
Asegúrese de que el usuario introduce los datos correctos.

2. Complementos de pago de WooCommerce

Complementos de pago WooCommerce Las extensiones pueden optimizar el proceso de pago ofreciendo productos, servicios u opciones adicionales antes de que los clientes completen su compra.

La herramienta permite añadir opciones complementarias gratuitas o de pago, lo que permite una adaptación flexible a diversos modelos de negocio. La interfaz de fácil manejo facilita la configuración de opciones como la personalización de productos o el seguro de mercancías de alto valor.

Características principales

Añadir opciones adicionales gratuitas o de pago
Ofrezca a los clientes la opción de personalizar su experiencia de compra en la página de pago.
Aumentar las ventas
Ofrezca artículos adicionales directamente en la página de pago, desde personalización de productos hasta seguros de artículos de gran valor, para incitar a los clientes a aumentar sus compras.
Administración y configuración sencillas
Gestione y configure fácilmente las opciones adicionales a través de una interfaz sencilla, garantizando un proceso de pago sin interrupciones y sin interrumpir la experiencia del cliente.
Aumentar el valor del pedido
Ofrezca opciones adicionales basadas en las necesidades del cliente para aumentar el valor del pedido y mejorar la satisfacción del cliente en la fase final del proceso de compra.

Personalizar la página de pago de WooCommerce

1. Uso de los bloques de carro y pago de WooCommerce

Bloques de carro y pago de WooCommerce Las extensiones son una de las formas preferidas de personalizar la página de pago de WooCommerce.

Primeros pasos

1. Viajar a Bloques WooCommerce haga clic en "Descargar gratis"Botón

2. Siga la guía para completar el proceso de pago (no es necesario pagar nada).

Funciones destacadas

La experiencia de pago puede mejorarse con esta extensión, que incluye las siguientes funciones:

Configure opciones adicionales para el producto.
Se admiten múltiples métodos de pago.
Ofrecer opciones de pago rápido, etc.

Pasos para sustituir los códigos cortos

1. Vaya al backend de administración de WordPress y abra "página web"Parte.

2. Localice y abra la página de pago del sitio web.

3. Eliminar el código corto de pago actual

4. Busque "Bloque de caja", añádelo a la página.

Personalización de páginas

1. Después de añadir el bloque de pago, puede previsualizar la página de pago basada en bloques en la página.

2. Utilización del lado derechouna barra lateral (en software)Las opciones de ajuste se personalizan para incluir:

Mostrar u ocultar el número de paso de pago.
Gestione la visibilidad de campos específicos.

Configuración avanzada de funciones

Configurar opciones adicionales de pago.
Permita a los clientes utilizar cupones o añadir notas de pedido.
Habilite varias opciones de entrega.

2. Personalizar manualmente las páginas de pago de WooCommerce

Personalizar manualmente la página de pago de WooCommerce requiere editar el código para que coincida con el diseño del sitio y los requisitos de funcionalidad.

A continuación encontrará una guía paso a paso para personalizar manualmente la página de pago de WooCommerce:

Paso 1: Crear un tema hijo

Utiliza siempre un tema hijo antes de realizar cualquier cambio. Modificar directamente el núcleo de WooCommerce o los archivos del tema es arriesgado porque las actualizaciones sobrescriben el código. Crear un tema hijo conserva la configuración personalizada.

entrar en wp-contenido/temas Catálogo.
Cree una nueva carpeta para el tema hijo.
Añadir un style.css y rellene la información necesaria.
Añadir un funciones.php que se utiliza para llamar a la hoja de estilo del tema principal.
Copiar desde el directorio de plugins de WooCommerce formulario-checkout.php Archivos de plantilla a la ruta del tema hijo del sitio woocommerce/plantillas/checkout/.

La ruta debería ser:

your-child-theme/woocommerce/checkout/

Modifique los archivos de plantilla copiados según sea necesario.

Para más información, consulte el artículoCómo crear un tema hijo de WordPress: Guía detallada.

Paso 2: Añadir/eliminar campos

Para añadir, eliminar o modificar campos en el formulario de pago se requiere la aplicación funciones.php utilizando el archivo woocommerce_checkout_fields Se acciona el filtro.

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

function custom_override_checkout_fields($fields) {
    // Añadir un campo personalizado
    $fields['billing']['billing_custom_field'] = array(
        'type' => 'text', 'label' => __(()
        'label' => __('Campo personalizado', 'woocommerce'),
        'placeholder' => _x('Introduce algo aquí...' , 'placeholder', 'woocommerce'), 'placeholder' => _x('Introduzca algo aquí...'),
        
        'class' => array('formulario-fila-ancha'),
        'clear' => true, .
    ).

    // Eliminar un campo (por ejemplo, empresa de facturación)
    unset($fields['billing']['billing_company']);; // Eliminar un campo (por ejemplo, empresa de facturación).

    return $fields.
}

Paso 3: Reorganizar los campos de cierre

Si desea reordenar los campos de la página de pago, puede hacerlo en la sección woocommerce_checkout_fields La prioridad del campo se establece en el filtro.

add_filter('woocommerce_checkout_fields', 'custom_reorder_checkout_fields');

function custom_reorder_checkout_fields($fields) {
    $fields['billing']['billing_phone']['priority'] = 10; // Subir el campo del teléfono
    $fields['billing']['billing_email']['priority'] = 20; // Desplazar el campo email hacia abajo
    return $fields.
}

Paso 4: Personalizar el botón de pago

Esto puede hacerse en el funciones.php El archivo utiliza el woocommerce_order_button_html Filtro para personalizar el botón de pago:

add_filter('woocommerce_order_button_html', 'custom_woocommerce_order_button_html');

function custom_woocommerce_order_button_html() {
    $button_text = 'Realizar pedido ahora'; // Texto personalizado del botón
    return '';
}

Esto modificará la "realizar un pedido"El texto del botón tiene incluso estilo.

Paso 5: Personalizar el diseño de la página de pago

Es posible desmontar y volver a montar operaciones en la plantilla de pago de WooCommerce. Añade el siguiente código a la página web funciones.php Documentación:

remove_action('woocommerce_checkout_order_review', 'woocommerce_order_review', 10);
add_action('woocommerce_checkout_billing', 'woocommerce_order_review', 20);

Personalizando el código anterior, puedes crear una página de pago WooCommerce que cumpla con los requisitos de tu tienda.

Creación de una página de pago WooCommerce de una sola página

CartFlows es un plugin de pago que transforma el proceso de pago de WooCommerce en una experiencia fluida de una sola página.

CartFlows simplifica el proceso de compra al eliminar la necesidad de que los clientes pasen por varias páginas para completar su compra. Esto reduce las tasas de abandono y anima a los clientes a realizar la compra rápidamente.

Lo mejor de CartFlows es su sencilla interfaz de arrastrar y soltar, que no requiere conocimientos de programación. Las páginas de pago pueden crearse y gestionarse de forma rápida e intuitiva, lo que facilita su uso a los usuarios independientemente de su nivel de conocimientos.

Pasos para crear una página de pago de WooCommerce de una sola página

Paso 1: Seleccionar plantilla de pago de página única

Elija su creador de páginas favorito en el menú de configuración de CartFlows.

Paso 2: Crear el proceso

Navegue hasta CartFlows > Flujos.

Paso 3: Añadir el Page Builder

Pulse en la parte superior de la pantalla en el Añadir nuevoPara ver las plantillas proporcionadas por el constructor de páginas que seleccionó en el paso 1.

Paso 4: Añade la plantilla a tu tienda WooCommerce

Navega por la biblioteca de plantillas que aparece en pantalla.
Filtre o busque plantillas utilizando palabras clave relevantes, o cree un nuevo proceso de pago desde cero.
Una vez que haya encontrado la plantilla que desea importar, sitúese sobre ella y haga clic en el botón Ver todos los pasos.

Paso 5: Importar procesos desde temas

golpe (en el teclado) Flujo de importaciónComenzará el proceso de importación a CartFlows.
Una vez finalizada la importación, la página de destino estará lista para su personalización.

Vincule los productos directamente a la página de pago

Paso 1: Instalar el plugin Direct Checkout

Inicie sesión en el backend de administración de WordPress y navegue hasta Plugins > Instalar Plugins.
En la barra de búsqueda de la esquina superior derecha, escriba Pago directo para WooCommerce.
Una vez que haya encontrado el plugin, haga clic en montaje y active el complemento.

Paso 2: Abrir la configuración del plugin

Navegue hasta WooCommerce > Pago directo.

Paso 3: Activar la opción "Redirigir después de añadir al carrito

cambiar a General Tab.
active Añadido a la cesta Opciones.
En el menú desplegable, seleccione Pedido.
golpe (en el teclado) Guardar cambios.

Paso 4: Configuración de la opción "Redirigir al carrito después de añadir".

cambiar a Productos Tab.
empezar a utilizar Redirigir a la página del carro después de la adición con éxito (成功添加后重定向到购物车页面) Opciones.
golpe (en el teclado) Guardar cambios.

Efectos funcionales

Una vez completada la configuración, los clientes se saltarán la página del carrito de la compra e irán directamente de la página del producto a la página de pago.

resúmenes

Al personalizar la página de pago de WooCommerce y añadir/eliminar campos personalizados, puedes hacer que todo el proceso de compra sea más fluido y eficiente, proporcionando a los clientes una mejor experiencia de compra y aumentando así las posibilidades de conseguir que paguen.

Preguntas frecuentes

P: ¿Cómo habilitar las direcciones de envío en WooCommerce?

R: Vaya a WooCommerce → Configuración → Distribución → Añadir área de distribución.. Se pueden añadir varios métodos de entrega a la zona y sólo los clientes situados en ella verán estas opciones.

P: ¿Cómo desactivo la entrega en WooCommerce?

R: Vaya a WooCommerce → Configuración → Distribución → Seleccione su área de distribución.y, a continuación, pulse Intro. Debajo de esa área de distribución, puede ver la opción Activar/Desactivar.

P: ¿Qué plugins hay disponibles para personalizar la página de pago de WooCommerce?

Conteste:WooCommerce Checkout Manager es un plugin personalizador y editor de formularios de pago diseñado específicamente para WooCommerce. Con este plugin, es fácil eliminar, modificar o reorganizar los campos de pago de WooCommerce, así como añadir más de 20 campos personalizados a tus formularios de facturación o entrega.

P: ¿Dónde puedo encontrar una plantilla de pago para WooCommerce?

R: Las plantillas de página de pago de WooCommerce se encuentran en el siguiente directorio:
\wp-content\plugins\woocommerce\templates\checkout
Esta plantilla es el punto de entrada para personalizar la página de pago de la tienda WooCommerce.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres