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.

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;
}
ou
input[name='update_cart'] {
    display: none !important;
}

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://programawordpress.pro.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() ) { 
		?> 
		 
		<?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 é 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.

Seja o primeiro a comentar: O que você acha?

Deixe uma resposta

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