Woocommerce

Recommendations

Generale #

> Nota: se si utilizza un editor di shortcode per le pagine di Woocommerce, si consiglia di utilizzare questa guida.

Le Raccomandazioni di Clerk.io possono essere installate su qualsiasi pagina del negozio web, per aiutare i clienti a trovare i prodotti giusti.

Con la Guida all’installazione, è possibile vedere su quali pagine installare le raccomandazioni e quali tipi di raccomandazioni utilizzare, per mettere in atto la nostra Best Practice.

Dal menu principale, iniziate facendo clic su Iniziare a lavorare.

1. Creare un progetto standard #

La prima cosa da fare è creare un Design standard per i vostri cursori.

È possibile utilizzare la Guida all’installazione alla voce Raccomandazioni - Creare un design per i cursori delle raccomandazioni_ - per creare rapidamente un design che abbia la stessa combinazione di colori e lo stesso stile del vostro negozio web.

Fare clic su Publish quando si è soddisfatti dello stile.

È possibile modificarlo facilmente in seguito, sotto Raccomandazioni - Progetti nel menu di sinistra.

2. Scegliere le raccomandazioni da utilizzare #

Successivamente, ogni fase della Guida all’installazione si concentra su una specifica pagina del webshop.

Esse contengono informazioni su

  • Perché le raccomandazioni sono importanti nella pagina._

  • Quali tipi di raccomandazioni utilizzare._

  • In quale punto della pagina dovrebbero essere collocate._**

Fare clic su ciascun tipo di raccomandazione che si desidera utilizzare e seguire i passaggi.

Tenete presente che facendo solo clic su ogni blocco di Raccomandazioni diventeranno verdi come se fossero installate - non lo sono - dovete comunque fare clic e seguire i passaggi.

3. Inserimento delle raccomandazioni #

Dopo aver scelto quali raccomandazioni utilizzare per una pagina, è possibile aggiungerle al proprio webshop.

3.1 Inserimento con estensioni o codici incorporati #

Alcune pagine consentono di aggiungere raccomandazioni direttamente tramite l’estensione o il codice incorporato:

Ecco le pagine che consentono entrambi i tipi di integrazione:

- Aggiungi raccomandazioni alla pagina del tuo prodotto

- Aggiungi raccomandazioni alla pagina del carrello_

- Mostra i prodotti più popolari nelle pagine delle categorie_

Fare clic su ciascuno di essi e scegliere il metodo che si desidera utilizzare per l’integrazione e seguire i passaggi.

Ecco un esempio di come aggiungere raccomandazioni alla pagina del prodotto:

Metodo 1: con l’estensione (seguire i passi)

Fare clic su Fatto

- Metodo 2: con embedcode (seguire i passi)

Cliccare su FATTO

Alcuni codici embed richiedono variabili come product o category-IDs. In questi casi, è sufficiente scegliere WooCommerce dal menu a tendina Choose Platform, prima di copiare il codice embed.

3.2 Inserimento solo con estensione #

Queste pagine consentono un’integrazione solo attraverso l’estensione:

- Mostra raccomandazioni per l’aggiunta al carrello

Aggiungi raccomandazioni per l’uscita

Fare clic su ciascuno di essi e seguire i passaggi.

Ecco un esempio di come mostrare i consigli per l’aggiunta al carrello:

Fare clic su FATTO

3.3 Inserimento solo con codici incorporati #

Queste pagine consentono solo un’integrazione con embedcode:

- Aggiungi raccomandazioni alla tua home page

Aggiungi raccomandazioni di contenuti al tuo blog o alle tue notizie

Per ogni tipo di raccomandazione, è sufficiente copiare il codice embed e inserirlo nel file che genera la pagina corrispondente nel vostro negozio web.

Ecco un esempio di come aggiungere raccomandazioni alla vostra home page:

Cliccare su FATTO

È possibile modificare facilmente il contenuto in un secondo momento, sotto Raccomandazioni - Contenuto nel menu di sinistra.

Cambiamento di contenuto

Dopo aver abilitato le funzioni, sarà possibile visualizzare la funzione RACCOMANDAZIONI di Clerk.io sul proprio negozio web.

Inserimento tramite shortcode #

1. Integrazione degli shortcode #

Se si utilizza un editor di shortcode come Elementor, è possibile che il nostro normale codice di raccomandazione non venga visualizzato a causa della diversa sintassi dell’ID prodotto in Elementor rispetto a un normale blocco HTML.

Se si utilizzano gli hook, è possibile andare in Aspetto -> Layout personalizzati -> Inserire lo shortcode nell’hook che appartiene a Clerk (nel caso in cui uno sviluppatore possa crearli se vuole che Clerk sia un hook).

Per inserire il codice, sostituire:

<span class="clerk" data-template="@product-page-alternatives" data-products="[<?php echo $product->get_id(); ?>]">
</span>

Con:

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

Provate prima con le parentesi semplici e poi, se non funziona, con le parentesi doppie.

<span class="clerk" data-template="@category-page-popular" data-category="[ [clerk_category_id] ]"></span>

Se questo non funziona, potete provare questi:

<span class="clerk" data-template="@product-page-alternatives" data-products="[<?php the_ID(); ?>]"></span>

<span class="clerk" data-template="@product-page-others-also-bought" data-products="[<?php the_ID(); ?>]"></span>

2. Inserimento manuale del codice #

Se non è possibile inserire lo shortcode o non si utilizza alcun tipo di editor, andare in Aspetto→ Personalizzazione→ Fare clic sulla pagina del prodotto e seguire questi passaggi:

Widget → Shopsidebar 1 → Aggiungi widget → Impiegato Contenuto

3. Costruttore di panettiere WP #

Integrazione del file del tema

Aggiunta dello slider della pagina del prodotto a tutte le pagine:

Apparenza - Theme File Editor - WooCommerce - Content-single-product.php

(o un file simile a quello in cui si trova la pagina del prodotto)

Inserire il codice span nel file in cui si desidera che venga visualizzato. Simile all’accesso FTP.

<span class="clerk" data-template="@product-page-alternatives" data-products="[<?php the_ID(); ?>]"></span>

<span class="clerk" data-template="@product-page-others-also-bought" data-products="[<?php the_ID(); ?>]"></span>

Fase di aggiunta al cestino #

  1. Se non l’avete ancora fatto, create il contenuto che volete usare nel passo Aggiungi al carrello (Power Step).

  2. Nel backend di WooCommerce, andate in Pagine_.

  3. Nella parte superiore della pagina, fare clic su Aggiungi nuovo.

  4. Assegnate alla pagina powerstep un nome significativo, come “Prodotto aggiunto al carrello!”, che verrà visualizzato come titolo sul powerstep.

  5. Nel campo di testo grande, digitare [clerk-powerstep] e premere Publish.

6. Andare a Clerk -> Clerk Settings nel menu laterale e trovare Powerstep Settings.

7. Inserire gli ID dei blocchi di contenuto creati, separati da virgole, in

Content.

Gli ID dei blocchi di contenuto creati si trovano nel backend di Clerk (my,clerk.io), in Raccomandazioni -> Contenuto -> Modifica (il numero di contenuti varia da 1 a 4 per la fase Aggiungi al carrello):

Ecco un esempio di come trovare l’ID del contenuto:

8. Scegliere il nome della pagina appena creata, sotto Powerstep Page

e selezionare Abilitato.

9. Fare clic su Salva impostazioni.

OPZIONALE

Se il Powerstep non viene ancora visualizzato, potrebbe essere necessario disattivare l’impostazione Cart Redirect di WooCommerce.

Per farlo, andare su

WooCommerce -> Impostazioni -> Prodotti e trovare Comportamento dell’aggiunta al carrello.

Assicurarsi che entrambe le caselle siano deselezionate e fare clic su Salva modifiche in fondo alla pagina.

Se la pagina Aggiungi al carrello viene visualizzata due volte:_

Se si verifica un problema in cui il Powerstep viene visualizzato due volte, è necessario dividere la pagina per risolvere il problema.

  • Nel backend di WooCommerce, andate alla pagina Powerstep che avete creato in Pages al punto uno .

  • Scegliere “Shortcodes” nell’angolo in alto a destra, quindi fare clic su “Row / Columns”.

  • Quindi, fare clic su “OK” nel pop-up che appare.
  • Infine, spostare [clerk-powerstep] all’interno dei tag [row] [col] e [/row] [/col] e fare clic su Salva.

Intento di uscita #

Il popup Exit Intent reagisce quando un visitatore cerca di lasciare il vostro negozio web. Si apre** e mostra prodotti interessanti, convertendo eventualmente il visitatore uscente in un cliente acquirente.

Impostazione con il plugin #

Dalla v1.3.8 del plugin WooCommerce, Exit-Intent può essere attivato direttamente dal plugin.

La configurazione è in 5 passi:

  1. Creare un nuovo Contenuto del sito in my.clerk.io e nominarlo “Exit Intent “.

  2. Scegliete una logica per essa - noi suggeriamo “Raccomandazioni dei visitatori “.

  3. Nel backend di WooCommerce, andate su Clerk nel menu laterale e trovate Impostazioni dell’ingresso di uscita.

  4. Selezionate la casella Abilitato e assicuratevi che il campo Template contenga “exit-intent”.

  5. Fare clic su Salva impostazioni per attivarlo.

Ora verrà visualizzato il pop-up dell’intento di uscita quando qualcuno cercherà di uscire dalla pagina, la prima volta.

Impostazione manuale #

Se si utilizza una versione precedente del plugin o si desidera configurare manualmente l’Exit-Intent, seguire questi passaggi:

  1. Creare un nuovo Contenuto del sito web in my.clerk.io

  2. Scegliete una logica per esso - Noi suggeriamo “Raccomandazioni dei visitatori “.

  3. Da Insert Into Website, copiare il codice embed fornito in questo file di WooCommerce, proprio sopra il tracking-script di Clerk.io:

    wp-content->plugins->clerkio->includes->class-clerk-visitor-tracking.php

  4. Aggiungere: data-exit-intent=“true “ al codice embed appena inserito. In questo modo:

Codice incorporato di esempio

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Inserito in class-clerk-visitor-tracking.php

Ricordarsi di stilizzare il contenuto in Designs su my.clerk.io

Tutte le raccomandazioni contenenti il data-exit-intent=“true “ attiveranno il pop-up dell’intento di uscita.

Aggiunta di raccomandazioni con ganci visivi #

All’interno di WooCommerce, alcune pagine del sito web vengono create utilizzando i Visual Hooks invece di essere rese da un file HTML. Per aggiungere contenuti alle pagine create tramite Visual Hooks, è necessario inserire il contenuto di Clerk.io all’interno del file functions.php attivo del negozio web.

Il file functions.php si trova solitamente nel seguente percorso:

/wp-content/themes/YOUR-THEME-NAME-child-theme/functions.php

Per esempio, per aggiungere uno slider Raccomandazioni con il contenuto @product-page-alternatives alla vostra pagina Prodotto, dovrete includere il seguente codice all’interno del tag principale <php? ?> in functions.php:

// CLERK ADD PRODUCT PAGE SLIDER

add_action ( 'woocommerce_after_single_product', 'clerk_alternatives',5
);

function clerk_alternatives() {
$clerk_id = wc_get_product()->get_id();
echo "<span class='clerk'
data-template='@product-page-alternatives'
data-products='[$clerk_id]'>
</span>";
}

E un altro esempio per aggiungere un cursore Raccomandazioni alla pagina Aggiungi al carrello:

// CLERK ADD CART SLIDER
add_action ( 'woocommerce_after_cart_contents', 'clerk_cart_slider',5);

function clerk_cart_slider() {
 $clerk_id = get_queried_object()->term_id;
 echo "<span class="clerk"
data-template="@cart-others-also-bought"
data-products="[<?php $items = WC()->cart->get_cart(); foreach( $items as $cart_item ){ $product_id = $cart_item['product_id']; echo $product_id; if ($cart_item != end($items)) {echo ",";} } ?>]"></span>";
}

Per aggiungere i propri cursori di raccomandazioni alle pagine precedenti, ricordarsi di sostituire il codice all’interno dei tag con il codice di incorporamento fornito nel contenuto delle raccomandazioni in my.clerk.io, come di seguito:

Il valore impostato in add_action(), 5 in questo esempio, indica a WooCommerce la priorità del Contenuto aggiunto, che a sua volta influisce sull’anticipo con cui il Contenuto sarà visualizzato in quel Gancio visivo. Nota: quando si imposta la priorità, WooCommerce accetta solo multipli di 5.

Ulteriori informazioni sulle pagine del sito web di WooCommerce che utilizzano gli Agganci visivi:

https://www.businessbloomer.com/category/woocommerce-tips/visual-hook-series/