Remova o botão "Atualizar carrinho" e faça automaticamente na alteração de quantidade

Categoria

Woocommerce

Postado em

17 de setembro de 2019

Última Atualização

17 de setembro de 2019

Visualizações

1377

É apenas uma coisa minúscula, mas às vezes pode confundir os clientes do seu site. Como, por padrão, quando você altera a quantidade do produto no carrinho do WooCommerce, o carrinho não será atualizado até você pressionar o botão Atualizar carrinho.

O que acha de fazer com que seu carrinho atualize automaticamente após alterar a quantidade?

Bacana não é?

Veja o GIF ilustrativo de como vai ficar logo abaixo:

Ajax Cart Update

Com algumas linhas de código podemos modificar a forma com que o carrinho é atualizado.

Mas antes de tudo, teremos que esconder o botão de atualizar o carrinho, vale a pena lembrar que vamos apenas esconder não podemos de forma alguma remover ele, pois o gatilho do js funciona com o id setado nele.

Para esconder é simples, acesso o arquivo .css do seu tema e coloque a linha de código abaixo:

.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
    display: none;
}

O segundo passo é saber como funciona o evento jQuery dessa atualização:

jQuery( function( $ ) {
    $('.woocommerce').on('change', 'input.qty', function(){
        $("[name='update_cart']").trigger("click");
    });
} );

No código acima, você pode ver a versão padrão, mas ela não é perfeita e vou lhe dizer o porquê. Porque envia muitos pedidos de AJAX! Um pedido em cada alteração de quantidade!

Vamos otimizar um pouco esse processo.

var timeout;
 
jQuery( function( $ ) {
    $('.woocommerce').on('change', 'input.qty', function(){
 
        if ( timeout !== undefined ) {
            clearTimeout( timeout );
        }
 
        timeout = setTimeout(function() {
            $("[name='update_cart']").trigger("click");
        }, 1000 ); // 1 segundo de atraso, meio segundo (500) também parece bacana de deixar
 
    });
} );

Onde adicionar o código?

A maneira perfeita de inserir o código é se você é se você já estiver usando um tema filho e seu tema tiver arquivos .css e .js. Mas se você não tiver usando um tema filho, você pode usar os seguintes HOOKS wp_headwp_footerpara colocar o código acima.

 

Gostou? compartilhe nas redes!! ;)

Deixe seu comentário