¿Cómo puedo mostrar el número total de artículos actuales en mi carrito de WooCommerce usando el editor Elementor en Wordpress? Utilizaremos el elemento Elementor Icon List, pero este método funcionará también para la mayoría de los demás elementos.

Este es el efecto que queremos conseguir:

Con este tutorial, aprenderá a mostrar el número total de artículos en su cesta de la compra y la cantidad se actualizará automáticamente cuando se añadan o eliminen artículos.

En primer lugar, añada el fragmento de código corto de WooCommerce Shopping Cart Total.

Para empezar, es necesario añadir el siguiente código al nuevo fragmento de código PHP. Utilice el plugin Code Snippets o añádalo directamente al tema hijo en la carpeta funciones.php Documentación.

Para localizar y editar el funciones.php puede seguir los pasos que se indican a continuación:

1. Acceda al panel de control de WordPress.
2. Vaya a "Apariencia" > "Editor de archivos de temas"..
   • En el menú de la izquierda, haga clic en "Apariencia" y, a continuación, seleccione "Editor de archivos de temas".

3. Seleccionar subtema.
   • Seleccione su tema hijo en el menú desplegable "Seleccionar un tema para editar" de la esquina superior derecha.

4. localice funciones.php papeles.
   • En la lista de archivos de la derecha, busque y haga clic en el archivo funciones.php Documentación.

existe funciones.php Añade el código al final del archivo y haz clic en "Documentos actualizados"para guardar los cambios.

// Mostrar el número de artículos en el carrito
function mostrar_cuenta_carrito() {
    $cart_count = WC()->cart->get_cart_contents_count();
    $cart_url = wc_get_cart_url(); ?
    ? >
    <a class="menu-item cart-contents" href="/es/</?php echo $cart_url; ?>" title="Ver su cesta de la compra">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
}

// 使用短代码
add_shortcode('cart_count', 'display_cart_count');

// Ajax 刷新购物车商品数量
function refresh_cart_count($fragments) {
    ob_start();
    $cart_count = WC()->cart->get_cart_contents_count();
    ?>
    <a class="menu-item cart-contents" href="/es/</?php echo wc_get_cart_url(); ?>" title="Ver su cesta de la compra">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
    $fragments['a.cart-contents'] = ob_get_clean();
    return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'refresh_cart_count');

A continuación, ve a la plantilla de título de Elementor.

Abre la plantilla de cabecera de Elementor (o cualquier otra ubicación) donde desees mostrar el número total de artículos de tu carrito de WooCommerce y añade un elemento de lista de iconos. Sigue los pasos que se indican a continuación:

1. Ir a la plantilla::
   • En el menú de la izquierda, haga clic en "Plantillas".
   • A continuación, seleccione "Theme Builder" (o "Constructor de temas").

2. Seleccione la plantilla que desea editar::
   • En la página Theme Builder, verás todas las plantillas como cabecera, pie de página, entrada única, página de archivo, etc.
   • Para editar la plantilla de cabecera, busque y haga clic en la plantilla "Cabecera" (o "Header").

3. Editar plantilla::
   • Busca la plantilla de título que quieras editar y haz clic en el botón "Editar con Elementor".
4. Añadir un elemento de lista de iconos::
   • En el editor de Elementor, localice el elemento "Lista de iconos" (o "Lista de iconos") en el panel izquierdo.
   • Arrastre el elemento Lista de iconos a la ubicación en la que desea mostrar el número total de artículos en su carrito de WooCommerce.

5. Configurar la lista de iconos::

En la lista de iconos, seleccione uno de los elementos de icono y haga clic en el icono para seleccionar el icono del carro de la compra.

En el campo de texto de este elemento, introduzca lo siguiente:

[cart_item_count]

6. Guardar y actualizar::
   • Una vez finalizada la configuración, pulse en la parte inferior de la página "actualización"para guardar los cambios.

estilismo

Hagamos que se vea un poco más bonito, de lo contrario se verá así:

Añadir CSS personalizado::

• Seleccione el elemento de la lista de iconos.
• En el panel izquierdo, haga clic en "alto nivel"Tab.
• Busque y haga clic en la sección "Personalizar CSS".
• Añada el siguiente código CSS al cuadro de entrada CSS personalizado:

.elementor-icon-list-item .cart-contents {
    position: relative;
    display: inline-block;
}
.elementor-icon-list-item .cart-contents-count {
    position: absolute; top: -10px; }
    top: -10px;
    right: -10px; }
    background: rojo; color: blanco; }
    background: rojo; color: blanco;
    border-radius: 50%; padding: 2px 6px;
    padding: 2px 6px; font-size: 12px; font-size: 6px
    font-size: 12px; }
}

Verá esta sección dos veces en CSS:

:nth-child(3)

Ajusta ambos para que coincidan con tus propios iconos.

Por ejemplo, si el icono de su cesta de la compra es el primero de la lista de iconos, cámbielo por:nth-child(1)en lugar de:nth-child(3).

El resto del CSS, ajustado según sea necesario para posicionar y dar estilo a la cuenta.

Resumen.

Añadiendo fragmentos de código PHP personalizados e integrándolos en el tema hijo de funciones.php para crear un código corto que muestre el número de artículos del carrito. También demuestra cómo añadir un elemento de lista de iconos a la plantilla de cabecera de Elementor y utilizar ese código corto para mostrar el número total de artículos del carrito en la página. Por último, utiliza el icono de Elementor para ver el número de artículos de tu carrito de WooCommerce en tiempo real. Una mejor experiencia de compra para los usuarios.