Odwiedzający wchodzi do sklepu, przegląda pięć produktów, zamyka kartę i po minucie zapomina o stronie. Znajomy obrazek dla każdego właściciela WooCommerce. Blok „ostatnio oglądane" rozwiązuje ten problem: jedno kliknięcie w znajomą kartę produktu przywraca odwiedzającego z powrotem do lejka sprzedażowego.

WooCommerce od razu po instalacji zapisuje ID przeglądanych produktów w ciasteczku woocommerce_recently_viewed. Te dane już znajdują się na serwerze Pana/Pani sklepu, nie potrzeba do nich osobnej wtyczki śledzącej. Pozostaje tylko odczytać ciasteczko i wyświetlić produkty. Poniżej gotowy shortcode, który robi to w 30 linijkach nowoczesnego PHP.

💡 Szybki przegląd:

• Proszę zrozumieć, jak WooCommerce przechowuje historię przeglądania w ciasteczku, jeden krótki akapit teorii
• Proszę skopiować shortcode [recently_viewed_products] do functions.php motywu potomnego lub wtyczki Code Snippets
• Proszę umieścić blok na stronie koszyka, w sidebarze produktu lub po pustym wyszukiwaniu i odzyskiwać odwiedzających

Jak WooCommerce przechowuje historię przeglądania

Gdy odwiedzający otwiera stronę produktu, WooCommerce niepostrzeżenie dopisuje ID tego produktu do ciasteczka woocommerce_recently_viewed. Format: ciąg znaków z separatorem |, na przykład 123|456|789. Najstarszy wpis po lewej, najnowszy po prawej. Ciasteczko jest sesyjne: żyje do zamknięcia przeglądarki.

Nie musimy pisać własnego śledzenia wyświetleń. WooCommerce już zbiera dane. Zadaniem shortcode’a jest: odczytać ciąg, podzielić na ID, odfiltrować tylko istniejące i opublikowane produkty oraz przekazać je wbudowanemu mechanizmowi [products].

Takie podejście daje natywny układ WooCommerce: responsywną siatkę, uwzględnienie stanów magazynowych i cen, przycisk „Do koszyka", wszystko, co potrafi standardowy shortcode [products], bez ponownej implementacji szablonu wyświetlania.

Gotowy kod: shortcode [recently_viewed_products]

Proszę dodać ten kod do functions.php motywu potomnego lub przez wtyczkę Code Snippets. Rejestruje on shortcode [recently_viewed_products] z dwoma parametrami: per_page oraz 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
}

Gdzie wstawić kod

**Motyw potomny functions.php, najlepsza opcja. Kod przetrwa aktualizacje motywu nadrzędnego i jest przechowywany w systemie kontroli wersji razem z resztą dostosowań strony.

Wtyczka Code Snippets, jeśli nie ma motywu potomnego. Proszę zainstalować Code Snippets na WordPress.org z katalogu, utworzyć nowy snippet, wkleić kod i aktywować. Działa z każdym motywem.

Proszę nie wstawiać kodu do functions.php motywu nadrzędnego: straci go Pan/Pani przy pierwszej aktualizacji.

Analiza krok po kroku

• shortcode_atts() scala parametry użytkownika z domyślnymi, standardowa funkcja WordPressa do obsługi atrybutów shortcode’a. W przeciwieństwie do przestarzałego extract(), nie tworzy ona zmiennych z tablicy i nie zaśmieca zakresu widoczności.
• wp_unslash() usuwa znaki ucieczki z wartości ciasteczka, standardowa praktyka przy odczycie superglobali w WordPressie.
• explode('|', ...) dzieli ciąg 123|456|789 na tablicę ID w formie tekstowej.
• array_map('absint', ...) konwertuje każde ID na nieujemną liczbę całkowitą, zabezpieczenie przed śmieciami w ciasteczku.
• array_filter() odrzuca zera i puste wartości: produkty, których już nie ma w bazie, są wykluczane na poziomie ID.
• array_slice() pozostawia tylko N ostatnio przeglądanych. Ciasteczko zapisuje stare ID jako pierwsze, świeże jako ostatnie, dlatego przycinamy od początku tablicy.
• implode(',', ...) tworzy ciąg 123,456,789 dla parametru ids wbudowanego shortcode’a.
• do_shortcode('[products ids="..."]') uruchamia natywny mechanizm WooCommerce: miniatury, nazwy, ceny, przycisk „Do koszyka", wszystko w standardowym układzie motywu. Produkty out of stock automatycznie się nie pokazują.

Nie trzeba ręcznie składać <ul><li><a>.... Wbudowany [products] już to wszystko potrafi i jest utrzymywany przez zespół WooCommerce.

Jak używać shortcode’a: parametry i przykłady

Proszę umieścić [recently_viewed_products] w dowolnym miejscu, gdzie WordPress przetwarza shortcode’y: strona, wpis, widget tekstowy, blok Shortcode w edytorze.

Przykłady:

• [recently_viewed_products per_page="3" columns="3"], kompaktowy rząd trzech produktów do sidebara
• [recently_viewed_products per_page="8" columns="4"], dwa rzędy po cztery produkty na stronę koszyka

Jeśli odwiedzający nie przeglądał jeszcze żadnego produktu, shortcode wyświetla neutralny komunikat „You have not viewed any products yet", można go zastąpić własnym tekstem w linijce z esc_html__().

W praktyce konfiguracja zajmuje trzy minuty. Na filmie powyżej, analiza krok po kroku pracy z shortcode’ami WooCommerce i ich umieszczania na stronie.

Gdzie umieścić shortcode: co działa

Strona koszyka, najmocniejsze miejsce. Odwiedzający już zebrał produkty, ale przed finalizacją zamówienia widzi przypomnienie o tym, co przeglądał wcześniej. Dla sklepów z 50+ produktami pozwala to odzyskać zauważalną część porzuconych przeglądów z powrotem do koszyka.

Sidebar strony produktu. Kupujący porównuje kilka modeli, blok „ostatnio oglądane" trzyma alternatywy przed oczami. Szczególnie dobrze sprawdza się w sklepach z elektroniką i odzieżą, gdzie porównywanie jest częścią procesu wyboru.

Po pustym wyszukiwaniu. Najlepszy fallback: „Nic nie znaleziono, ale oto co sprawdzałeś wcześniej". Zamiast pustej strony odwiedzający widzi znajome produkty i z większym prawdopodobieństwem pozostaje na stronie.

Proszę dodać shortcode w tekstowym widżecie sidebara lub przez blok Shortcode w edytorze Gutenberg. W hooki motywu (woocommerce_after_cart, woocommerce_before_shop_loop), tylko jeśli pewnie edytuje Pan/Pani szablony.

⁉️🤔 Często zadawane pytania

Czy shortcode działa z cache’owaniem?

Shortcode zależy od ciasteczka PHP woocommerce_recently_viewed, które jest odczytywane po stronie serwera. Jeśli strona jest cache’owana na poziomie HTTP (przez Varnish, NGINX FastCGI Cache lub wtyczkę typu WP Rocket), zawartość shortcode’a również zostanie zcache’owana i jeden odwiedzający może zobaczyć „cudze" przeglądane produkty. Rozwiązanie: proszę wykluczyć strony z shortcode’em z cache’a lub włączyć tryb cache’owania kompatybilny z WooCommerce (ESI lub cache’owanie fragmentaryczne).

Czy można wyświetlić przeglądane produkty bez shortcode’a, przez hook?

Tak. Funkcja sd_recently_viewed_products() zwraca ciąg znaków, można ją wywołać bezpośrednio w dowolnym hooku motywu: echo sd_recently_viewed_products( array( 'per_page' => 4 ) );. Odpowiednie będą hooki woocommerce_after_cart, woocommerce_after_single_product oraz woocommerce_before_shop_loop. Proszę uwzględnić cache’owanie, jeśli strona jest cache’owana w całości.

Ile produktów jest przechowywanych w ciasteczku?

Domyślnie WooCommerce przechowuje ID ostatnich 10 przeglądanych produktów. Jest to zdefiniowane w kodzie WooCommerce i nie konfiguruje się tego przez interfejs. Shortcode poprzez parametr per_page określa, ile z tych 10 pokazać.

Czym to podejście jest lepsze od osobnej wtyczki?

Kod składający się z 30 linijek nie dodaje zbędnych zapytań do bazy danych, wykorzystuje to samo ciasteczko, które WooCommerce już zapisało. Osobna wtyczka często ciągnie za sobą własny mechanizm śledzenia (dodatkowe cookie, zdarzenia JS, tabele w bazie). Dla typowego sklepu shortcode w pełni pokrywa scenariusz, bez rozdmuchiwania panelu administracyjnego.

Dlaczego używane jest [products], a nie własny WP_Query?

Wbudowany [products] daje responsywną siatkę motywu, ceny, przycisk „Do koszyka", uwzględnienie stanów magazynowych i statusu out of stock, za darmo. Przy ręcznym WP_Query trzeba by to wszystko zaimplementować od nowa i utrzymywać podczas aktualizacji WooCommerce.

Shortcode w 30 linijkach: czy warto

Ciasteczko woocommerce_recently_viewed to dane, które Pana/Pani sklep już zbiera. Shortcode z 30 linijek przekształca je w działający blok „ostatnio oglądane" bez wtyczek i zbędnych zapytań do bazy.

• Jeśli ma Pan/Pani sklep z 50+ produktami, proszę umieścić shortcode na stronie koszyka i spróbować testu A/B z grupą kontrolną bez bloku.
• Jeśli używa Pan/Pani agresywnego cache’owania, proszę wykluczyć stronę z shortcode’em lub włączyć cache’owanie fragmentaryczne.
• Jeśli odwiedzający nie przeglądał produktów, shortcode po cichu wyświetla neutralny komunikat i nie psuje układu.

Proszę dodać [recently_viewed_products] na swoją stronę i sprawdzić w oknie incognito przeglądarki: otworzyć kilka produktów, a następnie wejść na stronę z shortcode’em. Jeśli blok pokazuje nie to, co Pan/Pani przeglądał(a), proszę sprawdzić ustawienia cache’owania, najprawdopodobniej przyczyna leży właśnie tam. Jaki sposób wyświetlania przeglądanych produktów Pan/Pani stosuje: shortcode, wtyczkę czy hook motywu? Proszę napisać w komentarzach.