WooCommerce carrito de la compra cantidad de productos y el contenido del método de visualización de actualización en tiempo real

En un sitio web de comercio electrónico, la página del carrito de la compra es una de las partes principales en las que los clientes pueden ver la información del pedido. Por defecto, la páginaWooCommerce La cesta de la compra no aparece en la barra de menús, y esto puede no ser suficientemente intuitivo para la mayoría de los comerciantes. Por lo tanto, optimizar y personalizar la funcionalidad de la cesta de la compra es una herramienta importante para mejorar las tasas de conversión.

Comprobar si WooCommerce está activo

Antes de implementar una actualización dinámica de la cesta de la compra, asegúrese primero de que el archivo WooCommerce Si WooCommerce se ha activado correctamente. Si WooCommerce no está instalado o activado, la llamada a la función del carrito de la compra puede informar de un error. El siguiente código se utiliza para detectar si WooCommerce está disponible y muestra la cantidad actual de productos y el importe total en el botón del carrito de la compra:

<?php global $woocommerce; ?>
<a class="your-class-name" href="/es/</?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('Cart View', 'woothemes'); ?>">
cart->cart_contents_count, 'woothemes'),?
 $woocommerce->cart->cart_contents_count);? > -
cart->get_cart_total();? >
</a>
<?php global $woocommerce; ?>
<a class="your-class-name" href="/es/</?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('Cart View', 'woothemes'); ?>">
cart->cart_contents_count, 'woothemes'),?
 $woocommerce->cart->cart_contents_count);? > -
cart->get_cart_total();? >
</a>
<?php global $woocommerce; ?>
<a class="your-class-name" href="/es/</?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('Cart View', 'woothemes'); ?>">
cart-&gt;cart_contents_count, 'woothemes'),?
 $woocommerce-&gt;cart-&gt;cart_contents_count);? &gt; -
cart-&gt;get_cart_total();? &gt;
</a>

Este código puede colocarse en cualquiera de los archivos de plantilla del tema y se recomienda colocarlo en un lugar adecuado, como la zona de la barra de navegación, para que los clientes puedan ver el contenido del carrito en cualquier momento.

Añada el código del carrito de la compra al archivo header.php

Para que la información de la cesta de la compra aparezca en la barra de navegación, es necesario modificar la opción header.php que inserta el código del botón de la cesta de la compra en la estructura del menú, por ejemplo:

<header id="masthead" class="site-header" role="banner">
    
    <div class="navigation-top">
        <div class="wrap">
            <?php get_template_part('template-parts/navigation/navigation', 'top'); ?>
            <!-- 购物车开始 -->
            <?php global $woocommerce; ?>
            <a class="your-class-name" href="/es/</?php echo $woocommerce->cart->get_cart_url(); ?>"
               title="<?php _e('Cart View', 'woothemes'); ?>">
                cart->cart_contents_count, 'woothemes'),?
                $woocommerce->cart->cart_contents_count);? > -
                cart->get_cart_total();? >
            </a>
            <!-- 购物车结束 -->
        </div>
    </div>
    <?php endif; ?>
</header>
<header id="masthead" class="site-header" role="banner">
    
    <div class="navigation-top">
        <div class="wrap">
            <?php get_template_part('template-parts/navigation/navigation', 'top'); ?>
            <!-- 购物车开始 -->
            <?php global $woocommerce; ?>
            <a class="your-class-name" href="/es/</?php echo $woocommerce->cart->get_cart_url(); ?>"
               title="<?php _e('Cart View', 'woothemes'); ?>">
                cart->cart_contents_count, 'woothemes'),?
                $woocommerce->cart->cart_contents_count);? > -
                cart->get_cart_total();? >
            </a>
            <!-- 购物车结束 -->
        </div>
    </div>
    <?php endif; ?>
</header>
<header id="masthead" class="site-header" role="banner">
    
    <div class="navigation-top">
        <div class="wrap">
            <?php get_template_part('template-parts/navigation/navigation', 'top'); ?>
            <!-- 购物车开始 -->
            <?php global $woocommerce; ?>
            <a class="your-class-name" href="/es/</?php echo $woocommerce->cart->get_cart_url(); ?>"
               title="<?php _e('Cart View', 'woothemes'); ?>">
                cart-&gt;cart_contents_count, 'woothemes'),?
                $woocommerce-&gt;cart-&gt;cart_contents_count);? &gt; -
                cart-&gt;get_cart_total();? &gt;
            </a>
            <!-- 购物车结束 -->
        </div>
    </div>
    <?php endif; ?>
</header>

Después de guardar el archivo, actualice la página de inicio para ver el archivo WooCommerce La información de la cesta de la compra se ha añadido correctamente a la barra de navegación.

Probar la visualización de la cantidad y el importe total del carro de la compra

Una vez añadido el código, actualice la página y observe si el carrito muestra correctamente la cantidad y el importe. Si todo es correcto, el carrito mostrará el siguiente mensaje.

Añadir productos a la cesta

Pruebe a añadir algunos artículos en la página de inicio y observe cómo se actualiza la cesta de la compra. Por defecto, la información del carrito no se actualiza automáticamente y solo cambia al actualizar la página.

tackle AJAX Problemas de actualización de la cesta de la compra

por defecto (ajuste) WooCommerce La cesta de la compra no se actualiza automáticamente y es necesario actualizar manualmente la página para ver los cambios. Para solucionarlo, añada el siguiente código al archivo funciones.php para permitir que el carro de la compra se actualice dinámicamente a medida que se añaden artículos:

add_filter('add_to_cart_custom_fragments', 'woocommerce_header_add_to_cart_custom_fragment');
function woocommerce_header_add_to_cart_custom_fragment($cart_fragments) {
    global $woocommerce; function
    ob_start(); ?
    ? >
    <a class="cart-contents" href="/es/</?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View cart', 'woothemes'); ?>">
        cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart _contents_count);? > - cart->get_cart_total(); ? >
    </a>
    <?php
    $cart_fragments['a.cart-contents'] = ob_get_clean();
    return $cart_fragments;
}
add_filter('add_to_cart_custom_fragments', 'woocommerce_header_add_to_cart_custom_fragment');
function woocommerce_header_add_to_cart_custom_fragment($cart_fragments) {
    global $woocommerce; function
    ob_start(); ?
    ? >
    <a class="cart-contents" href="/es/</?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View cart', 'woothemes'); ?>">
        cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart _contents_count);? > - cart->get_cart_total(); ? >
    </a>
    <?php
    $cart_fragments['a.cart-contents'] = ob_get_clean();
    return $cart_fragments;
}
add_filter('add_to_cart_custom_fragments', 'woocommerce_header_add_to_cart_custom_fragment');
function woocommerce_header_add_to_cart_custom_fragment($cart_fragments) {
    global $woocommerce; function
    ob_start(); ?
    ? &gt;
    <a class="cart-contents" href="/es/</?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View cart', 'woothemes'); ?>">
        cart-&gt;cart_contents_count, 'woothemes'), $woocommerce-&gt;cart-&gt;cart _contents_count);? &gt; - cart-&gt;get_cart_total(); ? &gt;
    </a>
    <?php
    $cart_fragments['a.cart-contents'] = ob_get_clean();
    return $cart_fragments;
}

Después de guardar el archivo, pruebe de nuevo la cesta de la compra, al añadir artículos, la cantidad de la cesta y el importe total se actualizarán automáticamente, sin necesidad de actualizar la página manualmente.

resúmenes

Este artículo describe la WooCommerce Métodos básicos de optimización de la cesta de la compra, como mostrar la información de la cesta en la barra de navegación, actualizar dinámicamente el contenido de la cesta y utilizar la función AJAX Deja que el carrito de la compra cambie en tiempo real. Este enfoque no requiere plugins adicionales y puede realizarse añadiendo código directamente a los archivos del tema. Si desea optimizar aún más la funcionalidad de la cesta de la compra, como añadir ofertas de cuenta atrás, productos recomendados, etc., también puede combinar la función JavaScript Realizar más diseño de interacción.