Criando um Script no WooCommerce para Ocultar o Botão de Compra em Produtos Sem Estoque

No dinâmico mundo do comércio eletrônico, a experiência do usuário é um fator crucial para o sucesso de qualquer loja virtual. Uma das frustrações que os clientes podem enfrentar é encontrar um produto desejado, mas descobrir que ele está fora de estoque somente ao tentar adicioná-lo ao carrinho. Para otimizar a jornada de compra e evitar essa decepção, uma prática recomendada é ocultar o botão de compra e exibir uma mensagem clara de “Produto fora de estoque” assim que o estoque de um item atinge zero.

Este artigo tem como objetivo fornecer um script prático e de fácil implementação para lojas WooCommerce que desejam adotar essa melhoria na experiência do usuário. O código apresentado, quando adicionado corretamente ao seu tema filho, fará com que o botão “Adicionar ao carrinho” desapareça e uma mensagem informativa seja exibida sempre que um produto não tiver unidades disponíveis em estoque. Vamos ao código!

O Script Personalizado para WooCommerce

A seguir, apresentamos o código PHP que você pode utilizar para alcançar o resultado desejado. Explicaremos cada parte para garantir que você entenda como ele funciona.

---

Você pode copiar e colar o seguinte bloco de código no arquivo functions.php do seu tema filho:

<?php
/**
 * Remove o botão "Adicionar ao Carrinho" e exibe uma mensagem
 * quando o produto está fora de estoque no WooCommerce.
 */
add_action( 'woocommerce_after_shop_loop_item', 'custom_out_of_stock_message', 10 );
add_action( 'woocommerce_single_product_summary', 'custom_out_of_stock_message', 30 );

function custom_out_of_stock_message() {
    global $product;

    if ( ! $product->is_in_stock() ) {
        // Remove o botão "Adicionar ao carrinho"
        remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

        // Exibe a mensagem de produto fora de estoque
        echo '<p class="out-of-stock-message">Produto fora de estoque</p>';
    }
}

/**
 * Adiciona um estilo básico para a mensagem de fora de estoque.
 */
add_action( 'wp_head', 'custom_out_of_stock_style' );

function custom_out_of_stock_style() {
    ?>
    <style>
        .out-of-stock-message {
            color: #D32F2F; /* Vermelho mais escuro para destaque */
            font-weight: bold;
            text-align: center;
            padding: 10px;
            border: 1px solid #EF9A9A; /* Borda mais clara */
            background-color: #FFCDD2; /* Fundo levemente avermelhado */
            margin-top: 15px;
            font-size: 1.1em;
            border-radius: 5px;
        }
    </style>
    <?php
}
?>

---

Entendendo o Código

• add_action( 'woocommerce_after_shop_loop_item', 'custom_out_of_stock_message', 10 );: Esta linha de código Hook a função custom_out_of_stock_message na ação woocommerce_after_shop_loop_item. Essa ação é disparada após a exibição de cada item na página de listagem de produtos (como a página da loja ou categorias).
• add_action( 'woocommerce_single_product_summary', 'custom_out_of_stock_message', 30 );: Similar à linha anterior, esta Hook a mesma função na ação woocommerce_single_product_summary. Esta ação ocorre dentro da página de detalhes de um único produto, após o resumo do produto.
• function custom_out_of_stock_message() { ... }: Esta é a função principal que contém a lógica para verificar o estoque e exibir a mensagem.
  • global $product;: Torna a variável global $product disponível dentro da função, permitindo acessar os dados do produto atual.
  • if ( ! $product->is_in_stock() ) { ... }: Esta condição verifica se o produto atual não está em estoque. A função $product->is_in_stock() retorna true se o estoque for maior que zero e false caso contrário.
  • remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );: Remove a função padrão do WooCommerce que adiciona o botão “Adicionar ao carrinho” nas páginas de listagem de produtos.
  • remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );: Remove a função padrão que adiciona o botão “Adicionar ao carrinho” na página de detalhes do produto.
  • echo '<p class="out-of-stock-message">Produto fora de estoque</p>';: Exibe uma mensagem HTML informando que o produto está fora de estoque. A mensagem é envolvida em uma tag <p> com a classe out-of-stock-message para facilitar a estilização via CSS.
• add_action( 'wp_head', 'custom_out_of_stock_style' );: Hook a função custom_out_of_stock_style na ação wp_head. Essa ação permite adicionar código ao <head> do seu site.
• function custom_out_of_stock_style() { ... }: Esta função adiciona um estilo CSS básico para a mensagem de “Produto fora de estoque”, tornando-a mais visível e formatada. Você pode personalizar completamente este CSS para se adequar ao design da sua loja.

Como Implementar o Script

Para implementar este script em sua loja WooCommerce, siga os passos abaixo:

1. Crie ou acesse o tema filho: É fundamental adicionar qualquer personalização de código em um tema filho. Isso garante que suas alterações não sejam perdidas quando o tema principal for atualizado. Se você ainda não tem um tema filho, pode criar um facilmente. Existem diversos tutoriais online que ensinam como fazer isso.
2. Abra o arquivo functions.php do tema filho: Localize o arquivo functions.php dentro da pasta do seu tema filho (geralmente em wp-content/themes/nome-do-seu-tema-filho/).
3. Cole o código: Copie o código PHP fornecido acima e cole-o no final do arquivo functions.php. Certifique-se de colar antes da tag de fechamento ?> se ela existir. Caso contrário, pode colar no final do arquivo.
4. Salve as alterações: Salve as modificações feitas no arquivo functions.php.

Após salvar, o script estará ativo em sua loja. Visite as páginas de seus produtos e verifique o comportamento dos itens com estoque zerado. O botão de compra deverá ter desaparecido, e a mensagem “Produto fora de estoque” deverá ser exibida em seu lugar.

Conclusão

Implementar essa pequena modificação pode melhorar significativamente a experiência de compra em sua loja WooCommerce. Ao informar claramente aos clientes quando um produto está fora de estoque e removendo o botão de compra, você evita frustrações e otimiza a navegação em seu site. Lembre-se sempre de utilizar um tema filho para suas personalizações e de testar as alterações em um ambiente de desenvolvimento antes de aplicar em sua loja ao vivo.

Esperamos que este artigo e o código fornecido sejam úteis para aprimorar sua loja virtual! Se tiver alguma dúvida ou precisar de ajuda adicional, não hesite em perguntar.