Відвідувач заходить до магазину, переглядає п’ять товарів, закриває вкладку і за хвилину забуває про сайт. Знайома картина для будь-якого власника WooCommerce. Блок «ви нещодавно переглядали» розв’язує цю проблему: один клік по знайомій картці повертає відвідувача назад у вирву.

WooCommerce з коробки записує ID переглянутих товарів у куку woocommerce_recently_viewed. Ці дані вже лежать на сервері вашого магазину, для них не потрібен окремий плагін відстеження. Залишається прочитати куку та вивести товари. Нижче, готовий шорткод, який робить це за 30 рядків сучасного PHP.

💡 Швидкий огляд:

• Зрозумійте, як WooCommerce зберігає перегляди в cookie, один короткий абзац теорії
• Скопіюйте шорткод [recently_viewed_products] у functions.php дочірньої теми або Code Snippets
• Розмістіть блок на сторінці кошика, у сайдбарі товару або після порожнього пошуку та повертайте відвідувачів

Як WooCommerce зберігає історію переглядів

Коли відвідувач відкриває сторінку товару, WooCommerce непомітно дописує ID цього товару в куку woocommerce_recently_viewed. Формат: рядок із роздільником |, наприклад 123|456|789. Найстаріший запис ліворуч, найсвіжіший праворуч. Кука сесійна: живе до закриття браузера.

Нам не потрібно писати власний трекінг переглядів. WooCommerce уже збирає дані. Завдання шорткоду: прочитати рядок, розбити на ID, відфільтрувати тільки наявні й опубліковані товари та передати їх вбудованому механізму [products].

Такий підхід дає нативну верстку WooCommerce: адаптивну сітку, врахування залишків і цін, кнопку «У кошик», усе, що вміє штатний шорткод [products], без повторної реалізації шаблону виведення.

Готовий код: шорткод [recently_viewed_products]

Додайте цей код у functions.php дочірньої теми або через плагін Code Snippets. Він реєструє шорткод [recently_viewed_products] із двома параметрами: per_page та 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
}

Куди вставляти код

**Дочірня тема functions.php, найкращий варіант. Код переживає оновлення батьківської теми та зберігається в системі контролю версій разом з рештою кастомізації сайту.

Плагін Code Snippets, якщо дочірньої теми немає. Встановіть Code Snippets на WordPress.org з каталогу, створіть новий сніпет, вставте код і активуйте. Працює з будь-якою темою.

Не вставляйте код у functions.php батьківської теми: втратите при першому ж оновленні.

Порядковий розбір

• shortcode_atts() зливає користувацькі параметри зі стандартними, стандартна функція WordPress для обробки атрибутів шорткоду. На відміну від застарілого extract(), вона не створює змінні з масиву та не засмічує область видимості.
• wp_unslash() прибирає екрануючі слеші зі значення куки, стандартна практика під час читання суперглобалів у WordPress.
• explode('|', ...) розбиває рядок 123|456|789 на масив рядкових ID.
• array_map('absint', ...) перетворює кожен ID на ціле невід’ємне число, захист від сміття в куці.
• array_filter() викидає нулі та порожні значення: товари, яких більше немає в базі, виключаються на рівні ID.
• array_slice() залишає тільки N останніх переглядів. Кука записує старі ID першими, свіжі останніми, тому обрізаємо з початку масиву.
• implode(',', ...) збирає рядок 123,456,789 для параметра ids вбудованого шорткоду.
• do_shortcode('[products ids="..."]') запускає рідний механізм WooCommerce: мініатюри, назви, ціни, кнопка «У кошик», усе в стандартній верстці теми. Товари out of stock автоматично не показуються.

Не потрібно вручну збирати <ul><li><a>.... Вбудований [products] уже вміє все це й обслуговується командою WooCommerce.

Як використовувати шорткод: параметри та приклади

Розмістіть [recently_viewed_products] у будь-якому місці, де WordPress обробляє шорткоди: сторінка, запис, текстовий віджет, блок Shortcode в редакторі.

Приклади:

• [recently_viewed_products per_page="3" columns="3"], компактний рядок із трьох товарів для сайдбару
• [recently_viewed_products per_page="8" columns="4"], два ряди по чотири товари для сторінки кошика

Якщо відвідувач ще не переглядав жодного товару, шорткод виводить нейтральне повідомлення «You have not viewed any products yet», його можна замінити на свій текст у рядку з esc_html__().

На практиці налаштування займає три хвилини. У відео вище, покроковий розбір роботи з шорткодами WooCommerce та їх розміщення на сайті.

Де розмістити шорткод: що працює

Сторінка кошика, найсильніше місце. Відвідувач уже зібрав товари, але перед оформленням бачить нагадування про те, що переглядав раніше. Для магазинів із 50+ товарами це повертає помітну частину покинутих переглядів назад у кошик.

Сайдбар сторінки товару. Покупець порівнює кілька моделей, блок «ви переглядали» тримає альтернативи перед очима. Особливо добре працює в магазинах електроніки та одягу, де порівняння є частиною процесу вибору.

Після порожнього пошуку. Найкращий fallback: «Нічого не знайшли, але ось що ви перевіряли раніше». Замість порожньої сторінки відвідувач бачить знайомі товари та з більшою ймовірністю залишається на сайті.

Додайте шорткод у текстовий віджет сайдбару або через блок Shortcode в редакторі Gutenberg. У хуки теми (woocommerce_after_cart, woocommerce_before_shop_loop), тільки якщо впевнено редагуєте шаблони.

⁉️🤔 Часті запитання

Чи працює шорткод із кешуванням?

Шорткод залежить від PHP-куки woocommerce_recently_viewed, яка читається на стороні сервера. Якщо сторінка кешується на рівні HTTP (через Varnish, NGINX FastCGI Cache або плагін на кшталт WP Rocket), контент шорткоду теж закешується, і один відвідувач може побачити «чужі» переглянуті товари. Рішення: виключіть сторінки зі шорткодом із кешу або підключіть WooCommerce-сумісний режим кешування (ESI або фрагментне кешування).

Чи можна вивести переглянуті товари без шорткоду, через хук?

Так. Функція sd_recently_viewed_products() повертає рядок, її можна викликати напряму в будь-якому хуці теми: echo sd_recently_viewed_products( array( 'per_page' => 4 ) );. Підійдуть хуки woocommerce_after_cart, woocommerce_after_single_product та woocommerce_before_shop_loop. Враховуйте кешування, якщо сторінка кешується цілком.

Скільки товарів зберігається в куці?

Стандартно WooCommerce зберігає ID останніх 10 переглянутих товарів. Це задається в коді WooCommerce і не налаштовується через інтерфейс. Шорткод через параметр per_page визначає, скільки з цих 10 показувати.

Чим цей підхід кращий за окремий плагін?

Код із 30 рядків не додає зайвих запитів до бази, використовується та сама кука, яку WooCommerce вже записала. Окремий плагін часто тягне свій механізм відстеження (додаткові cookie, JS-події, таблиці в базі). Для типового магазину шорткод покриває сценарій повністю, без роздування адмінки.

Чому використовується [products], а не свій WP_Query?

Вбудований [products] дає адаптивну сітку теми, ціни, кнопку «У кошик», врахування залишків і статусу out of stock, безплатно. При ручному WP_Query довелося б усе це реалізовувати заново та підтримувати під час оновлень WooCommerce.

Шорткод за 30 рядків: чи варто воно того

Кука woocommerce_recently_viewed — це дані, які ваш магазин уже збирає. Шорткод із 30 рядків перетворює їх на робочий блок «ви нещодавно переглядали» без плагінів і зайвих запитів до бази.

• Якщо у вас магазин на 50+ товарів, розмістіть шорткод на сторінці кошика та спробуйте A/B-тест із контрольною групою без блоку.
• Якщо використовуєте агресивне кешування, виключіть сторінку зі шорткодом або підключіть фрагментне кешування.
• Якщо відвідувач не переглядав товари, шорткод мовчки виводить нейтральне повідомлення та не ламає верстку.

Додайте [recently_viewed_products] на свій сайт і перевірте в інкогніто-вікні браузера: відкрийте пару товарів, потім зайдіть на сторінку зі шорткодом. Якщо блок показує не те, що ви переглядали, перевірте налаштування кешування, найімовірніше причина в них. Який спосіб виведення переглянутих товарів використовуєте ви: шорткод, плагін чи хук теми? Напишіть у коментарях.