Atualizar carrinho automaticamente ao trocar quantidades

Botão de atualizar carrinho WooCommerce

Você quer se livrar do botão de Atualizar Carrinho e atualizar as quantidades dos produtos automaticamente, certo? Normalmente, quando você troca a quantidade de um produto na página de carrinho do WooCommerce, você deve apertar o botão “Atualizar Carrinho” para que as mudanças tenham efeito.

Menos cliques = mais agilidade no ato da compra. Será que é tão difícil assim fazer essa alteração? Quer aprender a atualizar o carrinho automaticamente ao trocar quantidades? Continua lendo que é facinho.

Atualizar automaticamente o carrinho do WooCommerce quando a quantidade for alterada

Vamos dividir a tarefa em duas partes para ficar ainda mais fácil, ok? Primeiro, veja o carrinho abaixo com 1 produto e o botão de Atualizar Carrinho. Vamos remover o botão e depois adicionar um script para que ao clicar nas setinhas dentro da caixa de quantidade, o total seja calculado automaticamente.

Print da tela do carrinho de compras do WooCommerce

Parte 1 - CSS: Ocultar o botão "Atualizar Carrinho" do WooCommerce

O botão de atualizar, é um código HTML do tipo <button type="submit"> e já que as quantidades serão atualizadas automaticamente, você não precisa mais dele. Basta fazer ele sumir através da propriedade de CSS display. Veja como:

button[name='update_cart'] {
display: none !important;
}
style.css

ou

input[name='update_cart'] {
display: none !important;
}
style.css

Mas por que 2 códigos diferentes? Devo usar os dois? A resposta é não, saiba qual dos dois usar. Há pouco tempo atrás, o WooCommerce decidiu trocar a marcação HTML dos botões. Eles deixaram de ser do tipo <input> para se tornar do tipo <button>.

Dependendo de se seu tema possui modelo de página customizada para a página do carrinho, pode ser que você ainda esteja usando o <input>.

Parte 2 - PHP: atualize automaticamente o WooCommerce Cart quando a quantidade for alterada

Agora que o botão está oculto, precisamos fazer com que o sistema pense que o botão foi clicado através de uma JQuery e deixar o WooCommerce fazer o mesmo trabalho (atualizar automaticamente o carrinho do WooCommerce quando a quantidade for alterada).

Em outras palavras, quando “clicamos” em qualquer uma das entradas de quantidade, acionamos um “clique” no botão oculto Atualizar carrinho.

Fácil não? Veja como isso é feito e acompanhe a explicação:

/**
* @snippet Atualizar Carrinho Automaticamente ao Trocar Quantidades- WooCommerce
* @URL https://profissionalwp.dev.br/blog/?p=3683
* @autor Rafa Carvalhido
* @testado Até Woo 3.4.3
*/
add_action( 'wp_footer', 'programa_wp_atualizar_qtd_carrinho' );
function programa_wp_atualizar_qtd_carrinho() {
if( is_cart() ) {
?>
<script type="text/javascript">
jQuery('div.woocommerce').on('click', 'input.qty', function(){
jQuery("[name='update_cart']").trigger("click");
});
</script>
<?php
}
}
functions.php
Primeiro chamamos o gancho (hook) wp_footer para adicionar nossa função ao rodapé, como devemos fazer com todos os scripts adicionados manualmente. Depois, dizemos que queremos aplicar este script apenas na página do carrinho com if(is_cart()). Por fim, nossa função faz com que ao clicar nos botõezinhos de subir ou descer a quantidade de um produto no carrinho WooCommerce, automaticamente seja “clicado” o botão de “Atualizar Carrinho”.
Botão removido e quantidade atualizada automaticamente

Onde colocar estes códigos?

Sou noob, me ajuda!

Se você já está programando em WordPress e WooCommerce, já deveria saber onde colocar estes códigos, mas se você for como eu que gosta de fazer as coisas mesmo antes de aprender a teoria, vamos lá:

Os arquivos do tema filho no FTP

Parte 1: CSS

Para inserir o snippet CSS, há algumas opções, sendo a minha preferida o arquivo style.css localizado na pasta do seu tema (você deveria estar usando tema filho para não perder as alterações durante as atualizações de tema).

Parte 2: PHP

Na mesma pasta mencionada acima, inclua o código PHP dentro do seu functions.php.

Este código funcionou pra você?

Me fala que eu respondo!

Caso não tenha funcionado, por favor me avise nos comentários abaixo.

Para realizar os testes, utilizei o tema Twenty Seventeen, a versão do WooCommerce que aparece no snippet e um serviço de hospedagem especial para WordPress rodando PHP7.

Rafa Carvalhido Escrito por:

Rafa é Programador Web especializado em WordPress + WooCommerce e escritor nos tempos livres. Criação de sites, otimizações de velocidade e SEO, e criação de plugins são algumas de suas funções rotineiras que lhe permitem falar com propriedade quando o assunto é WordPress.

10 Comentários

  1. 20 de fevereiro de 2019
    Responder

    Quando clico no campo sem clicar na seta a pagina ja é atualizada antes do usuário inserir o valor, caso não queira usar a seta

    • 21 de fevereiro de 2019
      Responder

      Oi Danillo!

      Boa pegada, cara! Obrigado pela dica. Vai ajudar outras pessoas!

  2. Alexandre Gonçalves
    2 de abril de 2020
    Responder

    Opa Rafa, vou testar os códigos neste momento, te pergunto na página do produto, é possível eu também alterar o valor, quando altero a quantidade com este código, preciso informar ali if(is_cart()), para ser utilizado também na página do produto?
    Outra função que gostaria de usar é que ao alterar a quantidade do produto além de alterar o valor, mudar a opção do frete para frete grátis ao atingir um determinado valor. Tanto na página do produto quanto na página do carrinho.

    • 11 de junho de 2020
      Responder

      Oi Alexandre!

      Não funcionaria porque o is_cart() justamente verifica se você está na tela do carrinho. Para saber se está na tela de produto utilize is_product(). Mesmo assim, este não seria o método indicado. Para alterar o preço de um produto é um pouco mais difícil, mas dá pra fazer sim!

  3. Allan França Dutra
    25 de novembro de 2020
    Responder

    funcionou quase que perfeitamente. tomei a liberdade de editar um pouco, para a minha realidade.
    achei que a atualização sempre que clicar em + ou -, um pouco lenta, visto que aparece uma tela de carregamento, por isso mudei um pouco o código

    var t; // armazena o time out para poder resetar
    var time= 10;
    function countdown(){
    if(time>0){
    time –;
    t = setTimeout(function(){countdown()}, 200);
    }else{
    jQuery(“[name=’update_cart’]”).trigger(“click”);
    }
    }
    window.addEventListener(“load”, function(event) { // espera o documento ser completamente carregado
    jQuery(‘div.woocommerce’).on(‘change’, ‘input.qty’, function(){
    time = 10;
    clearTimeout(t);
    countdown();
    });
    });

    fiz a implementação de uma contagem regressiva, dessa forma, sempre que o valor é editado (mudei para change, invés de click), espera-se 2 segundos antes que a atualização seja feita. desta forma, ira funcionar tanto quando digite o valor manualmente, quando você clica no + e –

  4. Allan França Dutra
    25 de novembro de 2020
    Responder

    foi necessário trocar o Listener, pois, diferente do seu modelo, o meu carrinho possui indicadores de + e – envolta do input.qty, que não acionavam o click do mesmo. Apesar de todas estas alterações que precisei fazer, muito obrigado pelo post, ele me ajudou muito a resolver meu problema!

    • Rafa Carvalhido
      27 de novembro de 2020
      Responder

      É Allan… Cada tema tem pequenas diferenças entre um e outro, mas o funcionamento básico é sempre o mesmo. Que bom que você conseguiu trazer pra sua realidade com ajuda deste singelo tutorial.
      E bom trabalho, conseguiu direitinho!

    • jansen
      6 de abril de 2021
      Responder

      o meu tb tem + e -, me envia , por favor, como vc fez

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *