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

Última atualização em 16 de setembro de 2020 às 18:04 por Equipe editorial

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 wordpress que você estiver usando. Na maioria das lojas virtuais que desenvolvo eu prefiro utilizar o teema 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.

Deixe um comentário

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

Rolar para cima