Um visitante entra na loja, consulta cinco produtos, fecha o separador e, um minuto depois, esquece-se do site. Esta é uma imagem familiar para qualquer proprietário de WooCommerce. Um bloco de «vistos recentemente» resolve este problema: um clique num cartão familiar traz o visitante de volta ao funil.

O WooCommerce de origem grava os IDs dos produtos visualizados no cookie woocommerce_recently_viewed. Estes dados já estão no servidor da sua loja, sem necessidade de um plugin de rastreamento separado. Resta apenas ler o cookie e mostrar os produtos. Abaixo está um shortcode pronto a usar que faz isto em 30 linhas de PHP moderno.

💡 Visão geral rápida:

• Compreenda como o WooCommerce armazena as visualizações num cookie, um breve parágrafo de teoria
• Copie o shortcode [recently_viewed_products] para o functions.php de um tema filho ou para o Code Snippets
• Coloque o bloco na página do carrinho, na barra lateral do produto ou após uma pesquisa vazia, e faça os visitantes regressarem

Como o WooCommerce armazena o histórico de visualizações

Quando um visitante abre a página de um produto, o WooCommerce anexa silenciosamente o ID desse produto ao cookie woocommerce_recently_viewed. Formato: uma string com o separador |, por exemplo 123|456|789. A entrada mais antiga está à esquerda, a mais recente à direita. O cookie é baseado na sessão: vive até o navegador ser fechado.

Não precisamos de escrever o nosso próprio rastreamento de visualizações. O WooCommerce já recolhe os dados. A tarefa do shortcode: ler a string, dividi-la em IDs, filtrar apenas produtos existentes e publicados, e passá-los ao mecanismo nativo [products].

Esta abordagem fornece a marcação nativa do WooCommerce: grelha responsiva, gestão de stock e preço, botão «Adicionar ao Carrinho», tudo o que o shortcode padrão [products] pode fazer, sem reimplementar o modelo de exibição.

Código pronto a usar: shortcode [recently_viewed_products]

Adicione este código ao functions.php de um tema filho ou através do plugin Code Snippets. Regista o shortcode [recently_viewed_products] com dois parâmetros: per_page e columns.

1
/**
2
 * Shortcode: [recently_viewed_products per_page="5" columns="4"]
3
 *
4
 * Displays products recently viewed via the native WooCommerce cookie.
5
 * Uses the built-in [products] shortcode for rendering — no custom WP_Query.
6
 */
7
add_shortcode( 'recently_viewed_products', 'sd_recently_viewed_products' );
8
 
9
function sd_recently_viewed_products( $atts ) {
10
    $atts = shortcode_atts( array(
11
        'per_page' => 5,
12
        'columns'  => 4,
13
    ), $atts );
14
 
15
    // Read the WooCommerce cookie
16
    $cookie = ! empty( $_COOKIE['woocommerce_recently_viewed'] )
17
        ? wp_unslash( $_COOKIE['woocommerce_recently_viewed'] )
18
        : '';
19
 
20
    if ( empty( $cookie ) ) {
21
        return '<p>' . esc_html__( 'You have not viewed any products yet.', 'textdomain' ) . '</p>';
22
    }
23
 
24
    // Parse and sanitize product IDs
25
    $viewed_ids = array_filter( array_map( 'absint', explode( '|', $cookie ) ) );
26
 
27
    if ( empty( $viewed_ids ) ) {
28
        return '';
29
    }
30
 
31
    // Keep only the N most recent items (oldest first in cookie, so slice from start)
32
    $viewed_ids = array_slice( $viewed_ids, 0, (int) $atts['per_page'] );
33
 
34
    $ids_string = implode( ',', $viewed_ids );
35
 
36
    return '<h3>' . esc_html__( 'Recently Viewed Products', 'textdomain' ) . '</h3>'
37
        . do_shortcode(
38
            "[products ids=\"$ids_string\" columns=\"{$atts['columns']}\" orderby=\"post__in\"]"
39
        );
40
}

Onde inserir o código

**Tema filho **functions.php, a melhor opção. O código sobrevive às atualizações do tema pai e é armazenado no controlo de versões juntamente com o resto da personalização do site.

Plugin Code Snippets, se não houver um tema filho. Instale o Code Snippets do WordPress.org a partir do diretório, crie um novo snippet, cole o código e ative. Funciona com qualquer tema.

Não insira o código no functions.php do tema pai: irá perdê-lo na primeira atualização.

Análise linha a linha

• shortcode_atts() combina os parâmetros do utilizador com os valores padrão, função padrão do WordPress para processar atributos de shortcodes. Ao contrário do obsoleto extract(), não cria variáveis a partir de um array e não polui o escopo.
• wp_unslash() remove as barras de escape do valor do cookie, prática padrão ao ler superglobais no WordPress.
• explode('|', ...) divide a string 123|456|789 num array de IDs em string.
• array_map('absint', ...) transforma cada ID num inteiro não negativo, proteção contra lixo no cookie.
• array_filter() descarta zeros e valores vazios: os produtos que já não existem na base de dados são excluídos ao nível do ID.
• array_slice() deixa apenas as N visualizações mais recentes. O cookie escreve os IDs antigos primeiro, os mais recentes por último, por isso cortamos do início do array.
• implode(',', ...) monta a string 123,456,789 para o parâmetro ids do shortcode nativo.
• do_shortcode('[products ids="..."]') lança o mecanismo nativo do WooCommerce: miniaturas, títulos, preços, botão «Adicionar ao Carrinho», tudo na marcação padrão do tema. Os produtos esgotados não são automaticamente exibidos.

Não é necessário montar manualmente <ul><li><a>.... O [products] nativo já sabe fazer tudo isto e é mantido pela equipa do WooCommerce.

Como usar o shortcode: parâmetros e exemplos

Coloque [recently_viewed_products] em qualquer lugar onde o WordPress processe shortcodes: página, artigo, widget de texto, bloco Shortcode no editor.

Exemplos:

• [recently_viewed_products per_page="3" columns="3"], linha compacta de três produtos para a barra lateral
• [recently_viewed_products per_page="8" columns="4"], duas linhas de quatro produtos para a página do carrinho

Se o visitante ainda não viu nenhum produto, o shortcode mostra uma mensagem neutra «Ainda não viu nenhum produto», que pode ser substituída pelo seu próprio texto na linha com esc_html__().

Na prática, a configuração demora três minutos. No vídeo acima, uma análise passo a passo do trabalho com shortcodes do WooCommerce e da sua colocação no site.

Onde colocar o shortcode: o que funciona

Página do carrinho, a colocação mais forte. O visitante já reuniu produtos, mas antes do checkout vê um lembrete do que viu anteriormente. Para lojas com mais de 50 produtos, isto devolve uma porção notável de visualizações abandonadas ao carrinho.

Barra lateral da página de produto. O comprador está a comparar vários modelos, o bloco «visualizou» mantém as alternativas diante dos olhos. Funciona especialmente bem em lojas de eletrónica e vestuário, onde a comparação faz parte do processo de seleção.

Após uma pesquisa vazia. Melhor alternativa: «Não encontrou nada, mas aqui está o que verificou antes.» Em vez de uma página vazia, o visitante vê produtos familiares e é mais provável que permaneça no site.

Adicione o shortcode a um widget de texto da barra lateral ou através do bloco Shortcode no editor Gutenberg. Nos hooks do tema (woocommerce_after_cart, woocommerce_before_shop_loop), apenas se tiver confiança para editar modelos.

⁉️🤔 Perguntas frequentes

O shortcode funciona com caching?

O shortcode depende do cookie PHP woocommerce_recently_viewed, que é lido do lado do servidor. Se a página estiver em cache ao nível HTTP (via Varnish, NGINX FastCGI Cache ou um plugin como o WP Rocket), o conteúdo do shortcode também estará em cache, e um visitante poderá ver os produtos visualizados «por outra pessoa». Solução: exclua as páginas com o shortcode da cache ou ative o modo de cache compatível com WooCommerce (ESI ou fragment caching).

Posso mostrar produtos visualizados sem um shortcode, através de um hook?

Sim. A função sd_recently_viewed_products() devolve uma string, pode ser chamada diretamente em qualquer hook do tema: echo sd_recently_viewed_products( array( 'per_page' => 4 ) );. Hooks adequados são woocommerce_after_cart, woocommerce_after_single_product e woocommerce_before_shop_loop. Considere o caching se a página estiver totalmente em cache.

Quantos produtos são armazenados no cookie?

Por defeito, o WooCommerce armazena os IDs dos últimos 10 produtos visualizados. Isto está definido no código do WooCommerce e não é configurável através da interface. O shortcode determina, através do parâmetro per_page, quantos desses 10 mostrar.

Porque é que esta abordagem é melhor do que um plugin separado?

Um código de 30 linhas não adiciona consultas extra à base de dados, usa o mesmo cookie que o WooCommerce já escreveu. Um plugin separado frequentemente introduz o seu próprio mecanismo de rastreamento (cookies adicionais, eventos JS, tabelas de base de dados). Para uma loja típica, o shortcode cobre o cenário completamente, sem sobrecarregar a administração.

Porquê usar [products], e não o seu próprio WP_Query?

O [products] nativo fornece a grelha responsiva do tema, preços, botão «Adicionar ao Carrinho», gestão de stock e estado de esgotado, gratuitamente. Com um WP_Query manual, teria de reimplementar tudo isto e mantê-lo através das atualizações do WooCommerce.

Shortcode em 30 linhas: vale a pena

O cookie woocommerce_recently_viewed são dados que a sua loja já recolhe. Um shortcode de 30 linhas transforma-os num bloco funcional de «vistos recentemente», sem plugins e consultas extra à base de dados.

• Se tem uma loja com mais de 50 produtos, coloque o shortcode na página do carrinho e experimente um teste A/B com um grupo de controlo sem o bloco.
• Se usa caching agressivo, exclua a página com o shortcode ou ative o fragment caching.
• Se o visitante não viu produtos, o shortcode mostra discretamente uma mensagem neutra e não quebra o layout.

Adicione [recently_viewed_products] ao seu site e verifique numa janela anónima do navegador: abra alguns produtos e depois vá para a página com o shortcode. Se o bloco não mostrar o que visualizou, verifique as suas definições de caching, muito provavelmente essa é a causa. Que método de exibição de produtos visualizados utiliza, shortcode, plugin ou hook do tema? Escreva nos comentários.