Como posso apresentar o número total de itens actuais no meu carrinho WooCommerce utilizando o editor Elementor no Wordpress? Iremos utilizar o elemento Elementor Icon List, mas este método também funcionará para a maioria dos outros elementos.

Eis o efeito que estamos a tentar obter:

Com este tutorial, aprenderá a apresentar o número total de artigos no seu carrinho de compras e a quantidade será actualizada automaticamente quando os artigos forem adicionados ou removidos.

Primeiro, adicione o snippet de código curto WooCommerce Shopping Cart Total.

Para começar, o seguinte código precisa de ser adicionado ao novo snippet de código PHP. Utilize o plugin Code Snippets ou adicione-o diretamente ao functions.php Documentação.

Para localizar e editar o functions.php pode seguir os passos abaixo:

1. Iniciar sessão no painel de controlo do WordPress.
2. Navegue até "Aparência" > "Editor de ficheiros de temas"..
   • No menu da esquerda, clique em "Aparência" e, em seguida, selecione "Editor de ficheiros de temas".

3. Selecionar subtópico.
   • Selecione o seu tema secundário no menu pendente "Selecionar um tema para editar" no canto superior direito.

4. localizar functions.php papéis.
   • Na lista de ficheiros à direita, localize e clique no ficheiro functions.php Documentação.

existir functions.php Adicione o código no final do ficheiro e clique em "Documentos actualizados" para guardar as alterações.

// Mostrar o número de itens no carrinho
função display_cart_count() {
    $cart_count = WC()->cart->get_cart_contents_count();
    $cart_url = wc_get_cart_url(); ?
    ? >
    <a class="menu-item cart-contents" href="/pt/</?php echo $cart_url; ?>" title="Ver o seu carrinho de compras">
        <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="/pt/</?php echo wc_get_cart_url(); ?>" title="Ver o seu carrinho de compras">
        <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');

Em seguida, aceda ao modelo de título do Elementor.

Abra o modelo de cabeçalho do Elementor (ou qualquer outro local) onde pretende apresentar o número total de itens no seu carrinho WooCommerce e adicione um elemento de lista de ícones. Siga os passos abaixo:

1. Navegar para o modelo::
   • No menu da esquerda, clique em "Modelos".
   • Em seguida, selecione "Theme Builder" (ou "Theme Builder").

2. Selecionar o modelo a editar::
   • Na página Theme Builder, verá todos os modelos, como cabeçalho, rodapé, publicação única, página de arquivo, etc.
   • Para editar o modelo de cabeçalho, localize e clique no modelo "Cabeçalho" (ou "Cabeçalho").

3. Editar modelo::
   • Encontre o modelo de título que pretende editar e clique no botão "Edit with Elementor" (ou "Editar com o Elementor").
4. Adicionar um elemento de lista de ícones::
   • No editor Elementor, localize o elemento "Icon List" (ou "Icon List") no painel esquerdo.
   • Arraste o elemento Lista de ícones para o local onde pretende apresentar o número total de itens no seu carrinho WooCommerce.

5. Configurar a lista de ícones::

Na lista de ícones, selecione um dos itens de ícone e clique no ícone para selecionar o ícone do carrinho de compras.

No campo de texto para este item, introduza o seguinte:

[contagem_de_itens_do_cartão]

6. Guardar e atualizar::
   • Quando a configuração estiver concluída, clique em "atualização" para guardar as alterações.

estilo

Vamos torná-lo um pouco mais bonito, caso contrário ficará assim:

Adicionar CSS personalizado::

• Selecionar o elemento da lista de ícones.
• No painel esquerdo, clique em "nível elevado"Tab.
• Localize e clique na secção "Personalizar CSS".
• Adicione o seguinte código CSS à caixa de entrada CSS personalizada:

.elementor-icon-list-item .cart-contents {
    position: relative;
    display: inline-block;
}
.elementor-icon-list-item .cart-contents-count {
    position: absolute; top: -10px; }
    top: -10px;
    direita: -10px; }
    background: red; colour: white; }
    fundo: vermelho; cor: branco;
    border-radius: 50%;
    padding: 2px 6px; font-size: 12px; font-size: 6px
    font-size: 12px; }
}

Verá esta secção duas vezes no CSS:

:nth-child(3)

Ajuste ambos para corresponderem aos seus próprios ícones.

Por exemplo, se o ícone do carrinho de compras for o primeiro da lista de ícones, altere-o para:enésimo filho(1)em vez de:n-ésimo filho(3).

O resto do CSS, ajustado conforme necessário para posicionar e estilizar a contagem.

Resumo.

Ao adicionar snippets de código PHP personalizados e integrá-los no functions.php para criar um código curto para exibir o número de itens do carrinho. Também demonstra como adicionar um elemento de lista de ícones ao modelo de cabeçalho do Elementor e usar esse código curto para exibir o número total de itens do carrinho na página. Por fim, utilize o ícone do Elementor para ver o número de artigos no seu carrinho de compras WooCommerce em tempo real! Uma melhor experiência de compras para os utilizadores.