Woocommerce

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in WooCommerce.
Recommendations WooCommerce

Clerk.io offre più di 23 diversi tipi di logiche di prodotto, rendendo possibile mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare con le Recommendations utilizzando il plugin WooCommerce.

Per le nostre Best Practice complete su quali Recommendations utilizzare, leggi questo articolo.

Configurazione dello Slider #

Le Recommendations vengono create con Sliders che fanno riferimento a un Design. Di seguito trovi la guida di base per configurare uno Slider.

Seguendo i passaggi in my.clerk.io > Settings > Setup Guides verranno creati automaticamente gli Sliders per le nostre Best Practice.

Crea Design #

Le Recommendations vengono mostrate come uno slider di default. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi configurarlo visivamente usando il Design Editor, oppure usare i code designs.

Un design può essere riutilizzato per qualsiasi numero di slider di Recommendations che crei.

Design Editor #

  1. Vai su Recommendations > Designs e clicca su New Design.
  2. Scegli Product Slider
  3. Dalla lista di template, scegli quello da cui vuoi partire.
  4. Dagli un nome e clicca su Create design.
  5. Apporta le modifiche che desideri al design.

Code Design #

  1. Vai su Recommendations > Designs e clicca su New Design.
  2. Scegli Other designs > Blank > Code.
  3. Dagli un nome e clicca su Create design.
  4. Crea un code design da zero usando Liquid code.

Se desideri un design di partenza, consulta il template Slider più in basso.

Crea Contenuto #

Qui sono contenute tutte le impostazioni utilizzate per mostrare le Recommendations e renderle integrabili nel tuo sito. Segui questi passaggi per ogni banner di Recommendations che vuoi creare.

  1. Vai su Recommendations > Sliders.
  2. Clicca su New Content.
  3. Assegna un nome descrittivo. Si consiglia di nominarlo in base alla pagina e alla logica che vuoi usare. Es. “Home Page / Visitor Recommendations”.
  4. In Content type, seleziona la logica di prodotto che vuoi utilizzare dal menu a tendina. Puoi vedere una panoramica di tutte le logiche prodotto qui.
  5. In Design seleziona il design creato dal menu a tendina e scegli il numero di prodotti da mostrare.
  6. Clicca su Save in alto nella schermata.

Aggiungi al sito web #

Per aggiungere le Clerk Recommendations al tuo sito web, hai tre diverse opzioni: Injection, Embedded code, e tramite il Plugin.

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usando injection puoi inserire il codice utilizzando un selettore CSS.
    • Usando embedded code puoi inserire manualmente il codice nel tuo sito web.
  3. Scegli l’opzione che ti è più comoda.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona WooCommerce. Questo precompilerà l’embedcode con i corretti shortcodes di WooCommerce.

Configurazione Plugin #

Questa opzione è disponibile per pagine Categoria, Carrello, Prodotto, Exit Intent e Powerstep.

  1. Vai nel backend di WooCommerce.
  2. Seleziona Clerk nel menu laterale a sinistra.
  3. Trova l’impostazione dello Slider che desideri attivare.
  4. Clicca sulla casella Enabled.
  5. Assicurati che il campo Content contenga il nome del tuo Recommendation Slider (escludendo “@”). È elencato all’interno dell’embed code dello Slider come data template name, ad es. data-template=@product-page-alternatives.

Configurazione my.clerk.io #

  1. Vai su Recommendations > Sliders.
  2. Seleziona il contenuto scelto.
  3. Apri la scheda Insert into website.
  4. Qui hai due opzioni:
    • Usando injection puoi inserire il codice utilizzando un selettore CSS.
    • Usando embedded code puoi inserire manualmente il codice nel tuo sito web.
  5. Scegli l’opzione che ti è più comoda.
  6. Per embedded code, aggiungi l’eventuale logica frontend necessaria per inserire, ad esempio, un ID prodotto o categoria. Dipende dalla logica che scegli.

Ecco un esempio completo di embed code per Recommendations, con un ID prodotto di esempio:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products=[123]>
</span>

Pagine #

Di seguito sono riportate le pagine specifiche in cui dovresti inserire le Recommendations, e quali tipi utilizzare, per seguire le nostre Best Practice.

Homepage #

  1. In my.clerk.io, crea 3 Sliders con le seguenti logiche:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserisci gli embedcode nel template o blocco della homepage.

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti gli embedcode nella stessa posizione. Se invece vuoi dividerli sulla Home Page, segui semplicemente più volte il processo sopra.

Pagina Categoria #

  1. In my.clerk.io, crea uno Slider con la logica Bestsellers In Category.
  2. Nel menu a tendina Insert into website > Choose your platform, seleziona WooCommerce, e copia l’embedcode.
  3. Inserisci l’embedcode nel template della pagina categoria o utilizza le impostazioni del plugin per abilitarlo.

Pagina Prodotto #

  1. In my.clerk.io, crea 2 Sliders con le seguenti logiche:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Nel menu a tendina Insert into website > Choose your platform seleziona WooCommerce per entrambi e copia gli embedcodes.
  3. Inserisci gli embedcodes nel template della pagina prodotto o utilizza le impostazioni del plugin per abilitarli.

Step Aggiungi al Carrello #

  1. In my.clerk.io, crea uno Slider con la logica Best Cross-Sell Products.
  2. Dagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante affinché l’embedcode funzioni correttamente.
  3. Clicca su Save in alto nella pagina.
  4. Nel backend WooCommerce, nel menu laterale sinistro, vai su Pages.
  5. In alto nella pagina, clicca su Add New.
  6. Assegna un nome significativo alla pagina powerstep, come “Prodotto aggiunto al carrello!”, in quanto verrà visualizzato come titolo sul tuo powerstep.
  7. Nel grande campo di testo, digita [clerk-powerstep] e clicca su Publish.
  8. Vai su Clerk > Clerk Settings nel menu laterale e trova Powerstep Settings.
  9. Inserisci nel campo Content gli ID degli Sliders creati, separati da virgole. L’ID è elencato all’interno dell’embed code dello Slider come data template name, es. data-template=@power-step-others-also-bought.
  10. Seleziona il nome della pagina creata sotto Powerstep Page e spunta Enabled.
  11. Clicca su Save Settings.

Se riscontri problemi relativi al powerstep, consulta questa guida.

Pagina Carrello #

  1. In my.clerk.io, crea uno Slider con la logica Best Cross-Sell Products.
  2. Nel menu a tendina Insert into website > Choose your platform, seleziona WooCommerce e copia l’embedcode.
  3. Inserisci l’embedcode nel template della pagina carrello o utilizza le impostazioni del plugin per abilitarlo.

Exit Intent #

  1. In my.clerk.io, crea uno Slider con la logica Visitor Recommendations.
  2. Puoi attivarlo tramite plugin o manualmente. Di seguito i passaggi per entrambe le opzioni.

Configurazione Plugin #

Per configurare Exit Intent tramite plugin, segui questi 5 passaggi:

  1. Crea un nuovo Content in my.clerk.io e chiamalo Exit Intent.

  2. Scegli una logica per esso - Consigliamo “Visitor Recommendations”.

  3. Nel backend WooCommerce, vai su Clerk nel menu laterale e trova Exit-Intent Settings.

  4. Spunta Enabled, e assicurati che il campo Template contenga “exit-intent”.

  5. Clicca su Save Settings per attivarlo.

Configurazione Manuale #

Se vuoi configurare manualmente l’Exit-Intent, segui questi passaggi:

  1. Crea un nuovo Content in my.clerk.io e chiamalo Exit Intent.

  2. Stilizza il tuo Slider in Designs su my.clerk.io

  3. Scegli una logica per esso - Consigliamo “Visitor Recommendations”.

  4. Da Insert Into Website, copia l’embed code fornito in questo file WooCommerce, appena sopra lo script di tracking di Clerk.io: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Aggiungi data-exit-intent="true" all’embed code appena inserito in class-clerk-visitor-tracking.php. Così:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'YOUR_STORE_PUBLIC_KEY'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Nota: Tutte le recommendations contenenti data-exit-intent="true" attiveranno il pop up dell’exit intent.

Template di Partenza #

Se vuoi utilizzare code designs, questi template possono aiutarti.

Codice Slider #

Questo template renderizza uno slider standard con varie informazioni sul prodotto, che puoi adattare alle tue esigenze.

HTML #

<div class="clerk-recommendations">
    <h2 class="section-title" style="text-align:center; text-transform: uppercase;"><span>{{ headline }}</span></h2>

    <div class="clerk-slider">
         {% for product in products %}
            <div class="clerk-slider-item">
                <div class="clerk-slider-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-slider-badge">On Sale</div>
                        {% endif %}
                        <div class="clerk-slider-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-slider-brand">{{ product.brand }}</div>
                        <div class="clerk-slider-name">{{ product.name }}</div>
                        
                        <div class="clerk-slider-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-slider-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-slider-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 0 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button-not-in-stock">Out of Stock</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

CSS #

.clerk-recommendations {
    margin: 1em 0;
}

.clerk-recommendations-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-slider-item {
    margin: auto;
}

.clerk-slider-product {
    position: relative;
    overflow: hidden;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-slider-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-slider-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-slider-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-slider-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-slider-brand {
    font-size: 0.9em;
    color: #757575;
}

.clerk-slider-name {
    height: 3em;
    overflow: hidden;
    color: #4a3b40;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 1em;
}

.clerk-slider-pricing {
    display: flex;

    margin-bottom: 1em;
}

.clerk-slider-price {
    flex: 1;
    color: #757575;
    font-weight: bold;
}

.clerk-slider-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-add-to-cart, .clerk-add-to-cart:hover {
    color: white;
}

.clerk-not-in-stock, .clerk-not-in-stock:hover {
    color: #4a3b40;
}

.clerk-slider-button-not-in-stock {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: white;
    color: #4a3b40;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}

.clerk-slider-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}


.clerk-load-more-button {
    display: block;
    
    width: 20em;

    margin: 1em auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: 1.2em;

    cursor: pointer;
}

@media screen and (min-width: 1100px){
    .clerk-slider-item {
        width: 20%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1100px){
    .clerk-slider-item {
        width: 25%;
    }
}

@media screen and (min-width: 414px) and (max-width: 900px) {
    .clerk-slider-item {
        width: 50%;
    }
    .clerk-slider-button, .clerk-slider-button-not-in-stock {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 413px) {
    .clerk-slider-item {
        width: 100%;
    }
}

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.