WooCommerce AJAX adicionar ao carrinho – Tutorial passo a passo

Publicados: 2019-11-20

Algumas semanas atrás, falamos sobre como adicionar a função de carrinho de forma programática para aumentar suas vendas. Hoje, veremos como implementar o AJAX no botão Adicionar ao carrinho em produtos WooCommerce . Isso melhorará a experiência do usuário e o processo geral de vendas, o que também ajudará você a otimizar sua loja e aumentar sua receita.

Hoje em dia, se você deseja administrar uma loja de sucesso, é fundamental que seu site atualize o carrinho dinamicamente. Caso contrário, toda vez que um usuário adicionar um produto ao carrinho, a página será recarregada, tornando o processo de compra muito lento e aumentando as chances de os clientes desistirem. É por isso que renovar sua loja com a função de adicionar ao carrinho WooCommerce AJAX é uma obrigação para reduzir o abandono de carrinho e aumentar suas vendas.

Neste guia, mostraremos como fazer isso passo a passo.

Benefícios do AJAX no WooCommerce

Então, para resumir, os benefícios de usar AJAX em sua loja são:

  • Reduza a carga e a largura de banda do servidor
  • Acelere o processo de compra
  • Melhore a experiência do cliente
  • Reduza o abandono de carrinho
  • Aumente as taxas de conversão

Tutorial: WooCommerce AJAX adicionar ao carrinho

Para aplicar a função AJAX adicionar ao carrinho no WooCommerce , existem duas opções:

  1. Com um plug-in
  2. Codificando você mesmo

Vamos dar uma olhada em cada método.

1) AJAX adicionar ao carrinho com um plugin

Se você não tem experiência em codificação ou prefere uma solução fácil, usar um plugin é uma excelente escolha. Basta baixar nosso plugin AJAX para adicionar ao carrinho WooCommerce, instalá-lo e o software fará o resto.

Ajax adicionar ao carrinho para WooCommerce

AJAX adicionar ao carrinho para WooCommerce é um dos melhores plugins para adicionar AJAX ao botão Adicionar ao carrinho do WooCommerce. Essa ferramenta permite que os compradores incluam produtos únicos ou variáveis ​​em seus carrinhos sem precisar recarregar o site todas as vezes. O que é ainda melhor é que ele funciona sem problemas em 99% dos temas do WordPress e não requer nenhuma configuração inicial. Depois de instalá-lo, ele estará pronto para ser usado.

2) Codifique você mesmo

Você tem algumas habilidades de codificação e prefere personalizar o botão Adicionar ao carrinho do WooCommerce AJAX? Neste guia, mostraremos como fazer isso passo a passo.

A) Instale um tema filho

A primeira coisa que você precisa fazer é criar um tema filho . Se você não tiver um, você pode usar um plugin. Existem vários deles, então basta escolher o que você mais gosta e instalá-lo em sua loja. Por que você deve instalar um tema filho? Porque se você personalizar diretamente os arquivos do tema, na próxima vez que você atualizar o tema, os novos arquivos substituirão suas alterações e todas as suas personalizações serão perdidas. No entanto, se você personalizar o tema filho, as modificações não serão substituídas.

B) Incluir arquivo JavaScript (JS)

No arquivo functions.php do tema filho, inclua um arquivo JavaScript usando o gancho wp_enqueue_script . Este é um dos ganchos mais populares que o WordPress oferece para personalizar sites. Vamos dar uma olhada no script que inclui o arquivo ajax_add_to_cart.js abaixo:

 function ql_woocommerce_ajax_add_to_cart_js() {
    if (function_exists('is_product') && is_product()) {  
       wp_enqueue_script('custom_script', get_bloginfo('stylesheet_directory') . '/js/ajax_add_to_cart.js', array('jquery'),'1.0');
    }
}
add_action('wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js');

Com a condicional if (function_exists('is_product') && is_product()) na linha 2, você garante que o JQuery seja aplicado apenas em uma página de produto.

C) Criar um arquivo JS

Depois de fazer isso, crie o arquivo que você incluiu na etapa anterior. Basta ir ao seu cPanel e depois à pasta do tema filho . Depois disso, siga a rota wp_content /themes/ folder . Lá, crie uma nova pasta no tema filho chamada js , e depois um arquivo dentro dela com o mesmo nome que você usou no hook ajax-add-to-cart.js . Tenha em mente que esta etapa também funciona mesmo se você usar um cliente FTP. Se o seu tema filho já tiver uma pasta JS, você poderá usá-la sem criar uma nova.

D) O arquivo JQuery/JS

A próxima etapa é trabalhar no arquivo JQuery que você carregou em seu tema filho. Esse arquivo está vazio, então você precisa adicionar scripts. Primeiro, evite que o botão adicionar ao carrinho recarregue a página com o seguinte script:

 $('.single_add_to_cart_button').on('click', function(e) { 
    e.preventDefault();
});

Observe que usamos o seletor $('.single_add_to_cart_button') para acionar a chamada AJAX quando o botão é clicado. Você deve entender isso porque todos os scripts a seguir irão para dentro desta função.

E) JQuery WooCommerce AJAX adicionar ao carrinho em produtos individuais

Portanto, o script JQuery completo para AJAX adicionar ao carrinho em produtos únicos é:

 jQuery(document).ready(function($) {
    $('.single_add_to_cart_button').on('click', function(e){ 
    e.preventDefault();
    $estebotão = $(este),
                $form = $thisbutton.closest('form.cart'),
                id = $thisbutton.val(),
                product_qty = $form.find('input[name=quantity]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || identificação,
                variação_id = $form.find('input[name=variation_id]').val() || 0;
    var dados = {
            ação: 'ql_woocommerce_ajax_add_to_cart',
            product_id: product_id,
            product_sku: '',
            quantidade: product_qty,
            variação_id: variação_id,
        };
    $.ajax({
            tipo: 'postagem',
            url: wc_add_to_cart_params.ajax_url,
            dados: dados,
            antesEnviar: função (resposta) {
                $thisbutton.removeClass('adicionado').addClass('carregando');
            },
            complete: function (resposta) {
                $thisbutton.addClass('adicionado').removeClass('carregando');
            }, 
            sucesso: função (resposta) { 
                if (resposta.erro & resposta.url_produto) {
                    window.location = response.product_url;
                    Retorna;
                } senão { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) O script PHP

Depois, você precisa do manipulador PHP. A melhor maneira é usar alguns dos ganchos de filtro do WooCommerce para criar sua função de adicionar ao carrinho . Desta vez você fará isso usando AJAX. Simplesmente copie e cole o seguinte script no arquivo functions.php do tema filho abaixo do script anterior que usamos para incluir o arquivo JS.

 add_action('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart'); 
add_action('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');          
function ql_woocommerce_ajax_add_to_cart() {  
    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $quantidade = vazio($_POST['quantidade']) ? 1 : wc_stock_amount($_POST['quantity']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $quantity);
    $product_status = get_post_status($product_id); 
    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) { 
        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
            if ('sim' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($product_id => $quantity), true); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } senão { 
                $dados = array( 
                    'erro' => verdadeiro,
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                echo wp_send_json($dados);
            }
            wp_die();
        }

É isso! Você acabou de criar seu botão Adicionar ao carrinho do WooCommerce AJAX ! Mas como você sabe que fez tudo corretamente? Você pode verificar facilmente. Ao clicar no botão adicionar ao carrinho , o produto deve ser adicionado ao carrinho sem recarregar a página.

Conclusão

Em suma, se você deseja otimizar sua loja, a função de adicionar ao carrinho do WooCommerce AJAX é obrigatória. A maneira mais fácil de aplicá-lo é usando o plug-in AJAX para adicionar ao carrinho WooCommerce. No entanto, se você tiver habilidades de codificação, poderá codificar AJAX e adicionar ao carrinho com um tema filho e um pouco de PHP, conforme descrito acima.

Ambas as opções são excelentes, então escolha a que melhor se adapta às suas necessidades e habilidades. Isso ajudará você a melhorar a experiência do usuário e aumentar suas taxas de conversão. Por favor, deixe-nos saber seus pensamentos na seção de comentários abaixo.

Por fim, para obter mais guias sobre o WooCommerce, recomendamos que você confira nossos guias sobre como adicionar produtos WooCommerce e como criar atributos de produto padrão no WooCommerce.