Tag: woocommerce

WooCommerce: como adicionar um produto e finalizar a compra direto

Como fazer para que o cliente clique em “Comprar” e vá direto para o checkout, preenchendo seus dados para finalizar a compra?

Em algumas lojas virtuais, temos poucos ou apenas UM produto, de modo que queremos que o cliente clique em “Comprar” e vá direto para o checkout, preenchendo seus dados para finalizar a compra.

No WooCommerce isso é feito criando-se um URL do tipo “add to cart”, que terá o código do produto em questão.

O primeiro passo então, é obter o código do produto. Isso pode ser visto na opção “Produtos” do admin do WP.

O código de produto (ID) aparece quando se passa o cursor sobre o produto

Na lista de produtos, podemos ver o código (ID) quando se passa o cursor sobre o item desejado. No exemplo acima, o código do produto “Suporte veicular para celular” é 3491.

Depois, precisamos da página de finalização de compra. Na maioria das vezes, tua loja vai usar a página criada automaticamente pelo WooCommerce. Em Português, essa página se chama “Finalizar Compra”, com o slug finalizar-compra. Outro slug bem comum é checkout.

Com estes dados, podemos construir o URL desejado, que terá o seguinte formato:

nomedatualoja.com/finalizar-compra/?add-to-cart=<codigo-do-produto>

Por exemplo:

marcoandrei.com/loja/finalizar-compra/?add-to-cart=3491

O URL redireciona para finalizar a compra, já com o produto no carrinho

Para testar é só copiar esse URL na barra de endereço e pronto! A página Finalizar Compra é carregada já com o produto no carrinho, como vemos acima.

Nota que para esse endereço funcionar, a opção “Redirecionar ao carrinho após uma adição bem-sucedida” tem que estar DESLIGADA. Isso porque o parâmetro add-to-cart obviamente adiciona um item ao carrinho.

Sendo assim, se a opção estiver LIGADA, o WooCommerce vai redirecionar o comprador para o carrinho, que é o resultado diferente do que desejamos.

Tu podes encontrar essa opção no menu WooCommerce > Configurações > Produtos.

A opção “Redirecionar ao carrinho após uma adição bem-sucedida” precisa estar desligada

E é isso.

Ficaste com alguma dúvida? Tens uma observação a fazer? Manda teu comentário aí embaixo!

Até a próxima!

WooCommerce: Como alterar a posição do botão “Comprar” na página de produto?

Saiba como mudar a ordem de exibição do sumário de informações dos produtos no WooCommerce.

Não raro, quando estamos trabalhando em um tema para uma loja virtual no WooCommerce, é necessário alterar o leiaute da página interna de produto.

Quando se trata da formatação, basta analisarmos os estilos presentes nas páginas e usar CSS para fazer as alterações necessárias. Mas quando precisamos alterar as posições dos elementos na página? Neste caso, lançamos mão dos ganchos presentes no WooCommerce.

No caso da página de produtos, estamos falando do arquivo content-single-product.php, onde encontramos o seguinte código:

<div class="summary entry-summary">
	<?php
	/**
	* Hook: woocommerce_single_product_summary.
	*
	* @hooked woocommerce_template_single_title - 5
	* @hooked woocommerce_template_single_rating - 10
	* @hooked woocommerce_template_single_price - 10
	* @hooked woocommerce_template_single_excerpt - 20
	* @hooked woocommerce_template_single_add_to_cart - 30
	* @hooked woocommerce_template_single_meta - 40
	* @hooked woocommerce_template_single_sharing - 50
	* @hooked WC_Structured_Data::generate_product_data() - 60
	*/
	do_action( 'woocommerce_single_product_summary' );
	?>
</div>

Este trecho é a seção “summary”, ou seja, um sumário das informações do produto, como vemos na figura abaixo:

Página de produto com o resumo de informações do produto.

A função do_action indica que o gancho do WooCommerce onde são chamadas as funções que exibem as informações se chama woocommerce_single_product_summary. A primeira linha do comentário documenta exatamente isso:

* Hook: woocommerce_single_product_summary

Dessa forma, qualquer coisa que se quiser que apareça nessa seção deve ser adicionada por meio de uma função associada a esse gancho.

As linhas que seguem descrevem as funções que estão enganchadas em woocommerce_single_product_summary por padrão e a sua ordem de chamada. A função que estamos buscando é woocommerce_template_single_add_to_cart, que é a função que exibe o botão “Comprar”.

No comentário, podemos ver que ela é chamada na ordem 30. Ela vem depois da função woocommerce_template_single_excerpt, que exibe a descrição resumida do produto e está na ordem 20.

Se quisermos mover o botão para antes dessa descrição, basta chamar a função woocommerce_template_single_add_to_cart ANTES, ou seja, em uma ordem que seja menor que 20.

Para isso, vamos usar remove_action para desenganchar a função e anular o comportamento padrão, para depois usar add_action para adicionar o botão antes da descrição curta do produto.

Então, vamos lá: adiciona esse código simples no functions.php ou via um plug-in:

/* Move o botão Comprar para logo depois do preço. */

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );

O resultado será este:

Resumo de informações do produto com o botão sobre a descrição resumida.

Pronto! Simples e rápido, não?

Buenas, gostaste desse artigo? Foi útil para teu trabalho? Então compartilha na tua rede e deixa um comentário!