Como formatar os preços do WooCommerce

Por motivos de design, apresentação ou para ser consistente com o tema da loja ou marca, muitas vezes podemos querer exibir nossos preços em diferentes formatos. Neste post, você aprenderá como formatar os preços do WooCommerce usando a opção Configurações e o Editor de Código.

O post aborda os três pontos a seguir:

1. Substituindo Separadores Decimais
2. Substituição de mil separadores
3. Formatação Preços para aplicar estilos como negrito, itálico ou sublinhado

1. Substituindo Separadores Decimais:

Muitas vezes, você pode ter valores decimais nos preços de seus produtos. Isso é bastante comum no caso de uma mercearia online onde os preços são determinados pelo peso dos vegetais:

Em muitos países, o separador decimal é representado por um ponto (.). No entanto, isso não é verdade para muitos outros países, como Espanha, África do Sul, Brasil, Suécia, China e outros 70 países onde o separador decimal é uma vírgula.

Países como o Brasil usam o ponto (.) para, às vezes, separar milhares. Por exemplo, doze mil e quinhentos são escritos não como “12.500”, mas como “12.500” ou mesmo “12.500”.

Os preços, portanto, precisam ser exibidos de forma diferente ao projetar uma loja para um determinado público ou nacionalidade. Veremos como podemos substituir pontos decimais por vírgulas ou espaços no WooCommerce.

Existem duas maneiras de fazer isso diretamente pelas configurações do WooCommerce ou pelo editor de código.
Alterando o separador decimal através das configurações do WooCommerce
Passe o mouse sobre o rótulo WooCommerce no painel do WordPress e clique em Configurações. Em WooCommerce->Configurações, a guia Geral mostra o seguinte conforme você rola para baixo:

Aqui, você pode alterar o valor de “Separador Decimal” de “.” para ","

Fazendo isso e clicando em “Salvar alterações” exibirá o ponto decimal como uma vírgula:

Desta forma, você pode usar qualquer separador de sua escolha.
Alterando o Separador Decimal através do editor de código
Embora o WooCommerce forneça uma maneira direta de alterar o separador decimal, é útil aprender a fazer isso via código. Neste exemplo, demonstraremos como substituir o ponto decimal por um espaço usando o editor de código.

Há um pequeno trecho de código que você pode inserir no arquivo functions.php do seu tema filho para fazer exatamente isso. (Para saber porque editamos o functions.php do tema filho e não diretamente o arquivo functions.php, leia este post.)

Fragmento de código:

 add_filter( 'wc_price', 'woo_hide_decimal_point', 10, 4 );
function woo_hide_decimal_point( $retorno, $preço, $args, $unformatted_price ) {
$unidade = intval( $preço);
$decimal = sprintf('%02d', ($preço-$unidade) * 100);
return sprintf( '%s %d %s', get_woocommerce_currency_symbol(), $unit, $decimal );
}

E o resultado é que o ponto decimal é removido e substituído por um espaço:

Nota: O código funcionará somente depois que você definir o separador decimal como “.” em WooCommerce->Configurações.

Você pode substituir o espaço por uma vírgula de maneira semelhante, alterando um pouco o código.

 add_filter( 'wc_price', 'woo_replace_decimal_point', 10, 4 );
function woo_replace_decimal_point( $retorno, $preço, $args, $unformatted_price ) {
$unidade = intval( $preço);
$decimal = sprintf('%02d', ($preço-$unidade) * 100);
return sprintf( '%s %d,%s', get_woocommerce_currency_symbol(), $unit, $decimal);
} 

Por que é melhor usar trechos de código no WooCommerce->Configurações para substituir o separador decimal:

Usar o editor de código em oposição ao WooCommerce->Configurações para substituir os pontos decimais tem muitas vantagens.

Uma é que você pode formatar o preço da maneira que quiser. Se você notar na imagem acima, o preço tem um espaço após o símbolo da moeda. Este espaço está faltando na primeira captura de tela deste post onde o ponto decimal foi substituído por WooCommerce->Configurações.

Outra vantagem é para quando você deseja que essas alterações sejam feitas apenas para um produto específico e não para todos os produtos da sua loja. O uso do editor de código oferece essa flexibilidade.

Ao usar snippets de código, você também pode exibir a parte decimal do preço em diferentes estilos inserindo tags HTML como <b>,<u>,<i>,<sup>,<sub> e muito mais.

Exemplo: Adicionar um sublinhado à parte decimal do preço.

 add_filter( 'wc_price', 'woo_format_decimal_value', 10, 4 ); 
function woo_format_decimal_value( $retorno, $preço, $args, $unformatted_price) { 
$unidade = intval( $preço); 
$decimal = sprintf('%02d', ($preço-$unidade) * 100); 
return sprintf( '%s %d.<u>%s</u>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

O trecho de código acima, quando inserido no arquivo functions.php do tema filho, adiciona um sublinhado à parte decimal do preço:

Você pode usar outras tags HTML da mesma maneira. Se você quiser saber como exibir o valor decimal como sobrescrito ou subscrito, leia este post.

2. Substituição de mil separadores:

Assim como os separadores decimais são exibidos de forma diferente em alguns países, o mesmo acontece com os separadores de milhar.

Por exemplo, em países como Brasil, África do Sul ou Espanha, os separadores de milhar são indicados por um espaço ou um ponto/ponto. Nesses países, treze mil e quinhentos poderiam ser escritos como 13.500 ou 13.500

Ao projetar sua loja para esse público, você deve garantir que edite o separador de milhar adequadamente.

Assim como os separadores decimais, existem duas maneiras de fazer isso, seja por meio do WooCommerce->Configurações ou pelo editor de código.
Alterando o separador de milhar através das configurações do WooCommerce
Passe o mouse sobre o rótulo WooCommerce no painel do WordPress e clique em Configurações. Em WooCommerce->Configurações, a guia Geral mostra o seguinte conforme você rola para baixo:

Alterar o valor na caixa de texto Separador de milhar para um espaço no lugar de uma vírgula (“,”), mudará a forma como o separador de milhar é exibido. Observe que você deve inserir um espaço nesta caixa. Simplesmente apagar a vírgula não resultará na mudança do separador de milhar para um espaço.

Clique em “Salvar alterações” e visualize o produto:

Você pode ver que agora há um espaço no lugar do separador de milhar.

Para evitar qualquer confusão, você pode definir as casas decimais como “0” em WooCommerce->Configurações para preços em que não há valor decimal:

Após inserir o número de casas decimais aqui como “0”, clique em “Salvar alterações” e visualize o produto novamente:

Alterando o separador de mil através do editor de código

Da mesma forma, podemos alterar o separador de milhar usando trechos de código. Como mencionado acima na seção do separador decimal, usar o editor de código sempre tem mais vantagens, pois podemos personalizar ou estilizar o preço da maneira que quisermos, e até mesmo para um produto específico, se não para toda a loja.

Vamos agora tentar mudar o separador de milhar para um ponto (.) usando um trecho de código.

Nota: Um pré-requisito para isso é que você deve deixar a caixa separadora de milhar em branco em WooCommerce->Configurações. Sem espaços também.

 add_filter( 'wc_price', 'woo_format_thousand_separator', 10, 4 ); 
function woo_format_thousand_separator( $retorno, $preço, $args, $unformatted_price) 
{ 
  $formatted_price=number_format($price,0,' ','.'); 
  return sprintf( '%s %s', get_woocommerce_currency_symbol(), $formatted_price); 
}

A função number_format é uma função PHP embutida que aceita 4 argumentos:

1. O número ou no nosso caso, o preço.
2. Número de casas decimais. Definimos como 0, pois não desejamos exibir nenhum valor decimal.
3. O separador decimal que você deseja usar. Definimos isso como um valor em branco.
4. O separador de milhar. Definimos isso como um ponto (.).

Este trecho de código, quando adicionado ao arquivo functions.php do seu tema filho, exibirá o separador de milhar como um ponto ou ponto (.), conforme ilustrado na captura de tela abaixo:

3. Formatando os preços do WooCommerce:

Agora que você já sabe como formatar valores decimais e separadores de milhar, o mesmo se aplica aos preços em geral. Embora você não possa formatar diretamente esses valores usando a opção Configurações, você pode fazer isso usando o Editor de código fazendo pequenas modificações no código acima.

Exemplo: Escrever o preço do produto em itálico.

Em circunstâncias padrão, o preço do produto é exibido da seguinte forma:

E se você quiser adicionar um estilo a isso, por exemplo, escreva em itálico?

Você pode conseguir isso fazendo pequenas modificações nos trechos de código acima.

Basta copiar este código para o arquivo functions.php do seu tema filho:

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $retorno, $preço, $args, $unformatted_price ) { 
$unidade = intval( $preço); 
$decimal = sprintf('%02d', ($preço-$unidade) * 100); 
return sprintf( '<i>%s %d.%s</i>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

Fazer isso exibirá o preço, junto com o ponto decimal, em itálico:

Uma pequena alteração no snippet de código também impedirá a exibição da parte decimal:

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $retorno, $preço, $args, $unformatted_price ) { 
$unidade = intval( $preço); 
return sprintf( '<i>%s %d</i>', get_woocommerce_currency_symbol(), $unit); 
}

Como você pode ver, você pode ver o preço em itálico aqui, sem a parte decimal:

Estudar o snippet permitirá que você formate facilmente os preços do WooCommerce do seu jeito.