En besøkende kommer inn i butikken, ser på fem produkter, lukker fanen og glemmer nettstedet et minutt senere. Dette er et kjent bilde for alle som eier en WooCommerce-butikk. En «nylig sett»-blokk løser dette problemet: ett klikk på et kjent kort bringer den besøkende tilbake i salgstrakten.

WooCommerce skriver produkt-ID-ene for viste produkter til informasjonskapselen woocommerce_recently_viewed ut av boksen. Disse dataene ligger allerede på serveren til butikken din, du trenger ikke noe eget sporingsprogramtillegg. Det eneste som gjenstår er å lese informasjonskapselen og vise produktene. Nedenfor finner du en ferdig shortcode som gjør dette på 30 linjer med moderne PHP.

💡 Rask oversikt:

• Forstå hvordan WooCommerce lagrer visninger i en informasjonskapsel, ett kort teoriavsnitt
• Kopier shortcoden [recently_viewed_products] inn i functions.php i et child theme eller Code Snippets
• Plasser blokken på handlekurvsiden, i produktsidefeltet eller etter et tomt søk, og bring besøkende tilbake

Hvordan WooCommerce lagrer visningshistorikk

Når en besøkende åpner en produktside, legger WooCommerce lydløst produktets ID til i informasjonskapselen woocommerce_recently_viewed. Format: en streng med | som skilletegn, for eksempel 123|456|789. Den eldste oppføringen er til venstre, den nyeste til høyre. Informasjonskapselen er øktbasert: den lever til nettleseren lukkes.

Vi trenger ikke å skrive vår egen visningssporing. WooCommerce samler allerede inn dataene. Shortcodens oppgave: les strengen, del den opp i ID-er, filtrer ut bare eksisterende og publiserte produkter, og send dem til den innebygde [products]-mekanismen.

Denne tilnærmingen gir naturlig WooCommerce-markering: responsivt rutenett, lager- og prishåndtering, «Legg i handlekurv»-knapp, alt standard [products]-shortcoden kan gjøre, uten å måtte implementere visningsmalen på nytt.

Ferdig kode: [recently_viewed_products] shortcode

Legg denne koden til functions.php i et child theme eller via programtillegget Code Snippets. Den registrerer shortcoden [recently_viewed_products] med to parametere: per_page og 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
}

Hvor du skal sette inn koden

**Child theme **functions.php, beste alternativ. Koden overlever oppdateringer av parent theme og lagres i versjonskontroll sammen med resten av nettstedets tilpasninger.

Code Snippets-programtillegg, hvis det ikke finnes noe child theme. Installer Code Snippets fra WordPress.org fra katalogen, opprett en ny snippet, lim inn koden og aktiver. Fungerer med alle temaer.

Ikke sett inn koden i parent themeets functions.php: du mister den ved første oppdatering.

Linje-for-linje-gjennomgang

• shortcode_atts() slår sammen brukerparametere med standardverdier, standard WordPress-funksjon for behandling av shortcode-attributter. I motsetning til den utdaterte extract(), oppretter den ikke variabler fra en matrise og forurenser ikke skopet.
• wp_unslash() fjerner escape-skråstreker fra informasjonskapselverdien, standard praksis ved lesing av superglobals i WordPress.
• explode('|', ...) deler strengen 123|456|789 inn i en matrise med streng-ID-er.
• array_map('absint', ...) gjør hver ID om til et ikke-negativt heltall, beskyttelse mot søppel i informasjonskapselen.
• array_filter() kaster ut nuller og tomme verdier: produkter som ikke lenger finnes i databasen, ekskluderes på ID-nivå.
• array_slice() beholder bare de N siste visningene. Informasjonskapselen skriver gamle ID-er først, ferske sist, så vi trimmer fra begynnelsen av matrisen.
• implode(',', ...) setter sammen strengen 123,456,789 for ids-parameteren til den innebygde shortcoden.
• do_shortcode('[products ids="..."]') starter den naturlige WooCommerce-mekanismen: miniatyrbilder, titler, priser, «Legg i handlekurv»-knapp, alt i standard temamarkering. Utsolgte produkter vises automatisk ikke.

Du trenger ikke å sette sammen <ul><li><a>... manuelt. Den innebygde [products] vet allerede hvordan alt dette gjøres og vedlikeholdes av WooCommerce-teamet.

Hvordan bruke shortcoden: parametere og eksempler

Plasser [recently_viewed_products] hvor som helst WordPress behandler shortcoder: side, innlegg, tekstwidget, Shortcode-blokk i redigeringsprogrammet.

Eksempler:

• [recently_viewed_products per_page="3" columns="3"], kompakt rad med tre produkter for sidefeltet
• [recently_viewed_products per_page="8" columns="4"], to rader med fire produkter for handlekurvsiden

Hvis den besøkende ikke har sett noen produkter ennå, viser shortcoden en nøytral melding «Du har ikke sett noen produkter ennå», som kan erstattes med din egen tekst i linjen med esc_html__().

I praksis tar oppsettet tre minutter. I videoen over får du en trinnvis gjennomgang av arbeid med WooCommerce-shortcoder og plassering av dem på nettstedet.

Hvor du skal plassere shortcoden: hva som fungerer

Handlekurvsiden, den sterkeste plasseringen. Den besøkende har allerede samlet produkter, men før utsjekking ser de en påminnelse om hva de så på tidligere. For butikker med 50+ produkter returnerer dette en merkbar andel av forlatte visninger tilbake til handlekurven.

Produktsidefeltet. Kjøperen sammenligner flere modeller, «du har sett»-blokken holder alternativer foran øynene deres. Fungerer spesielt godt i elektronikk- og klesbutikker, der sammenligning er en del av utvelgelsesprosessen.

Etter et tomt søk. Beste fallback: «Fant ingenting, men her er det du sjekket tidligere.» I stedet for en tom side ser den besøkende kjente produkter og har større sannsynlighet for å bli værende på nettstedet.

Legg til shortcoden i en tekstwidget i sidefeltet eller via Shortcode-blokken i Gutenberg-redigeringsprogrammet. I temakroker (woocommerce_after_cart, woocommerce_before_shop_loop), bare hvis du er trygg på å redigere maler.

⁉️🤔 Ofte stilte spørsmål

Fungerer shortcoden med mellomlagring?

Shortcoden avhenger av PHP-informasjonskapselen woocommerce_recently_viewed, som leses på serversiden. Hvis siden mellomlagres på HTTP-nivå (via Varnish, NGINX FastCGI Cache eller et programtillegg som WP Rocket), vil shortcode-innholdet også bli mellomlagret, og én besøkende kan se «andres» viste produkter. Løsning: ekskluder sider med shortcoden fra mellomlager eller aktiver WooCommerce-kompatibel mellomlagringsmodus (ESI eller fragment caching).

Kan jeg vise viste produkter uten shortcode, via en krok?

Ja. Funksjonen sd_recently_viewed_products() returnerer en streng, den kan kalles direkte i en hvilken som helst temakrok: echo sd_recently_viewed_products( array( 'per_page' => 4 ) );. Egnede kroker er woocommerce_after_cart, woocommerce_after_single_product og woocommerce_before_shop_loop. Vurder mellomlagring hvis siden mellomlagres fullstendig.

Hvor mange produkter lagres i informasjonskapselen?

Som standard lagrer WooCommerce ID-ene til de siste 10 viste produktene. Dette er satt i WooCommerce-koden og kan ikke konfigureres via grensesnittet. Shortcoden bestemmer via per_page-parameteren hvor mange av disse 10 som skal vises.

Hvorfor er denne tilnærmingen bedre enn et eget programtillegg?

Kode på 30 linjer legger ikke til ekstra databasespørringer, bruker den samme informasjonskapselen som WooCommerce allerede skrev. Et eget programtillegg drar ofte med seg sin egen sporingsmekanisme (ekstra informasjonskapsler, JS-hendelser, databasetabeller). For en typisk butikk dekker shortcoden scenarioet fullstendig, uten å bloat-e admin.

Hvorfor bruke [products], ikke din egen WP_Query?

Den innebygde [products] gir temaets responsive rutenett, priser, «Legg i handlekurv»-knapp, lagerhåndtering og utsolgtstatus, gratis. Med manuell WP_Query måtte du ha implementert alt dette på nytt og vedlikeholdt det gjennom WooCommerce-oppdateringer.

Shortcode på 30 linjer: er det verdt det

Informasjonskapselen woocommerce_recently_viewed er data butikken din allerede samler inn. En shortcode på 30 linjer gjør den om til en fungerende «nylig sett»-blokk uten programtillegg og ekstra databasespørringer.

• Hvis du har en butikk med 50+ produkter, plasser shortcoden på handlekurvsiden og prøv en A/B-test med en kontrollgruppe uten blokken.
• Hvis du bruker aggressiv mellomlagring, ekskluder siden med shortcoden eller aktiver fragment caching.
• Hvis den besøkende ikke har sett produkter, viser shortcoden stille en nøytral melding og ødelegger ikke layouten.

Legg til [recently_viewed_products] på nettstedet ditt og sjekk i et inkognito-nettleservindu: åpne et par produkter, gå deretter til siden med shortcoden. Hvis blokken ikke viser det du så på, sjekk innstillingene for mellomlagring, mest sannsynlig er det årsaken. Hvilken metode for å vise viste produkter bruker du, shortcode, programtillegg eller temakrok? Skriv i kommentarene.