En besökare kommer in i butiken, bläddrar bland fem produkter, stänger fliken och har en minut senare glömt bort sajten. Det här är en välbekant bild för alla som driver en WooCommerce-butik. Ett block med "nyligen visade" löser problemet: ett klick på ett bekant kort tar besökaren tillbaka in i tratten.

WooCommerce skriver direkt i standardutförande ID:n för visade produkter till cookien woocommerce_recently_viewed. Dessa data finns redan på din butiks server, inget separat spårningsplugin behövs. Det enda som återstår är att läsa cookien och visa produkterna. Här är en färdig shortcode som gör detta på 30 rader modern PHP.

💡 Snabb överblick:

• Förstå hur WooCommerce lagrar visningar i en cookie, ett kort stycke teori
• Kopiera shortcoden [recently_viewed_products] till functions.php i ett barntema eller Code Snippets
• Placera blocket på varukorgssidan, i produktsidofältet eller efter en tom sökning och ta tillbaka besökarna

Hur WooCommerce lagrar visningshistorik

När en besökare öppnar en produktsida lägger WooCommerce tyst till produktens ID i cookien woocommerce_recently_viewed. Format: en sträng med | som avgränsare, till exempel 123|456|789. Den äldsta posten är till vänster, den nyaste till höger. Cookien är sessionsbaserad: den lever tills webbläsaren stängs.

Vi behöver inte skriva vår egen visningsspårning. WooCommerce samlar redan in data. Shortcodens uppgift: läs strängen, dela upp den i ID:n, filtrera fram endast befintliga och publicerade produkter och skicka dem till den inbyggda [products]-mekanismen.

Det här tillvägagångssättet ger inbyggd WooCommerce-märkning: responsivt rutnät, lager- och prishantering, "Lägg i varukorg"-knapp, allt som standard-shortcoden [products] kan göra, utan att återimplementera visningsmallen.

Färdig kod: [recently_viewed_products] shortcode

Lägg till den här koden i functions.php i ett barntema eller via pluginet Code Snippets. Den registrerar shortcoden [recently_viewed_products] med två parametrar: per_page och 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
}

Var du lägger in koden

**Barntema **functions.php, bästa alternativet. Koden överlever uppdateringar av föräldratemat och lagras i versionshantering tillsammans med resten av sajtens anpassningar.

Code Snippets-plugin, om det inte finns något barntema. Installera Code Snippets från WordPress.org från katalogen, skapa ett nytt snippet, klistra in koden och aktivera. Fungerar med alla teman.

Lägg inte in koden i föräldratemats functions.php: du förlorar den vid första uppdateringen.

Rad-för-rad-genomgång

• shortcode_atts() slår samman användarparametrar med standardvärden, standardfunktion i WordPress för att bearbeta shortcode-attribut. Till skillnad från den föråldrade extract() skapar den inte variabler från en array och förorenar inte scopet.
• wp_unslash() tar bort escape-snedstreck från cookie-värdet, standardpraxis vid läsning av superglobaler i WordPress.
• explode('|', ...) delar upp strängen 123|456|789 i en array med sträng-ID:n.
• array_map('absint', ...) gör om varje ID till ett icke-negativt heltal, skydd mot skräp i cookien.
• array_filter() rensar bort nollor och tomma värden: produkter som inte längre finns i databasen utesluts på ID-nivå.
• array_slice() behåller endast de N senaste visningarna. Cookien skriver gamla ID:n först, färska sist, så vi trimmar från början av arrayen.
• implode(',', ...) sätter ihop strängen 123,456,789 för parametern ids i den inbyggda shortcoden.
• do_shortcode('[products ids="..."]') startar den inbyggda WooCommerce-mekanismen: miniatyrbilder, titlar, priser, "Lägg i varukorg"-knapp, allt i standardtematisk märkning. Produkter som inte finns i lager visas automatiskt inte.

Inget behov av att manuellt sätta ihop <ul><li><a>.... Den inbyggda [products] kan redan allt detta och underhålls av WooCommerce-teamet.

Hur du använder shortcoden: parametrar och exempel

Placera [recently_viewed_products] var som helst där WordPress bearbetar shortcodes: sida, inlägg, textwidget, Shortcode-block i redigeraren.

Exempel:

• [recently_viewed_products per_page="3" columns="3"], kompakt rad med tre produkter för sidofältet
• [recently_viewed_products per_page="8" columns="4"], två rader med fyra produkter för varukorgssidan

Om besökaren inte har visat några produkter än visar shortcoden ett neutralt meddelande "Du har inte visat några produkter än", som kan ersättas med din egen text på raden med esc_html__().

I praktiken tar installationen tre minuter. I videon ovan visas en steg-för-steg-genomgång av hur du arbetar med WooCommerce-shortcodes och placerar dem på sajten.

Var du placerar shortcoden: vad som fungerar

Varukorgssidan, den starkaste placeringen. Besökaren har redan samlat produkter, men ser före kassan en påminnelse om vad de tittade på tidigare. För butiker med 50+ produkter återför detta en märkbar andel avbrutna visningar tillbaka till varukorgen.

Sidofält på produktsida. Köparen jämför flera modeller, blocket "du visade" håller alternativen framför ögonen. Fungerar särskilt bra i elektronik- och klädbutiker, där jämförelse är en del av urvalsprocessen.

Efter en tom sökning. Bästa fallback: "Hittade inget, men här är vad du kollade på tidigare." Istället för en tom sida ser besökaren bekanta produkter och är mer benägen att stanna på sajten.

Lägg till shortcoden i en textwidget i sidofältet eller via Shortcode-blocket i Gutenberg-redigeraren. I temahooks (woocommerce_after_cart, woocommerce_before_shop_loop), endast om du är säker på att redigera mallar.

⁉️🤔 Vanliga frågor

Fungerar shortcoden med cachning?

Shortcoden är beroende av PHP-cookien woocommerce_recently_viewed, som läses på serversidan. Om sidan cachas på HTTP-nivå (via Varnish, NGINX FastCGI Cache eller ett plugin som WP Rocket) kommer shortcode-innehållet också att cachas, och en besökare kan se "någon annans" visade produkter. Lösning: exkludera sidor med shortcoden från cache eller aktivera WooCommerce-kompatibelt cacheläge (ESI eller fragmentcachning).

Kan jag visa visade produkter utan shortcode, via en hook?

Ja. Funktionen sd_recently_viewed_products() returnerar en sträng, den kan anropas direkt i valfri temahook: echo sd_recently_viewed_products( array( 'per_page' => 4 ) );. Lämpliga hooks är woocommerce_after_cart, woocommerce_after_single_product och woocommerce_before_shop_loop. Tänk på cachning om sidan cachas helt.

Hur många produkter lagras i cookien?

Som standard lagrar WooCommerce ID:n för de senaste 10 visade produkterna. Detta är satt i WooCommerce-koden och kan inte konfigureras via gränssnittet. Shortcoden avgör via parametern per_page hur många av dessa 10 som ska visas.

Varför är den här metoden bättre än ett separat plugin?

Kod på 30 rader lägger inte till några extra databasfrågor, använder samma cookie som WooCommerce redan skrev. Ett separat plugin drar ofta igång sin egen spårningsmekanism (ytterligare cookies, JS-händelser, databastabeller). För en typisk butik täcker shortcoden scenariot helt, utan att blåsa upp admin.

Varför använda [products], inte din egen WP_Query?

Den inbyggda [products] ger temats responsiva rutnät, priser, "Lägg i varukorg"-knapp, lagerhantering och status för ej i lager, gratis. Med manuell WP_Query skulle du behöva återimplementera allt detta och underhålla det genom WooCommerce-uppdateringar.

Shortcode på 30 rader: är det värt det

Cookien woocommerce_recently_viewed är data din butik redan samlar in. En shortcode på 30 rader gör den till ett fungerande "nyligen visade"-block utan plugins och extra databasfrågor.

• Om du har en butik med 50+ produkter, placera shortcoden på varukorgssidan och prova ett A/B-test med en kontrollgrupp utan blocket.
• Om du använder aggressiv cachning, exkludera sidan med shortcoden eller aktivera fragmentcachning.
• Om besökaren inte har visat produkter visar shortcoden tyst ett neutralt meddelande och bryter inte layouten.

Lägg till [recently_viewed_products] på din sajt och kontrollera i ett inkognitofönster: öppna ett par produkter, gå sedan till sidan med shortcoden. Om blocket inte visar vad du tittade på, kontrollera dina cachningsinställningar, troligtvis är det orsaken. Vilken metod för att visa visade produkter använder du, shortcode, plugin eller temahook? Skriv i kommentarerna.