Como adicionar texto Antes e Depois do botão Comprar no Woocommerce

Recentemente, trabalhei em alguns projetos de clientes que precisou inserir conteúdo na página de produtos no Woocommerce por esse motivo decidi escrever um tutorial completo sobre os ganchos do Woocommerce responsáveis por isso.

Eu utilizei os ganchos que estarei explicando nesse artigo para incluir conteúdo Antes e Depois do botão Comprar no Woocommerce.

Página Unica do Produto

Incluir esse bar Antes e o Contador depois do botão Comprar

Neste artigo não vou explicar o CSS e nem o contador regressivo que utilizei, somente vamos falar sobre os ganchos para incluir conteúdo nestas posições, então sem mais delongas vamos lá.

Antes do botão Adicionar ao carrinho

Pode ser feito facilmente com gancho woocommerce_before_add_to_cart_button, você vai precisar incluir esse código por exemplo em seu arquivo functions.php:

add_action( 'woocommerce_before_add_to_cart_button', 'before_add_to_cart_btn' );
 
function before_add_to_cart_btn(){
	echo 'Algum texto personalizado aqui';
}

Se você usar algumas condições lá, poderá obter o ID do produto atual com a função get_the_ID() aí é PHP e o céu é o limite.

Após o botão Adicionar ao carrinho

Se você deseja adicionar um texto personalizado após o botão “Adicionar ao carrinho”, o gancho woocommerce_after_add_to_cart_button deve ajudá-lo. Exemplo de uso deste gancho:

add_action( 'woocommerce_after_add_to_cart_button', 'after_add_to_cart_btn' );
 
function after_add_to_cart_btn(){
	echo 'Algum texto personalizado aqui';
}

Mais 2 ganchos

Há também mais 2 ganchos muito parecidos o  woocommerce_before_add_to_cart_formwoocommerce_after_add_to_cart_form.

Eu acho que você pode até adivinhar qual é a diferença deles. Portanto, o gancho woocommerce_before_add_to_cart_form será disparado um pouco mais cedo que woocommerce_before_add_to_cart_button, antes da tag <form>.

E o gancho woocommerce_after_add_to_cart_form será disparado um pouco depois woocommerce_after_add_to_cart_button, após a tag </form> de fechamento .

Páginas de categorias da loja onde lista todos os produtos.

Você acha que o gancho acima funcionará da mesma maneira, caso você queira adicionar algum texto nas páginas de arquivo? Não! É completamente diferente aqui. Mas também simples.

Você gostaria de exibir o texto antes do botão Adicionar ao carrinho ou depois – em ambos os casos woocommerce_loop_add_to_cart_link deve estar OK para você.

Basta olhar para este exemplo e tudo ficará claro para você:

add_filter( 'woocommerce_loop_add_to_cart_link', 'before_after_btn', 10, 3 );
 
function before_after_btn( $add_to_cart_html, $product, $args ){
	$before = ''; // Algum texto ou HTML aqui
	$after = ''; // Adicione um pouco de texto ou HTML aqui também
 
	return $before . $add_to_cart_html . $after;
}

$product

É um produto objeto – que poderia ser WC_Product_Simple ou WC_Product_Variable ou até mesmo WC_Product_Subscription se você estiver usando WooCommerce Assinaturas plugin. Você pode obter $product->id desses objetos, por exemplo.

$args

Ele apenas contém atributos de botão, como quantidade, nomes de classes, etc.

Outros Exemplos Diversos

Esse foi exatamente o código que utilizei para fazer o resultado da imagem no inicio deste artigo, porem está sem o CSS que é o estilo e o contador regressivo, listo abaixo mais para analisarem formas de utilizar os ganchos apresentados nesse artigo.

// inserir o valor parcelado nos seus lugares devidos
function action_woocommerce_before_add_varlor_parcelado(  ) { 
    $valor_parcelado = get_post_meta( get_the_ID(), 'valor_parcelado', true ); 
	if (!empty($valor_parcelado)) { 
		echo '<p class="price">'.$valor_parcelado.'</p>';
		echo '<p class="custom_text">No Cartão de Crédito</p>';
	}
};        
add_action( 'woocommerce_before_add_to_cart_form', 'action_woocommerce_before_add_varlor_parcelado', 10, 0 );

//altera o texto do selo de vendas dos produtos
add_filter('woocommerce_sale_flash', 'woocommerce_custom_sale_text', 10, 3);
function woocommerce_custom_sale_text($text, $post, $_product)
{
    return '<span class="onsale">50% OFF</span>';
}

//incluir um texto abaixo do preço
add_action( 'woocommerce_single_product_summary', 'custom_text', 15 );
function custom_text() {
  echo '<p class="custom_text">à vista, no boleto bancário</p>';  
}

//incluir um texto antes do Titulo do produto
add_action( 'woocommerce_single_product_summary', 'custom_before_title', 4 );
function custom_before_title() {
	echo '<p class="txt_original">PRODUTO ORIGINAL VENDA EXCLUSIVA</p>';
}

//incluir o contador de estoque baixo fack
add_action( 'woocommerce_before_add_to_cart_button', 'custom_barfack_estoque' );
function custom_barfack_estoque() {
	echo '<div class="elementor-element elementor-element-62c6ebc elementor-widget elementor-widget-progress" data-id="62c6ebc" data-element_type="widget" data-widget_type="progress.default"><div class="elementor-widget-container"><span class="elementor-title">SOMENTE <span style="color:#ffb600;">1</span> UNIDADE DISPONÍVEL!</span><div class="elementor-progress-wrapper" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="1" aria-valuetext="UNIDADES"><div class="elementor-progress-bar" data-max="1" style="width: 2%;"><span class="elementor-progress-text">UNIDADES</span><span class="elementor-progress-percentage"> </span></div></div></div></div>';
}

//incluir um texto contador apos o botão de comprar
add_action( 'woocommerce_after_add_to_cart_button', 'custom_contador_tempo' );
function custom_contador_tempo() {
	echo do_shortcode( '[sales_countdown_timer id="salescountdowntimer"]' );
}

Se você tem alguma forma mais simples de fazer, dica, sugestão ou simplesmente gostou do poste, deixa seu comentário aí abaixo.


Artigos relacionados & Comentários

Deixe um comentário