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.
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.
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>.
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”. 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á:
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).
functions.php. 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.
Neste artigo, você aprenderá como a página de checkout do WooCommerce é construída e como…
O WordPress usa os plugins drop-in, um recurso oculto, para substituir, adicionar ou aprimorar um…
Descubra se o WordPress é realmente gratuito e aprenda sobre os custos associados à criação…
Fala Profissional! Neste tutorial, eu, Rafa Carvalhido vou ajudar a resolver um bug específico que…
Encontre os hooks do WooCommerce na página de produto rapidamente! Este guia prático mostra de…
Fala Profissional! Você está buscando integrar a nova API dos Correios com seu e-commerce? Está…
View Comments
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