Woocommerce

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in WooCommerce.
Raccomandazioni 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 Raccomandazioni utilizzando il plugin WooCommerce.

Per le nostre migliori pratiche su quali Raccomandazioni utilizzare, leggi questo articolo.

Crea Design #

Le Raccomandazioni vengono mostrate come uno slider per impostazione predefinita. Questo consente ai clienti di vedere più prodotti con meno clic. Puoi utilizzare il Design Editor per configurarlo visivamente, oppure utilizzare design di codice.

Un design può essere riutilizzato per qualsiasi numero di Contenuti Raccomandazioni che crei.

Design Editor #

  1. Vai a Raccomandazioni > Design e clicca su Nuovo Design.
  2. Scegli Slider Prodotto
  3. Dall’elenco dei modelli di design, scegli quello con cui vuoi iniziare.
  4. Dagli un nome e clicca su Crea design.
  5. Apporta le modifiche che desideri al design.

Design di Codice #

  1. Vai a Raccomandazioni > Design e clicca su Nuovo Design.
  2. Scegli Altri design > Vuoto > Codice.
  3. Dagli un nome e clicca su Crea design.
  4. Crea un design di codice da zero utilizzando codice Liquid.

Se desideri un design di partenza, controlla il modello Slider più in basso.

Crea Contenuto #

Questo contiene tutte le impostazioni utilizzate per mostrare lo slider delle Raccomandazioni e renderlo incorporabile nel tuo sito web. Segui questi passaggi per ogni banner di Raccomandazioni che desideri creare.

  1. Vai a Raccomandazioni > Contenuto.
  2. Clicca su Nuovo Contenuto.
  3. Dagli un nome descrittivo. Ti consigliamo di nominarlo in base alla pagina e alla logica che desideri utilizzare. Ad esempio, “Home Page / Raccomandazioni per Visitatori”.
  4. In Tipo di contenuto, seleziona la logica di prodotto che desideri utilizzare dal menu a discesa. Puoi vedere una panoramica di tutte le logiche di prodotto qui.
  5. In Design seleziona il design che hai creato dal menu a discesa e scegli il numero di prodotti che desideri mostrare.
  6. Clicca su Salva in cima allo schermo.

Aggiungi al Sito Web #

Per aggiungere le Raccomandazioni Clerk sul tuo sito web, hai tre diverse opzioni: Iniezione, Codice incorporato, e tramite il Plugin.

Configurazione del Plugin #

Questa opzione è disponibile per le pagine Categoria, Carrello, Prodotto, Intento di Uscita e Powerstep.

  1. Vai al backend di WooCommerce.
  2. Seleziona Clerk nel menu laterale sinistro.
  3. Trova l’impostazione Contenuto che desideri attivare.
  4. Clicca sulla casella di controllo etichettata Abilitato.
  5. Assicurati che il campo Contenuto contenga il nome del tuo Contenuto Raccomandazione (escludendo “@”). È elencato all’interno del codice di incorporamento del Contenuto come nome del tuo modello di dati, ad esempio data-template=@product-page-alternatives.

Ecco un esempio completo di codice di incorporamento delle Raccomandazioni, con un ID prodotto di esempio:

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

Configurazione di Clerk #

  1. Vai a Raccomandazioni > Contenuto.
  2. Seleziona il contenuto scelto.
  3. Apri la scheda Inserisci nel sito web.
  4. Qui hai due opzioni:
    • Utilizzare l’iniezione consente di inserire il codice utilizzando un selettore CSS.
    • Utilizzare il codice incorporato consente di inserire il codice manualmente nel tuo sito web.
  5. Scegli l’opzione che è più facile per te da usare.
  6. Per il codice incorporato, aggiungi qualsiasi logica frontend necessaria per inserire, ad esempio, un ID prodotto o categoria. Questo dipende dalla logica che scegli.

Powerstep #

Per attivare il Powerstep aggiungi al carrello, segui questi passaggi:

  1. Se non lo hai già fatto, crea il Contenuto che desideri utilizzare nel tuo Powerstep Aggiungi al Carrello.
  2. Nel backend di WooCommerce, nel menu laterale sinistro, vai a Pagine.
  3. In cima alla pagina, clicca su Aggiungi Nuovo.
  4. Dai alla pagina del powerstep un nome significativo, come “Prodotto aggiunto al carrello!”, poiché questo verrà visualizzato come titolo del tuo powerstep.
  5. Nel grande campo di testo, digita [clerk-powerstep], e clicca su Pubblica.
  6. Vai a Clerk > Impostazioni Clerk nel menu laterale e trova Impostazioni Powerstep.
  7. Inserisci nel campo Contenuto gli ID dei blocchi di Contenuto che hai creato, separati da virgole. L’ID è elencato all’interno del codice di incorporamento del Contenuto come nome del tuo modello di dati, ad esempio data-template=@power-step-others-also-bought.
  8. Seleziona il nome della pagina che hai creato sotto Pagina Powerstep e controlla Abilitato.
  9. Clicca su Salva Impostazioni.

Se hai problemi relativi al powerstep, controlla questa guida.

Intento di Uscita #

Il popup Intento di Uscita reagisce quando un visitatore cerca di lasciare il tuo webshop. Mostra prodotti interessanti, convertendo possibilmente un visitatore in uscita in un cliente acquirente.

Puoi attivarlo tramite plugin o manualmente. Di seguito sono riportati i passaggi per entrambe le opzioni.

Configurazione del Plugin #

Per impostare l’Intento di Uscita tramite il plugin, segui questi 5 passaggi:

  1. Crea un nuovo Contenuto in my.clerk.io e chiamalo Intento di Uscita.

  2. Scegli una logica per esso - Ti suggeriamo “Raccomandazioni per Visitatori”.

  3. Nel backend di WooCommerce, vai a Clerk nel menu laterale e trova Impostazioni Intento di Uscita.

  4. Controlla Abilitato, e assicurati che il campo Template contenga “exit-intent”.

  5. Clicca su Salva Impostazioni per attivarlo.

Configurazione di Clerk #

Se desideri configurare manualmente l’Intento di Uscita, segui questi passaggi:

  1. Crea un nuovo Contenuto in my.clerk.io e chiamalo Intento di Uscita.

  2. Stilizza il tuo Contenuto in Design su my.clerk.io

  3. Scegli una logica per esso - Ti suggeriamo “Raccomandazioni per Visitatori”.

  4. Da Inserisci nel Sito Web, copia il codice di incorporamento fornito in questo file WooCommerce, appena sopra lo script di tracciamento Clerk.io: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Aggiungi data-exit-intent="true" al codice di incorporamento che hai appena posizionato in class-clerk-visitor-tracking.php. In questo modo:

<!-- Inizio dello strumento di personalizzazione e-commerce Clerk.io - 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>
<!-- Fine dello strumento di personalizzazione e-commerce Clerk.io - www.clerk.io -->

Nota: Tutte le raccomandazioni contenenti data-exit-intent="true" attiveranno il popup di intento di uscita.

Modello di Partenza #

Se desideri utilizzare design di codice, questo modello può aiutarti a iniziare. Renderà 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">In Offerta</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">Esaurito</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">Aggiungi al Carrello</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.