Woocommerce

Recommendations

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

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

Per tutte le nostre Best Practices su quali Recommendations utilizzare, leggi questo articolo.

Configurazione dello Slider #

Le Recommendations vengono create tramite Elements che fanno riferimento a un Design. Di seguito trovi la guida base per configurare un Element.

Seguendo i passaggi presenti in my.clerk.io > Settings > Setup Guides verranno creati automaticamente gli Elements secondo le nostre Best Practices.

Crea Design #

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

Un design può essere riutilizzato per un numero illimitato di elementi Recommendations che crei.

Design Editor #

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

Code Design #

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

Se vuoi un design di partenza, controlla il template Slider qui sotto.

Crea Element #

Contiene tutte le impostazioni necessarie per visualizzare le Recommendations e renderle integrabili nel tuo sito web. Segui questi passaggi per ogni banner Recommendations che vuoi creare.

  1. Vai su Recommendations > Elements.
  2. Clicca su New Element.
  3. Assegna un nome descrittivo. Consigliamo di nominarlo in base alla pagina e alla logica che vuoi usare. Es: “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona la logica 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 che vuoi mostrare.
  6. Clicca su Save in cima alla pagina.

Aggiunta 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:
    • Utilizzare injection ti permette di inserire il codice tramite un selettore CSS.
    • Utilizzare embedded code ti consente di inserire manualmente il codice nel tuo sito web.
  3. Scegli l’opzione più semplice per te.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona WooCommerce. Questo compilerà automaticamente il codice embed con i corretti shortcode WooCommerce.

Configurazione Plugin #

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

  1. Accedi al backend di WooCommerce.
  2. Seleziona Clerk nel menu laterale sinistro.
  3. Trova l’impostazione Element che desideri attivare.
  4. Seleziona la checkbox Enabled.
  5. Assicurati che il campo Element contenga il nome del tuo Element Recommendation (escludendo “@”). È riportato all’interno del codice embed come nome del template, es. data-template=@product-page-alternatives.

Configurazione my.clerk.io #

  1. Vai su Recommendations > Elements.
  2. Seleziona il contenuto scelto.
  3. Apri la scheda Insert into website.
  4. Qui hai due opzioni:
    • Utilizzare injection ti permette di inserire il codice usando un selettore CSS.
    • Utilizzare embedded code ti consente di inserire manualmente il codice nel tuo sito web.
  5. Scegli l’opzione più semplice per te.
  6. Per embedded code, aggiungi eventuale logica frontend necessaria per inserire, ad esempio, un ID prodotto o categoria. Questo dipende dalla logica scelta.

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

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

Pagine #

Qui sotto sono elencate le pagine specifiche dove inserire le Recommendations e quali tipologie utilizzare per rispettare le nostre Best Practices.

Homepage #

  1. Su my.clerk.io, crea 3 Elements con le seguenti logiche:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserisci i codici embed nel template/blocco della homepage.

Se desideri mostrare tutti i banner uno sopra l’altro, inserisci tutti i codici embed nella stessa posizione. Se vuoi suddividerli nella Home Page, ripeti il processo più volte.

Category Page #

  1. Su my.clerk.io, crea un Element con la logica Bestsellers In Category.
  2. Nel menu a tendina Insert into website > Choose your platform, seleziona WooCommerce e copia il codice embed.
  3. Inserisci il codice embed nel template della tua pagina categoria o usa le impostazioni del plugin per abilitarlo.

Product Page #

  1. Su my.clerk.io, crea 2 Elements con le seguenti logiche:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Dal menu a tendina Insert into website > Choose your platform, seleziona WooCommerce per ciascuno e copia i codici embed.
  3. Inserisci i codici embed nel template della tua pagina prodotto o utilizza le impostazioni del plugin per abilitarli.

Add-To-Basket Step #

  1. Su my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Assegnagli il nome “Add-To-Basket / Others Also Bought”. È importante per il funzionamento corretto del codice embed.
  3. Clicca su Save in cima alla pagina.
  4. Nel backend WooCommerce, dal menu laterale sinistro, vai su Pages.
  5. In cima alla pagina, clicca su Add New.
  6. Assegna alla pagina powerstep un nome significativo, ad esempio “Prodotto aggiunto al carrello!”, poiché questo verrà visualizzato come titolo sulla tua powerstep.
  7. Nel campo di testo principale, inserisci [clerk-powerstep], e clicca su Publish.
  8. Vai su Clerk > Clerk Settings nel menu laterale e trova Powerstep Settings.
  9. Inserisci nel campo Element gli ID degli Elements creati, separati da virgole. L’ID è riportato all’interno del codice embed come nome del template, 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 hai problemi legati alla powerstep, consulta questa guida.

Cart Page #

  1. Su my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Nel menu a tendina Insert into website > Choose your platform, seleziona WooCommerce e copia il codice embed.
  3. Inserisci il codice embed nel template della pagina carrello o usa le impostazioni del plugin per abilitarlo.

Exit Intent #

  1. Su my.clerk.io, crea un Element con la logica Visitor Recommendations.
  2. Puoi attivarlo tramite plugin o manualmente. Trovi i passaggi per entrambe le opzioni sotto.

Configurazione Plugin #

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

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

  2. Scegli una logica - 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 preferisci configurare manualmente l’Exit-Intent, segui questi passaggi:

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

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

  3. Scegli una logica - consigliamo “Visitor Recommendations”.

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

  5. Aggiungi data-exit-intent="true" al codice embed che hai appena inserito in class-clerk-visitor-tracking.php. Come segue:

<!-- 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 che contengono data-exit-intent="true" attiveranno il pop up di exit intent.

Template di Partenza #

Se vuoi utilizzare code designs, questi template ti aiuteranno a iniziare.

Slider Code #

Questo template mostrerà uno slider standard con varie informazioni sui prodotti, 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.