Como substituir a tag “em oferta” (“sale” em inglês) por porcentagem do desconto no woocommerce

Neste post vou mostrar para você como eu fiz para mudar aquela etiqueta do produto, no woocommerce, que exibe o texto sale (oferta) pelo valor do desconto (porcentagem do preco total)

substituir a tag sala por porcentagem
Não quebre a cabeça tentando criar seu site sozinho. Criamos para você!
Não quebre a cabeça tentando criar seu site sozinho

Eu vou apresentar para você algumas formas de mostrar o preço com desconto para seu cliente.

Uma delas é exibindo somente o total do desconto em reais, outra forma é como exibir o valor juntamente com a porcentagem e outra que eu acho que é talvez a mais interessante é mostrar somente o valor da porcentagem no lugar da palavra “em oferta” (“sale” em inglês).

Por padrão toda loja em woocommerce exibe uma tarja chamada “em oferta” ou “on sale” quando, ao cadastrar um produto você inserir um preço promocional.

A aparência dessa área pode variar de acordo com o tema que você escolheu para criar seu site profissional wordpress que você estiver usando.

Na maioria das lojas virtuais que desenvolvo eu prefiro utilizar o tema astra e a aparência dele é a seguinte:

Imagem mostrando o texto "Sale"

Recentemente eu precisei substituir o texto “em oferta” (“sale” em inglês) pela porcentagem do desconto.

Eu nem precisei ir muito longe para descobrir que isso é muito simples de ser alterado. Só precisamos colocar o código no arquivo functions.php.

Código para substituir “em oferta” pelo desconto em porcentagem

/** mostrar desconto em vez do texto oferta**/
add_filter( 'woocommerce_sale_flash', 'add_percentage_to_sale_badge', 20, 3 );
function add_percentage_to_sale_badge( $html, $post, $product ) {
    if( $product->is_type('variable')){
        $percentages = array();

        // Get all variation prices
        $prices = $product->get_variation_prices();

        // Loop through variation prices
        foreach( $prices['price'] as $key => $price ){
            // Only on sale variations
            if( $prices['regular_price'][$key] !== $price ){
                // Calculate and set in the array the percentage for each variation on sale
                $percentages[] = round(100 - ($prices['sale_price'][$key] / $prices['regular_price'][$key] * 100));
            }
        }
        $percentage = max($percentages) . '%';
    } else {
        $regular_price = (float) $product->get_regular_price();
        $sale_price    = (float) $product->get_sale_price();

        $percentage    = round(100 - ($sale_price / $regular_price * 100)) . '%';
    }
    return '<span class="onsale">' . esc_html__( '-', 'woocommerce' ) . ' ' . $percentage . '</span>';
}

No meu site após colar esse código ficou assim:

Mostrar o preço economizado mantendo o texto “em oferta”

Outra forma de você mostrar o desconto é exibir o preço do desconto abaixo do titulo do produto.

Para o resultado acima eu utilizei o seguinte código:

add_filter( 'woocommerce_get_price_html', 'change_displayed_sale_price_html', 10, 2 );
function change_displayed_sale_price_html( $price, $product ) {
    // Only on sale products on frontend and excluding min/max price on variable products
    if( $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){
        // Get product prices
        $regular_price = (float) $product->get_regular_price(); // Regular price
        $sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale)

        // "Saving price" calculation and formatting
        $saving_price = wc_price( $regular_price - $sale_price );

        // Append to the formated html price
        $price .= sprintf( __('<p class="saved-sale">- %s</p>', 'woocommerce' ), $saving_price );
    }
    return $price;
}

Editando o arquivo functions.php pelo próprio painel wordpress

Tudo isso você faz somente editando o arquivo functions.php.

Se você não tem muito conhecimento e não faz ideia de onde encontrar este arquivo siga minhas instruões abaixo.

Se mesmo assim você não conseguir talvez você não tenha permissões de administrador para acessar o arquivo e deve tentar editar via ftp ou pelo cpanel (em casos de hospedagens com cpanel, claro)

Precisamos acessar o arquivo functions.php para colar o código lá dentro.

Na grande maioria das instalações você vai conseguir acessar o arquivo functions diretamente pelo painel. Para isso basta ir em APARÊNCIA >> EDITOR DE TEMAS.

Se, por acaso, você não conseguir visualizar essa opção de editor de temas talvez você não tenha permissões de administrador no wordpress.

Nesse caso veja quem tem essas permissões para então editar o tema.

Agora ao lado direito você encontra o arquivo chamado functions.php. Basta clicar nele e você verá a área de edição do arquivo ao centro.

Feito isso você deve ir até o final do arquivo e colar o código que irá substituir o “em oferta” pelo desconto em porcentagem.

Agora é só clicar em ATUALIZAR ARQUIVO ou algo assim.

Caso você não encontre o botão chamado ATUALIZAR ARQUIVO tente a forma seguinte de atualizar o arquivo functions.

Editando o arquivo functions pelo cpanel

Outra forma de editar o arquivo functions.php é pelo cpanel (isso se sua hospedagem tiver um cpanel). Caso contrário você precisará atualizar o arquivo baixando via ftp, editando e subindo novamente o arquivo.

Caso sua instalação do WordPress esteja na raiz do servidor você deve ir em gerenciador de arquivos >> public_html >>wp-content >> themes >>[pasta do seu tema]. Feito isso você encontrará o arquivo functions.php listado.

Agora é só editar o arquivo functions.php e atualizar.

Sobre o autor

4 comentários em “Como substituir a tag “em oferta” (“sale” em inglês) por porcentagem do desconto no woocommerce”

    1. Oi Marie, qual tema você está usando? Alguns temas, como o astra, já tem essa opção de forma nativa, e isso pode causar algum problema no funcionamento desse script

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

89 + = 93

Rolar para cima