Cree un sistema de carrito de la compra eficaz con Avada y WooCommerce

WooCommerce Como potente complemento de comercio electrónico con Avada Los temas están profundamente integrados, lo que flexibiliza la creación de tiendas. Un sistema de carrito de la compra de calidad mejora la experiencia de compra del cliente y también aumenta eficazmente las tasas de conversión.

Paso 1: Instalar el plugin WooCommerce

• Acceso a la interfaz del plug-in AvadaInicie sesión en su panel de WordPress, vaya a "Avada > Plugins/Add-ons" y busque el plugin WooCommerce.
• Instalación de plug-insHaga clic en el botón "Instalar" situado junto al plug-in y el sistema completará automáticamente la instalación y activación.

• Complete el asistente de configuración de WooCommerceWooCommerce: Tras la activación, WooCommerce mostrará un asistente de configuración que sugiere completar configuraciones básicas como la moneda, los métodos de pago y los tipos impositivos.

Paso 2: Configurar la página del carrito de la compra

WooCommerce Las páginas Cesta de la compra, Pago y Mi cuenta se crean automáticamente durante la instalación. Si se omite el asistente de instalación, puede especificar la página del carrito de la compra manualmente:

• Ir a Configuración de WooCommerce: Navegue hasta "WooCommerce > Configuración > Avanzado".

• Asignar página del carro de la compra: en "Configurar página"Abajo, encuentra."página del carrito de la compra" Seleccione la página "Carro de la compra" creada por WooCommerce en el menú desplegable (o cree una nueva página por su cuenta).
• Guardar cambiosUna vez completados los ajustes, haga clic en "Guardar cambios"Botón

Paso 3: Optimizar la cesta de la compra

Avada Se ofrecen numerosas opciones de personalización para optimizar aún más la presentación del carro.

1. Activar la cesta de la compra Ajax

Ajax El carro de la compra puede actualizar el contenido del carro sin actualizar la página, lo que mejora la fluidez.

• Ir a la configuración de woocommerce: Panel de administración de WordPress -> WooCommerce -> Configuración -> pestaña Productos.
• Activar Ajax Shopping Cartencontrar "Opciones Ajax para la cesta de la compra" y active esta función.

2. Personalizar el diseño de la página del carrito de la compra

Avada Builder puede arrastrar y soltar elementos para ajustar el diseño de la página del carro de la compra, y usted puede:

• Añada alertas de ofertas con cuenta atrás para mejorar los índices de conversión de pedidos.
• Mostrar productos recomendados en la página del carrito de la compra para animar a los clientes a añadir compras.
• Utilice el módulo "Iconos del carro de la compra" de Avada para personalizar el estilo de los iconos de su carro de la compra.

3. Habilitación de carros de la compra emergentes laterales

Muchos sitios modernos de comercio electrónico ofrecen "carros de la compra emergentes laterales" que permiten a los usuarios ver sus compras en cualquier momento mientras buscan productos, y Avada ofrece la opción de hacerlo:

Paso 1: Instalar el plugin FunnelKit Cart
Inicie sesión en el backend de WordPressViajar a Plugins > Instalar Plugins.
Escriba en el campo de búsqueda "Carrito FunnelKit"busque el plugin y haga clic en Instalar ahora.
Una vez finalizada la instalación, pulse activeA continuación, en el menú de la izquierda, busque FunnelKit > Cesta Haz los ajustes.

Paso 2: Habilitar la función de carrito de la compra lateral
Vaya a Configuración del plugin: Navegue hasta FunnelKit > Cesta Tab.

Activar la cesta de la compra Side-by-Side: en General busque las opciones Activar cesta.
Conmutar el interruptor a "Habilitar"y luego haga clic en Guardar cambios.

Paso 3: Personalizar la apariencia del carrito de la compra lateral
FunnelKit puede personalizar el carro de la compra side-by-side para adaptarlo al estilo del sitio web y a la visión de la marca.
Abrir FunnelKit > Opciones de estilo.

Colores personalizados para la cesta de la compraModificación Color de fondo, color de los botones, tamaño y estilo de letra, haciéndolo coherente con el estilo de diseño del sitio web.

Ajustar la anchura del carro de la compraAjuste la anchura de la cesta de la compra adecuadamente (se recomienda 350px-400px) para garantizar espacio suficiente para mostrar los detalles del pedido.

Paso 4: Configurar el SEO y la optimización de las páginas de la cesta de la compra

• Optimizar la velocidad de carga de las páginas: Utilizando un plugin de caché (por ejemplo Cohete WP) y plugins de compresión de imágenes (como Smush) Acelerar la carga del carrito de la compra.
• Ajuste de los botones de la cesta de la compra CTA (llamada a la acción)Coloque el botón "pasar por caja" en un lugar destacado y utilice colores que contrasten para aumentar las conversiones.
• Activar el autocompletado del pago: Reduzca la intervención del usuario y aumente la eficacia de la compra.

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

php
function enqueue_google_places_api() {
    ? >
    
    <script
        function initAutocomplete() {
            
            if (!input) return; var autocomplete = new go
            var autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] }); var autocomplete = new google.maps.places.
            autocomplete.addListener('place_changed', function() {
                var place = autocomplete.getPlace();
                if (place.address_components) {
                    document.getElementById('ciudad_de_facturación').value = getAddressComponent(lugar, 'localidad');
                    document.getElementById('billing_state').value = getAddressComponent(place, 'administrative_area_level_1'); document.getElementById('billing_state').value = getAddressComponent(place, 'administrative_area_level_1');
                    document.getElementById('billing_postcode').value = getAddressComponent(place, 'postal_code');
                    document.getElementById('billing_country').value = getAddressComponent(place, 'country');
                }
            });
        }

        function getAddressComponent(lugar, tipo) {
            for (var i = 0; i < place.address_components.length; i++) {
                if (place.address_components[i].types.includes(type)) {
                    return lugar.componentes_direccion[i].nombre_largo;
                }
            }
            return '';
        }

        document.addEventListener("DOMContentLoaded", function() {
            initAutocomplete(); }); document.addEventListener("DOMContentLoaded", function() {
        }); }
    </script
    </script
}
add_action('wp_footer', 'enqueue_google_places_api');

efecto::

• Cuando un usuario está en la página de pago de WooCommerce del campo de dirección Al introducir una dirección, aparece una sugerencia de autocompletar de Google.
• Tras seleccionar una dirección, los campos de ciudad, estado, provincia, código postal y país se rellenan automáticamente.

Paso 5: Probar el proceso de la cesta de la compra

Después de completar la configuración del carrito de la compra, se recomienda realizar una prueba completa para asegurarse de que el usuario es capaz de completar la compra con éxito:

• Probar distintos métodos de pago(por ejemplo PayPal(tarjetas de crédito, transferencias bancarias, etc.).
• Comprueba cómo se ve la página del carrito de la compra en el móvil.
• Simule el funcionamiento de distintos usuarios para garantizar que no se pierdan los datos de la cesta de la compra..

resúmenes

Avada tematizado como. WooCommerce Se proporcionan potentes opciones de personalización del carro de la compra para optimizar el proceso de compra del usuario y aumentar las tasas de conversión de pedidos. Al habilitar los carros de la compra Ajax, utilizar carros de la compra contiguos, personalizar los diseños de página del carro de la compra y optimizar el rendimiento de la página, puede crear una experiencia de compra más intuitiva y fluida y mejorar la satisfacción del usuario.