A página de loja padrão do WooCommerce mostra um único botão por produto: «Add to Cart». Para a maioria das lojas, isto é suficiente. Mas se vende produtos que exigem pesquisa antes da compra, um único botão «Add to Cart» fica aquém. Os compradores querem abrir primeiro a página do produto, ler a descrição, verificar as especificações e só depois adicionar ao carrinho a partir daí.

O problema é que o WooCommerce não oferece nenhuma definição nativa para «adicionar um botão Read More ao lado de Add to Cart». Os plugins para esta tarefa ou são sobrecarregados com funcionalidades desnecessárias ou entram em conflito com o seu tema. Resta o caminho comprovado: código personalizado no functions.php.

Abaixo encontra um guia passo a passo. Terá dois botões na página de loja: «Read More» (liga para a página do produto) e «Add to Cart» (funciona como habitualmente). Também abordaremos o caso particular dos produtos esgotados.

💡 Visão geral rápida:

• Remover o botão «Add to Cart» predefinido via remove_action
• Adicionar um botão «Read More» personalizado com ligação para a página do produto
• Repor o botão «Add to Cart» numa nova posição ao lado de «Read More»
• Corrigir botões duplicados para produtos esgotados com jQuery
• O código vai para o functions.php do tema filho, seguro e sem plugins

Como o WooCommerce renderiza os botões na página de loja

O WooCommerce gera o botão «Add to Cart» através do hook woocommerce_after_shop_loop_item. Este hook é executado em cada cartão de produto dentro do ciclo WP_Query na página de loja. A função responsável por adicionar o botão é woocommerce_template_loop_add_to_cart com prioridade 10.

O hook está ligado a uma ação. Para alterar o conjunto de botões, trabalhamos diretamente com ele: removemos o handler predefinido e adicionamos o nosso. Não são necessárias edições aos templates do WooCommerce e o tema permanece atualizável.

Passo 1: remover o botão «Add to Cart» predefinido

O primeiro passo é desligar a função woocommerce_template_loop_add_to_cart. Coloque este código no functions.php do seu tema filho ou através do plugin Code Snippets:

1
/* Remove the standard Add to cart button */
2
function remove_loop_button() {
3
    remove_action(
4
        'woocommerce_after_shop_loop_item',
5
        'woocommerce_template_loop_add_to_cart',
6
        10
7
    );
8
}
9
add_action( 'init', 'remove_loop_button' );

Envolvemos remove_action numa função e ligamo-la ao hook init. Não pode chamar remove_action diretamente no functions.php porque o WooCommerce pode ainda não ter inicializado os seus hooks quando o tema carrega. O hook init garante que todas as ações já estão registadas.

Após inserir este código, a página de loja perderá o botão «Add to Cart». Não se preocupe: no próximo passo, vamos recuperá-lo, agora emparelhado com «Read More».

Passo 2: adicionar um botão «Read More» personalizado

O botão «Read More» é uma ligação para a página do produto, com o estilo de um botão padrão do WooCommerce. Usamos $product->get_permalink() para obter o URL e do_shortcode para o wrapper:

1
/* Add a More details button */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart'
5
);
6
function replace_add_to_cart() {
7
    global $product;
8
    $link = $product->get_permalink();
9
    echo do_shortcode(
10
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Read More</a>'
11
    );
12
}

A função liga-se à mesma ação woocommerce_after_shop_loop_item com a prioridade predefinida de 10. Obtém o objeto $product via global, obtém o URL da página do produto e gera uma ligação com a classe button. O WooCommerce herda automaticamente os estilos de botão do tema ativo.

Repare na chamada esc_url(): escapar o URL é obrigatório por questões de segurança. Pode substituir a classe addtocartbutton pela sua própria se quiser estilos personalizados.

Passo 3: repor o botão «Add to Cart» ao lado

O botão «Add to Cart» continua a ser necessário na página de loja; sem ele, os compradores não podem adicionar produtos diretamente ao carrinho. Mas agora deve aparecer DEPOIS do botão «Read More». Para isso, registamos o handler nativo com prioridade 20 (depois do nosso botão com prioridade 10):

1
/* Restore the Add to cart button */
2
add_action( 'after_setup_theme', 'lets_add_cart_button' );
3
function lets_add_cart_button() {
4
    add_action(
5
        'woocommerce_after_shop_loop_item',
6
        'woocommerce_template_loop_add_to_cart',
7
        20
8
    );
9
}

Envolvemos add_action no hook after_setup_theme pela mesma razão da remoção: o WooCommerce pode ainda não estar carregado quando o functions.php é executado. A prioridade 20 coloca «Add to Cart» estritamente depois de «Read More» (prioridade 10).

Resultado: por baixo de cada produto na página de loja, tem agora dois botões. Primeiro «Read More», depois «Add to Cart».

O vídeo demonstra uma abordagem alternativa que adiciona botões personalizados a produtos individuais e a toda a página de loja. O princípio de trabalhar com hooks é o mesmo que abordámos acima.

O que corre mal com produtos esgotados

O código acima funciona perfeitamente para produtos que estão em stock. Mas para artigos esgotados, surge um conflito: o WooCommerce substitui automaticamente o botão «Add to Cart» por «Read More» para esses produtos. O resultado são DOIS botões «Read More» seguidos: o nosso personalizado e a substituição do WooCommerce.

O problema não está na lógica do nosso código; é assim que o núcleo do WooCommerce foi concebido. A função padrão woocommerce_template_loop_add_to_cart renderiza uma ligação «Read More» em vez do botão «Add to Cart» para itens esgotados. O nosso botão «Read More» personalizado permanece, pelo que obtemos uma duplicação.

Passo 4: remover o botão extra com jQuery

A forma mais direta de remover o botão duplicado é com jQuery. O script encontra a ligação que contém o texto «Read More» que está dentro do contentor span padrão do WooCommerce e remove-a:

1
/* Remove the duplicate More details button for out-of-stock items */
2
jQuery( document ).ready( function( $ ) {
3
    $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Read More")' ).remove();
4
 
5
    $( 'button.button.woof_reset_search_form' ).on( 'click', function() {
6
        $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Read More")' ).remove();
7
    });
8
});

O script faz duas coisas. Primeiro, ao carregar a página, remove todas as ligações com a classe product_type_simple que contenham o texto «Read More». Segundo, anexa um handler ao botão de reset de filtros do WooCommerce (woof_reset_search_form) porque, após a filtragem AJAX, o DOM é atualizado e as duplicações reaparecem.

Coloque o código jQuery num ficheiro .js separado e faça o enqueue via wp_enqueue_script no functions.php, ou cole-o no campo «Custom JavaScript» do seu tema ou de um plugin como o Simple Custom CSS and JS.

Abordagem alternativa: um filtro em vez de remoção

Se preferir evitar jQuery, existe um método mais elegante: o filtro woocommerce_product_is_in_stock. Ele verifica a disponibilidade do produto antes de gerar o botão personalizado:

1
/* Do not show the More details button for unavailable items */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart_conditional',
5
    10
6
);
7
function replace_add_to_cart_conditional() {
8
    global $product;
9
 
10
    if ( ! $product->is_in_stock() ) {
11
        return;
12
    }
13
 
14
    $link = $product->get_permalink();
15
    echo do_shortcode(
16
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Read More</a>'
17
    );
18
}

O método $product->is_in_stock() devolve false para produtos esgotados, pelo que o nosso botão simplesmente não é renderizado. O WooCommerce mostra o seu próprio «Read More» para esses produtos. Para itens em stock, ambos os botões funcionam como pretendido. Esta abordagem é mais limpa: sem JS, menos conflitos de filtros.

A variante a escolher depende da sua loja. jQuery é mais universal (funciona com quaisquer plugins de filtragem), enquanto o filtro PHP é mais leve e rápido.

⁉️🤔 Perguntas frequentes

O código não funciona e os botões não aparecem. O que está errado?

Primeiro, certifique-se de que o código está no functions.php do tema FILHO, não do tema pai (o pai é sobrescrito nas atualizações). Segundo, verifique se o WooCommerce está ativo e atualizado para a versão mais recente. Terceiro, verifique se o seu tema substitui o hook woocommerce_after_shop_loop_item. Alguns temas substituem completamente o template do cartão de produto e os hooks do WooCommerce não são executados nele.

Posso alterar o texto do botão «Read More» para outra coisa?

Sim. Na função replace_add_to_cart(), substitua a string 'Read More' nos atributos da tag <a> pelo texto que precisar, por exemplo «Ver», «Selecionar» ou «Descrição». O texto é estático e não afeta a funcionalidade.

Porque é que o seletor jQuery usa product_type_simple?

Porque o WooCommerce atribui classes diferentes aos botões consoante o tipo de produto: product_type_simple para produtos simples, product_type_variable para variáveis. Se a sua loja tiver produtos variáveis esgotados, adicione um segundo seletor para product_type_variable ou use um mais geral como a.button.ajax_add_to_cart.

É seguro inserir código PHP no functions.php?

É seguro sob duas condições. Primeiro, faça uma cópia de segurança do seu functions.php antes de editar (ou use um tema filho para que o original permaneça intacto). Segundo, insira o código via FTP/SFTP ou através do «Aparência → Editor de Tema» do admin, em vez de usar plugins de snippets com carregamento automático. Se ocorrer um erro de sintaxe, o WordPress mostrará um ecrã branco e restaurar o ficheiro é mais fácil via FTP.

Os botões não se parecem com os botões nativos do meu tema. Como os estilizo?

A classe button na tag <a> fornece os estilos básicos do WooCommerce. Se o botão ainda parecer diferente, o seu tema provavelmente substitui os seletores de botão de forma mais específica (por exemplo, .products .button em vez de apenas .button). Copie as classes CSS do botão «Add to Cart» nativo usando o inspetor do seu navegador e adicione-as ao atributo class da sua ligação personalizada.

O que usar em 2026: código ou um plugin?

A escolha entre código personalizado e um plugin depende de três fatores. Se está a ajustar um único botão na página de loja e quer evitar o inchaço de plugins, o código deste artigo é suficiente. Não adiciona peso no admin, não cria consultas extra à base de dados e não se quebra com atualizações do WooCommerce (os hooks woocommerce_after_shop_loop_item e woocommerce_template_loop_add_to_cart estão estáveis desde a versão 3.0).

No entanto, se precisar de alterar o comportamento dos botões em páginas diferentes ou para categorias de produtos diferentes, vale a pena considerar plugins: o YITH WooCommerce Customize My Account Page oferece um editor visual de botões e o WooCommerce Product Add-Ons permite adicionar campos personalizados antes da compra.

Comece com código. É gratuito, transparente e totalmente sob o seu controlo. Se mais tarde precisar de mais, passe para plugins, agora com uma compreensão clara de exatamente quais as funcionalidades de que precisa.