Un visiteur entre dans la boutique, parcourt cinq produits, ferme l’onglet et, une minute plus tard, a oublié le site. C’est un tableau familier pour tout propriétaire de boutique WooCommerce. Un bloc « récemment consultés » résout ce problème : un clic sur une fiche connue fait revenir le visiteur dans le tunnel de conversion.

WooCommerce enregistre nativement les identifiants des produits consultés dans le cookie woocommerce_recently_viewed. Ces données sont déjà présentes sur le serveur de votre boutique, sans avoir besoin d’une extension de suivi séparée. Il ne reste plus qu’à lire le cookie et à afficher les produits. Voici un shortcode prêt à l’emploi qui fait cela en 30 lignes de PHP moderne.

💡 Aperçu rapide :

• Comprendre comment WooCommerce stocke les consultations dans un cookie, un court paragraphe de théorie
• Copier le shortcode [recently_viewed_products] dans le functions.php d’un thème enfant ou via Code Snippets
• Placer le bloc sur la page du panier, dans la barre latérale produit ou après une recherche vide, et faites revenir les visiteurs

Comment WooCommerce stocke l’historique de consultation

Lorsqu’un visiteur ouvre une page produit, WooCommerce ajoute silencieusement l’identifiant de ce produit au cookie woocommerce_recently_viewed. Format : une chaîne avec le séparateur |, par exemple 123|456|789. L’entrée la plus ancienne est à gauche, la plus récente à droite. Le cookie est basé sur la session : il vit jusqu’à la fermeture du navigateur.

Nous n’avons pas besoin d’écrire notre propre suivi de consultation. WooCommerce collecte déjà les données. La tâche du shortcode : lire la chaîne, la découper en identifiants, ne garder que les produits existants et publiés, puis les transmettre au mécanisme natif [products].

Cette approche fournit le balisage WooCommerce natif : grille responsive, gestion du stock et des prix, bouton « Ajouter au panier », tout ce que le shortcode standard [products] sait faire, sans réimplémenter le template d’affichage.

Code prêt à l’emploi : shortcode [recently_viewed_products]

Ajoutez ce code au functions.php d’un thème enfant ou via l’extension Code Snippets. Il enregistre le shortcode [recently_viewed_products] avec deux paramètres : per_page et 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
}

Où insérer le code

**Thème enfant **functions.php, la meilleure option. Le code survit aux mises à jour du thème parent et est stocké dans le contrôle de version avec le reste de la personnalisation du site.

Extension Code Snippets, s’il n’y a pas de thème enfant. Installez Code Snippets depuis WordPress.org depuis le répertoire, créez un nouvel extrait, collez le code et activez-le. Fonctionne avec n’importe quel thème.

N’insérez pas le code dans le functions.php du thème parent : vous le perdrez à la première mise à jour.

Explication ligne par ligne

• shortcode_atts() fusionne les paramètres utilisateur avec les valeurs par défaut, fonction WordPress standard pour traiter les attributs de shortcode. Contrairement à la fonction dépréciée extract(), elle ne crée pas de variables à partir d’un tableau et ne pollue pas la portée.
• wp_unslash() supprime les barres obliques d’échappement de la valeur du cookie, pratique standard lors de la lecture des superglobales dans WordPress.
• explode('|', ...) découpe la chaîne 123|456|789 en un tableau d’identifiants sous forme de chaînes.
• array_map('absint', ...) transforme chaque identifiant en entier non négatif, protection contre les données indésirables dans le cookie.
• array_filter() élimine les zéros et les valeurs vides : les produits qui n’existent plus dans la base de données sont exclus au niveau de l’identifiant.
• array_slice() ne conserve que les N consultations les plus récentes. Le cookie écrit les anciens identifiants en premier, les récents en dernier, donc nous coupons depuis le début du tableau.
• implode(',', ...) assemble la chaîne 123,456,789 pour le paramètre ids du shortcode natif.
• do_shortcode('[products ids="..."]') lance le mécanisme WooCommerce natif : miniatures, titres, prix, bouton « Ajouter au panier », le tout dans le balisage standard du thème. Les produits en rupture de stock sont automatiquement non affichés.

Pas besoin d’assembler manuellement <ul><li><a>.... Le [products] natif sait déjà faire tout cela et est maintenu par l’équipe WooCommerce.

Comment utiliser le shortcode : paramètres et exemples

Placez [recently_viewed_products] partout où WordPress traite les shortcodes : page, article, widget texte, bloc Shortcode dans l’éditeur.

Exemples :

• [recently_viewed_products per_page="3" columns="3"], ligne compacte de trois produits pour la barre latérale
• [recently_viewed_products per_page="8" columns="4"], deux lignes de quatre produits pour la page du panier

Si le visiteur n’a encore consulté aucun produit, le shortcode affiche un message neutre « Vous n’avez pas encore consulté de produits », qui peut être remplacé par votre propre texte dans la ligne contenant esc_html__().

En pratique, la mise en place prend trois minutes. Dans la vidéo ci-dessus, un découpage étape par étape du travail avec les shortcodes WooCommerce et leur placement sur le site.

Où placer le shortcode : ce qui fonctionne

Page du panier, le placement le plus fort. Le visiteur a déjà rassemblé des produits, mais avant de passer commande, il voit un rappel de ce qu’il a consulté plus tôt. Pour les boutiques de plus de 50 produits, cela ramène une part notable des consultations abandonnées vers le panier.

Barre latérale de la page produit. L’acheteur compare plusieurs modèles, le bloc « vous avez consulté » garde les alternatives sous ses yeux. Fonctionne particulièrement bien dans les boutiques d’électronique et de vêtements, où la comparaison fait partie du processus de choix.

Après une recherche vide. Meilleure solution de repli : « Vous n’avez rien trouvé, mais voici ce que vous avez regardé plus tôt. » Au lieu d’une page vide, le visiteur voit des produits familiers et a plus de chances de rester sur le site.

Ajoutez le shortcode à un widget texte de barre latérale ou via le bloc Shortcode dans l’éditeur Gutenberg. Dans les hooks de thème (woocommerce_after_cart, woocommerce_before_shop_loop), seulement si vous êtes à l’aise avec l’édition de templates.

⁉️🤔 Questions fréquentes

Le shortcode fonctionne-t-il avec la mise en cache ?

Le shortcode dépend du cookie PHP woocommerce_recently_viewed, qui est lu côté serveur. Si la page est mise en cache au niveau HTTP (via Varnish, NGINX FastCGI Cache ou une extension comme WP Rocket), le contenu du shortcode sera également mis en cache, et un visiteur peut voir les produits consultés « de quelqu’un d’autre ». Solution : exclure les pages contenant le shortcode du cache ou activer un mode de cache compatible WooCommerce (ESI ou cache de fragments).

Puis-je afficher les produits consultés sans shortcode, via un hook ?

Oui. La fonction sd_recently_viewed_products() retourne une chaîne, elle peut être appelée directement dans n’importe quel hook de thème : echo sd_recently_viewed_products( array( 'per_page' => 4 ) );. Les hooks appropriés sont woocommerce_after_cart, woocommerce_after_single_product et woocommerce_before_shop_loop. Pensez à la mise en cache si la page est entièrement cachée.

Combien de produits sont stockés dans le cookie ?

Par défaut, WooCommerce stocke les identifiants des 10 derniers produits consultés. Ceci est défini dans le code de WooCommerce et n’est pas configurable via l’interface. Le shortcode détermine via le paramètre per_page combien de ces 10 produits afficher.

Pourquoi cette approche est-elle meilleure qu’une extension séparée ?

Un code de 30 lignes n’ajoute aucune requête supplémentaire à la base de données, utilise le même cookie que WooCommerce a déjà écrit. Une extension séparée embarque souvent son propre mécanisme de suivi (cookies supplémentaires, événements JS, tables de base de données). Pour une boutique typique, le shortcode couvre entièrement le scénario, sans alourdir l’administration.

Pourquoi utiliser [products], et non votre propre WP_Query ?

Le [products] natif fournit gratuitement la grille responsive du thème, les prix, le bouton « Ajouter au panier », la gestion du stock et le statut de rupture. Avec un WP_Query manuel, vous devriez réimplémenter tout cela et le maintenir à travers les mises à jour de WooCommerce.

Shortcode en 30 lignes : est-ce que cela en vaut la peine

Le cookie woocommerce_recently_viewed est une donnée que votre boutique collecte déjà. Un shortcode de 30 lignes le transforme en un bloc « récemment consultés » fonctionnel, sans extensions ni requêtes supplémentaires à la base de données.

• Si vous avez une boutique de plus de 50 produits, placez le shortcode sur la page du panier et essayez un test A/B avec un groupe de contrôle sans le bloc.
• Si vous utilisez une mise en cache agressive, excluez la page contenant le shortcode ou activez le cache de fragments.
• Si le visiteur n’a pas consulté de produits, le shortcode affiche discrètement un message neutre et ne casse pas la mise en page.

Ajoutez [recently_viewed_products] à votre site et vérifiez dans une fenêtre de navigation privée : ouvrez quelques produits, puis allez sur la page contenant le shortcode. Si le bloc n’affiche pas ce que vous avez consulté, vérifiez vos paramètres de cache, c’est probablement la cause. Quelle méthode utilisez-vous pour afficher les produits consultés, shortcode, extension ou hook de thème ? Écrivez dans les commentaires.