Como adicionar texto antes do preço no WooCommerce » Adicionar texto antes do preço

Publicados: 2020-10-05

Adicionar texto antes do preço no WooCommerce Deseja adicionar texto antes do preço no WooCommerce? Se esta é a solução que você está procurando, mostrarei como adicionar texto antes do preço no WooCommerce de maneira rápida e fácil usando um trecho de código simples como o que compartilhei no tutorial sobre como adicionar texto após o preço no WooCommerce.

Idealmente, como mencionamos nesse tutorial, para adicionar texto ou conteúdo em uma página do WooCommerce ou em uma página do WordPress, você deve usar os ganchos de filtro do WordPress.

Ganchos WooCommerce e WordPress

Essencialmente, os ganchos de filtro são projetados para filtrar o conteúdo exibido na página WooCommerce ou WordPress como um 'filtro' comum, mas, neste caso, existem pontos específicos onde as novas modificações são adicionadas e o conteúdo retornado para exibição.

Para adicionar texto antes que o preço no WooCommerce não seja diferente, usaremos o hook de filtro no mesmo evento que usamos no tutorial anterior – como adicionar o sufixo de preço do WooCommerce .

Adicionar prefixo de preço do WooCommerce

Para ilustração, usarei a mesma configuração que usei em todos os meus tutoriais do WooCommerce – tenho Storefront o tema padrão do WooCommerce instalado no localhost. Vou adicionar o pré-texto antes do preço na parte indicada no diagrama acima.

Etapas para adicionar texto antes do preço no WooCommerce

Existem cerca de três etapas que você pode seguir para criar o código que adicionará o texto antes do preço na página do produto WooCommerce. Vamos detalhar esses passos abaixo:

  1. Faça login no seu site WooCommerce e navegue até o editor de temas e abra o arquivo functions.php onde adicionaremos o trecho de código.
  2. Crie um gancho de filtro que vincule o 'evento' de preço do WooCommerce que é ''woocommerce_get_price_html' para que o gancho de filtro possa ser add_filter( 'woocommerce_get_price_html', 'njengah_text_before_price' );
  3. Crie uma função de retorno de chamada com o texto que deseja adicionar antes do preço . A função de retorno de chamada deve passar o parâmetro $price e adicionar o novo texto antes de retornar o novo preço
  4. Salve essas alterações e verifique se o frontend funciona.

Agora, é hora de ilustrar com algum código. Vamos presumir que o texto que você deseja adicionar antes do preço é o ' Preço de varejo recomendado' , vamos abreviá-lo como RRP.

O código a seguir, quando adicionado ao arquivo functions.php do seu tema WooCommerce, deve adicionar o texto antes do preço:

 /**
 * Adicione texto antes do preço
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_before_price' );

function njengah_text_before_price($price){

    $text_to_add_before_price = ' RRP '; // altera o texto entre colchetes para o seu texto preferido 
		  
		  
	return $text_to_add_before_price . $ preço ;
		  
}

Depois de adicionar este código ao arquivo functions.php e salve as alterações. Verifique o front-end, se o texto é adicionado antes do preço como visto na imagem abaixo:

Adicionar texto antes do preço no WooCommerce

Adicionamos com sucesso o texto antes do preço na página do produto WooCommerce, conforme mostrado acima.

Mas uma dúvida comum que pode surgir é como adicionar o texto entre os dois preços já que o produto está em preço de promoção.

Podemos conseguir isso verificando se o produto está à venda e modificamos o código da seguinte forma:

 /**
 * Adicione texto antes do preço de venda
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_onsale_price', 100, 2 );

function njengah_text_onsale_price( $ preço, $ produto ) {
  
  if ( $product->is_on_sale() ) {
    
	  $text_to_add_before_price = str_replace( '<ins>', '<ins><br>RRP ', $price);
	  
			return $text_to_add_before_price ;
    
	    }senão{
     
	 retornar $ preço;
  
   }
  
}

Após adicionar este código, você deverá ver o texto exibido antes do preço de venda conforme mostrado na imagem abaixo:

Adicionar texto antes do preço no WooCommerce

Por fim, podemos combinar o filtro que adicionamos no tutorial anterior – como adicionar texto antes do preço no WooCommerce e esse filtro que criamos para que tenhamos uma solução completa para adicionar texto antes e depois do preço do WooCommerce.

O código completo para adicionar o texto antes e depois do preço na página do produto WooCommerce deve ser o seguinte:

 /**
 * Adicione texto antes e depois do preço
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_before_and_after_price', 100, 2 );

function njengah_text_before_and_after_price( $price) {
  
    $text_to_add_before_price = ' RRP '; //altera o texto entre aspas para o seu texto preferido 
    
       $text_to_add_after_price = ' para um par de freios '; //altera o texto entre aspas para o seu texto preferido
	  
    return $text_to_add_before_price . $ preço . $text_to_add_after_price ;
  
  
}

Como você pode ver, precisamos apenas de um gancho de filtro, mas combinamos as variáveis ​​no retorno da função de retorno de chamada para gerar o texto antes e depois do preço.

Conclusão

Neste tutorial WooCommerce, descrevemos como você pode adicionar texto antes do preço na página do produto e também demonstramos que você pode combinar o filtro anterior para adicionar texto antes e depois do preço no produto WooCommerce.

Este código deve ser colocado no arquivo functions.php do tema filho e atualizado para que as alterações sejam efetivas. Se você precisar de mais personalização neste snippet de código, sinta-se à vontade para entrar em contato.

Artigos semelhantes

  1. Como obter o ID da postagem pelo Slug no WordPress com um exemplo prático
  2. Como usar os atributos do produto WooCommerce passo a passo [Guia Completo]
  3. Como adicionar uma barra lateral ao WordPress » Guia passo a passo definitivo
  4. Como criar uma área de widget personalizada no WordPress passo a passo
  5. Como definir produtos em destaque no WooCommerce
  6. Como alterar o guia do WooCommerce para adicionar ao carrinho de texto com exemplos
  7. Como alterar o aviso 'Adicionado ao carrinho' do WooCommerce
  8. Como substituir preço por chamada de texto por preço no WooCommerce
  9. Como redirecionar na atualização da página do WordPress » Detectar a atualização da página PHP
  10. Como remover a barra lateral da página do produto em temas WooCommerce
  11. Como adicionar produtos Woocommerce a partir do frontend
  12. Como adicionar descrição após o preço no WooCommerce
  13. Como redirecionar o usuário se não estiver logado no WordPress » Redirecionamento de página
  14. Como adicionar texto após o preço no WooCommerce » Adicionar sufixo de preço
  15. Como remover foi adicionado ao seu carrinho Mensagem WooCommerce
  16. Como ocultar o botão Adicionar ao carrinho no WooCommerce
  17. Como definir uma imagem em destaque no WordPress Gutenberg & Classic Editor
  18. Como alterar o texto fora do estoque no WooCommerce
  19. Como inserir conteúdo padrão no editor de postagem do WordPress dinamicamente
  20. Como adicionar produto após a configuração da vitrine [Guia para iniciantes]