Vierailija saapuu kauppaan, selaa viittä tuotetta, sulkee välilehden ja unohtaa sivuston minuutissa. Tämä on tuttu näky jokaiselle WooCommerce-omistajalle. "Äskettäin katsotut" -lohko ratkaisee tämän ongelman: yksi klikkaus tuttuun korttiin palauttaa vierailijan takaisin ostopolulle.

WooCommerce kirjoittaa oletuksena katsottujen tuotteiden ID:t woocommerce_recently_viewed-evästeeseen. Tämä data on jo kauppasi palvelimella, erillistä seurantalisäosaa ei tarvita. Jäljellä on enää evästeen lukeminen ja tuotteiden näyttäminen. Alla on valmis shortcode, joka tekee tämän 30 rivillä modernia PHP:tä.

💡 Pikaopas:

• Ymmärrä, miten WooCommerce tallentaa katselut evästeeseen, yksi lyhyt kappale teoriaa
• Kopioi [recently_viewed_products]-shortcode lapsiteeman functions.php-tiedostoon tai Code Snippetsiin
• Sijoita lohko ostoskorisivulle, tuotesivupalkkiin tai tyhjän haun jälkeen ja tuo vierailijat takaisin

Miten WooCommerce tallentaa katseluhistorian

Kun vierailija avaa tuotesivun, WooCommerce lisää hiljaisesti tuotteen ID:n woocommerce_recently_viewed-evästeeseen. Muoto: merkkijono, jossa erottimena on |, esimerkiksi 123|456|789. Vanhin merkintä on vasemmalla, uusin oikealla. Eväste on istuntokohtainen: se säilyy, kunnes selain suljetaan.

Meidän ei tarvitse kirjoittaa omaa katseluseurantaa. WooCommerce kerää datan jo. Shortcoden tehtävä: lue merkkijono, pilko se ID:iksi, suodata vain olemassa olevat ja julkaistut tuotteet ja välitä ne sisäänrakennetulle [products]-mekanismille.

Tämä lähestymistapa antaa natiivin WooCommerce-merkinnän: responsiivisen ruudukon, varasto- ja hintakäsittelyn, "Lisää ostoskoriin" -painikkeen, kaiken mitä tavallinen [products]-shortcode osaa, ilman näyttömallin uudelleentoteutusta.

Valmis koodi: [recently_viewed_products] -shortcode

Lisää tämä koodi lapsiteeman functions.php-tiedostoon tai Code Snippets -lisäosan kautta. Se rekisteröi [recently_viewed_products]-shortcoden kahdella parametrilla: per_page ja 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
}

Mihin koodi lisätään

**Lapsiteeman functions.php, paras vaihtoehto. Koodi säilyy pääteeman päivityksissä ja on versiohallinnassa yhdessä muun sivuston räätälöinnin kanssa.

Code Snippets -lisäosa, jos lapsiteemaa ei ole. Asenna Code Snippets WordPress.orgista hakemistosta, luo uusi pätkä, liitä koodi ja aktivoi. Toimii minkä tahansa teeman kanssa.

Älä lisää koodia pääteeman functions.php-tiedostoon: menetät sen ensimmäisessä päivityksessä.

Rivikohtainen erittely

• shortcode_atts() yhdistää käyttäjän parametrit oletuksiin, tavallinen WordPress-funktio shortcode-attribuuttien käsittelyyn. Toisin kuin vanhentunut extract(), se ei luo muuttujia taulukosta eikä sotke näkyvyysaluetta.
• wp_unslash() poistaa suojaavat kenoviivat evästearvosta, vakiokäytäntö luettaessa superglobaaleja WordPressissä.
• explode('|', ...) pilkkoo merkkijonon 123|456|789 taulukoksi merkkijono-ID:itä.
• array_map('absint', ...) muuttaa jokaisen ID:n ei-negatiiviseksi kokonaisluvuksi, suoja evästeen roskalta.
• array_filter() heittää pois nollat ja tyhjät arvot: tuotteet, joita ei enää ole tietokannassa, karsitaan ID-tasolla.
• array_slice() jättää vain N viimeisintä katselua. Eväste kirjoittaa vanhat ID:t ensin, tuoreet viimeiseksi, joten leikkaamme taulukon alusta.
• implode(',', ...) kokoaa merkkijonon 123,456,789 sisäänrakennetun shortcoden ids-parametria varten.
• do_shortcode('[products ids="..."]') käynnistää natiivin WooCommerce-mekanismin: pikkukuvat, otsikot, hinnat, "Lisää ostoskoriin" -painikkeen, kaikki tavallisella teemamerkinnällä. Loppuunmyytyjä tuotteita ei automaattisesti näytetä.

Ei tarvetta koota käsin <ul><li><a>.... Sisäänrakennettu [products] osaa jo kaiken tämän, ja WooCommerce-tiimi ylläpitää sitä.

Shortcoden käyttö: parametrit ja esimerkit

Sijoita [recently_viewed_products] minne tahansa, missä WordPress käsittelee shortcodeja: sivu, artikkeli, tekstivimpain, Shortcode-lohko editorissa.

Esimerkkejä:

• [recently_viewed_products per_page="3" columns="3"], kompakti kolmen tuotteen rivi sivupalkkiin
• [recently_viewed_products per_page="8" columns="4"], kaksi neljän tuotteen riviä ostoskorisivulle

Jos vierailija ei ole vielä katsonut yhtään tuotetta, shortcode näyttää neutraalin viestin "Et ole vielä katsonut tuotteita", jonka voit korvata omalla tekstilläsi esc_html__()-rivillä.

Käytännössä asennus vie kolme minuuttia. Yllä olevalla videolla vaiheittainen erittely WooCommerce-shortcodejen käytöstä ja niiden sijoittamisesta sivustolle.

Mihin shortcode kannattaa sijoittaa: mikä toimii

Ostoskorisivu, vahvin sijoitus. Vierailija on jo kerännyt tuotteita, mutta näkee ennen kassalle menoa muistutuksen aiemmin katsomistaan. Kaupoissa, joissa on yli 50 tuotetta, tämä palauttaa huomattavan osan hylätyistä katseluista takaisin ostoskoriin.

Tuotesivun sivupalkki. Ostaja vertailee useita malleja, "katsomasi"-lohko pitää vaihtoehdot silmien edessä. Toimii erityisen hyvin elektroniikka- ja vaatekaupoissa, joissa vertailu on osa valintaprosessia.

Tyhjän haun jälkeen. Paras varasuunnitelma: "Mitään ei löytynyt, mutta tässä on mitä katsoit aiemmin." Tyhjän sivun sijaan vierailija näkee tuttuja tuotteita ja jää todennäköisemmin sivustolle.

Lisää shortcode sivupalkin tekstivimpaimen kautta tai Shortcode-lohkolla Gutenberg-editorissa. Teemakoukkuihin (woocommerce_after_cart, woocommerce_before_shop_loop) vain, jos olet varma mallipohjien muokkaamisesta.

⁉️🤔 Usein kysytyt kysymykset

Toimiiko shortcode välimuistituksen kanssa?

Shortcode riippuu woocommerce_recently_viewed-PHP-evästeestä, joka luetaan palvelinpuolella. Jos sivu on välimuistitettu HTTP-tasolla (Varnishin, NGINX FastCGI Cachen tai WP Rocketin kaltaisen lisäosan kautta), myös shortcoden sisältö välimuistitetaan, ja yksi vierailija saattaa nähdä "jonkun toisen" katsomat tuotteet. Ratkaisu: sulje shortcoden sisältävät sivut välimuistituksen ulkopuolelle tai ota käyttöön WooCommerce-yhteensopiva välimuistitila (ESI tai fragmenttivälimuistitus).

Voinko näyttää katsotut tuotteet ilman shortcodea, koukun kautta?

Kyllä. sd_recently_viewed_products()-funktio palauttaa merkkijonon, sitä voi kutsua suoraan missä tahansa teemakoukussa: echo sd_recently_viewed_products( array( 'per_page' => 4 ) );. Sopivia koukkuja ovat woocommerce_after_cart, woocommerce_after_single_product ja woocommerce_before_shop_loop. Huomioi välimuistitus, jos sivu on kokonaan välimuistitettu.

Kuinka monta tuotetta evästeeseen tallennetaan?

Oletuksena WooCommerce tallentaa 10 viimeksi katsotun tuotteen ID:t. Tämä on asetettu WooCommercen koodissa, eikä sitä voi määrittää käyttöliittymän kautta. Shortcode määrittää per_page-parametrilla, kuinka monta näistä 10:stä näytetään.

Miksi tämä lähestymistapa on parempi kuin erillinen lisäosa?

30 rivin koodi ei lisää ylimääräisiä tietokantakyselyitä, se käyttää samaa evästettä, jonka WooCommerce jo kirjoitti. Erillinen lisäosa tuo usein oman seurantamekanisminsa (ylimääräisiä evästeitä, JS-tapahtumia, tietokantatauluja). Tyypilliselle kaupalle shortcode kattaa skenaarion täysin, paisuttamatta hallintaa.

Miksi käyttää [products], ei omaa WP_Query?

Sisäänrakennettu [products] antaa teeman responsiivisen ruudukon, hinnat, "Lisää ostoskoriin" -painikkeen, varastokäsittelyn ja loppuunmyyty-statuksen ilmaiseksi. Manuaalisella WP_Query-kyselyllä joutuisit toteuttamaan kaiken tämän uudelleen ja ylläpitämään sitä WooCommerce-päivitysten läpi.

Shortcode 30 rivissä: onko sen arvoista

woocommerce_recently_viewed-eväste on dataa, jota kauppasi jo kerää. 30-rivinen shortcode muuttaa sen toimivaksi "äskettäin katsotut" -lohkoksi ilman lisäosia ja ylimääräisiä tietokantakyselyitä.

• Jos sinulla on kauppa, jossa on yli 50 tuotetta, sijoita shortcode ostoskorisivulle ja kokeile A/B-testausta kontrolliryhmällä, jolla lohkoa ei ole.
• Jos käytät aggressiivista välimuistitusta, sulje shortcoden sisältävä sivu välimuistituksen ulkopuolelle tai ota fragmenttivälimuistitus käyttöön.
• Jos vierailija ei ole katsonut tuotteita, shortcode näyttää hiljaisesti neutraalin viestin eikä riko asettelua.

Lisää [recently_viewed_products] sivustollesi ja tarkista incognito-selainikkunassa: avaa pari tuotetta ja siirry sitten shortcoden sisältävälle sivulle. Jos lohko ei näytä katsomiasi tuotteita, tarkista välimuistiasetuksesi, todennäköisimmin syy on siellä. Mitä tapaa käytät katsottujen tuotteiden näyttämiseen, shortcodea, lisäosaa vai teemakoukkua? Kirjoita kommentteihin.