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.
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:
ou
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:
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”.
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á:
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
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.
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
Oi Danillo!
Boa pegada, cara! Obrigado pela dica. Vai ajudar outras pessoas!
Obrigado, Rafa!
De nada, Vinicius! Precisando, é só chamar!
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.
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!
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 –
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!
É 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!
o meu tb tem + e -, me envia , por favor, como vc fez