Come installare le recensioni di Klaviyo per WooCommerce

Imparerai

Scopra come installare Klaviyo Reviews sul suo negozio WooCommerce e come aggiungere il widget delle recensioni. Per conoscere tutti i passi necessari per iniziare, consulti la sezione Come iniziare con Klaviyo Reviews.

Prima di iniziare

Esistono 4 metodi per installare le recensioni di Klaviyo per WooCommerce. Quella giusta per lei dipende dal suo livello di conoscenze tecniche e dalla sua configurazione di Wordpress. Utilizzi il diagramma di flusso qui sotto per selezionare il metodo di installazione migliore per lei. 

Quando sceglie un metodo di installazione, consideri quanto segue: 

• L'aggiunta di valutazioni con stelle alle pagine delle collezioni è supportata solo per 2 metodi di installazione: plugin con editor visivo e codici brevi. 
• Consideri il suo livello di accesso all'editor in Wordpress. Non tutti gli utenti hanno la possibilità di modificare direttamente i file dei temi del sito web. Se non ha accesso al suo file functions.php o simili, utilizzi uno degli altri metodi. 
• Molti di questi metodi richiedono l'aggiunta di un altro plugin al suo sito Wordpress. Le istruzioni riportate di seguito fanno riferimento al plugin Code Snippets, ma Klaviyo non appoggia alcun plugin in particolare e non può fornire assistenza per la risoluzione dei problemi relativi ai plugin. 

Dopo aver selezionato le fasi di installazione più adatte a lei, proceda con le relative istruzioni. 

Scopra come installare le recensioni di Klaviyo per WooCommerce: 

• Installare un plugin e utilizzare l'editor di temi visivo 
• Installare un plugin, senza utilizzare l'editor del tema visivo
• Aggiunta di codici brevi
• Modificare i file del tema

Widget di recensioni disponibili

Una volta installato Klaviyo Reviews, il suo negozio visualizzerà i widget delle recensioni, che presentano i dettagli delle valutazioni e delle recensioni. 

• Widget della valutazione in stelle
  Mostra la sua valutazione attuale in stelle per un determinato prodotto e viene spesso aggiunto sotto il nome del prodotto nella pagina del prodotto o nella pagina della collezione.
  
• Widget delle recensioni dei prodotti
  Mostra un grafico che suddivide tutte le valutazioni ricevute da un prodotto, le immagini inviate dagli utenti con le recensioni e i feedback più comuni ricevuti dal prodotto.
  
  Sotto c'è un elenco di tutte le recensioni pubblicate e delle domande dei clienti, oltre a una barra di ricerca, filtri per le recensioni, un pulsante Scrivi una recensione e un pulsante Fai una domanda.
  
  Questo widget viene solitamente aggiunto in fondo alla pagina di un prodotto.
• Widget carosello di recensioni in evidenza
  Mostra le recensioni in evidenza di tutti i suoi prodotti. Può inserirlo nella sua homepage, in una pagina di recensioni indipendente o in qualsiasi altro punto del suo sito. Può anche selezionare le recensioni che vengono presentate in questo widget. Se disponibili, le immagini inviate dal cliente accompagnano ogni recensione; se non è stata inviata alcuna immagine, vengono utilizzate le immagini del suo prodotto.
  
• SEO / widget Tutte le recensioni
  Mostra tutte le sue recensioni su tutti i prodotti in un'unica pagina. Utilizzi questo widget per migliorare il suo SEO e per fornire un unico luogo ai potenziali clienti per vedere ciò che i suoi clienti attuali amano. Questo widget viene spesso aggiunto ad una pagina di recensioni indipendente del suo sito.
  

Installi un plugin e utilizzi l'editor visuale del tema 

Per utilizzare l'editor visuale del tema per aggiungere i widget di Klaviyo Reviews al suo sito, deve prima aggiungere un pezzo di codice per caricare questi blocchi drag-and-drop nel suo tema. Può utilizzare uno strumento come Code Snippets per aggiungere il codice sorgente di questi blocchi, quindi utilizzare l'editor visuale del tema per trascinare i widget di Klaviyo Reviews nel suo tema. 

Aggiungere il codice sorgente del widget delle recensioni

Queste istruzioni presuppongono che lei abbia già installato il plugin Code Snippets, ma può utilizzare un altro plugin. 

1. Selezioni Snippets > Aggiungi nuovo dalla barra laterale di Wordpress.
   
2. Nel campo Inserisci titolo qui, dia un nome chiaro allo snippet, come "Codice dei widget delle recensioni di Klaviyo".
3. Nella scheda Funzioni (PHP) della sezione Codice, aggiunga lo snippet di codice qui sotto.
4. Clicchi su Salva modifiche e Attiva.

Recensioni sul codice sorgente del widget

funzione register_klaviyo_reviews_blocks() {
    // Register the blocks
    register_block_type( 'klaviyo/product-reviews', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_product_reviews',
    ));
    register_block_type( 'klaviyo/product-star-ratings', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_star_ratings',
    ));
    register_block_type( 'klaviyo/featured-reviews', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_featured_reviews',
    ));
    register_block_type( 'klaviyo/all-reviews', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_all_reviews',
    ));
}
add_action( 'init', 'register_klaviyo_reviews_blocks' );
function enqueue_klaviyo_block_editor_assets() {
    // Registra e inserisce l'immagine del logo
    wp_register_script(
        'klaviyo-block-editor-script',
        false,
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        false,
        vero
    );
    $logo_url = plugins_url( 'img/klaviyo-logo.png', klaviyo/klaviyo.php' );
    wp_add_inline_script( 'klaviyo-block-editor-script', '
        ( function( blocchi, elemento ) {
            var el = element.createElement;
            // Aggiunge una categoria personalizzata
            blocks.updateCategory( "widget", {
                slug: "klaviyo",
                titolo: "Klaviyo",
                icona: el("img", { src: "' . $logo_url . '", stile: { width: "20px", height: "20px" } })
            } );
            blocks.registerBlockType( "klaviyo/product-reviews", {
                titolo: "Recensioni sui prodotti Klaviyo",
                icona: "admin-comments",
                categoria: "klaviyo",
                modifica: function() {
                    return el(
                       "div",
                        { className: "klaviyo-product-reviews" },
                       "Le recensioni dei prodotti Klaviyo saranno visualizzate qui"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/product-star-ratings", {
                titolo: "Valutazioni stellari di Klaviyo",
                icona: "piena di stelle",
                categoria: "klaviyo",
                modifica: function() {
                    return el(
                       "div",
                        { className: "klaviyo-product-star-ratings" },
                       "Le valutazioni a stelle dei prodotti Klaviyo saranno visualizzate qui"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/featured-reviews", {
                titolo: "Recensioni in primo piano di Klaviyo",
                icona: "admin-post",
                categoria: "klaviyo",
                modifica: function() {
                    return el(
                       "div",
                        { className: "klaviyo-featured-reviews" },
                       "Le recensioni in primo piano di Klaviyo saranno visualizzate qui"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/tutte le recensioni", {
                titolo: "Klaviyo Tutte le recensioni",
                icona: "admin-page",
                categoria: "klaviyo",
                modifica: function() {
                    return el(
                       "div",
                        { className: "klaviyo-all-reviews" },
                       "Tutte le recensioni di Klaviyo saranno visualizzate qui"
                    );
                },
                save: function() {
                    return null;
                },
            });
        } )(
            window.wp.blocks,
            window.wp.element
        );
    ' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// Funzioni di callback per il rendering dei blocchi
function render_klaviyo_product_reviews( $attributi, $contenuto ) {
    global $product;
    if ( is_product() && isset($product) ) {
        return "<div id='klaviyo-reviews-all' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
funzione  render_klaviyo_star_ratings( $attributi, $contenuto ) {
    global $prodotto;
    se (isset($prodotto)) {
        return "<div class='klaviyo-star-rating-widget' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
function render_klaviyo_featured_reviews( $attributi, $contenuto ) {
    return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
function render_klaviyo_all_reviews( $attributi, $contenuto ) {
    return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}

Aggiungere il plugin Recensioni di Klaviyo

1. Si rechi su Aspetto > Editor. 
2. Selezionare i modelli. 
3. Scelga il suo modello di Prodotto singolo. Si noti che potrebbe avere un nome leggermente diverso. 
4. Clicchi su + per aprire il menu a blocchi.
    
5. Si rechi nella sezione Klaviyo del menu Blocchi.
   
6. Trascini i widget di Klaviyo Reviews nel suo tema.
7. Clicca su Salva.

Aggiungere il widget di valutazione delle collezioni con le stelle

1. Si rechi su Aspetto > Editor. 
2. Selezionare i modelli. 
3. Scelga una pagina che contiene una collezione di prodotti. 
4. Clicchi su + per aprire il menu a blocchi.
    
5. Si rechi nella sezione Klaviyo del menu Blocchi. 
6. Trascini il widget della valutazione in stelle su qualsiasi prodotto della collezione.
7. Clicca su Salva.

.page-id - TUO_PAGE_ID 

.klaviyo-star-rating-widget { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    margin: 0 auto; 
}

Installi un plugin e aggiunga i widget con il codice

Questo processo richiede l'aggiunta di uno strumento di snippet di codice di terze parti, in modo da poter aggiungere codice al suo sito senza modificare direttamente i file del tema. Può utilizzare uno strumento come Code Snippets per aggiungere il codice di questi widget. 

Aggiungere il codice sorgente del widget delle recensioni

Queste istruzioni presuppongono che lei abbia già installato il plugin Code Snippets, ma può utilizzare un altro plugin. 

1. Selezioni Snippets > Aggiungi nuovo dalla barra laterale di Wordpress.
   
2. Nel campo Inserisci titolo qui, dia un nome chiaro allo snippet, come "Codice dei widget delle recensioni di Klaviyo".
3. Nella scheda Funzioni (PHP) della sezione Codice, aggiunga i frammenti di codice qui sotto.
4. Clicchi su Salva modifiche e Attiva.

Deve installare uno snippet di codice per ogni widget che intende utilizzare. Le sezioni seguenti illustrano il codice di ciascun widget. 

Snippet di codice del widget delle recensioni dei prodotti

Per regolare la posizione del widget sul tuo sito, modifica la posizione di ('woocommerce_after_single_product_summary') e la priorità(15) nella funzione add_action.

function klaviyo_add_product_reviews_widget() {
    globale $prodotto;
    if (is_product() && isset($prodotto)) {
        $product_id = $product->get_id();
        echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>" ;
    }
}
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Snippet di codice del widget Valutazione a stelle

Per regolare la posizione del widget sul tuo sito, modifica la posizione di ('woocommerce_single_product_summary') e la priorità(6) nella funzione add_action.

function klaviyo_add_product_star_ratings_widget() {
    globale $prodotto;
    if (is_product() && isset($prodotto)) {
        $product_id = $product->get_id();
        echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>" ;
    }
}
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Ulteriori snippet di codice opzionali

Utilizzi questi snippet di codice per aggiungere widget opzionali in qualsiasi punto del suo sito. Si noti che deve aggiungere questi elementi all'HTML di una pagina specifica; non possono essere aggiunti al suo file functions.php.

SEO widget

<div id='klaviyo-reviews-all' data-id='all'></div>

Widget carosello di recensioni in primo piano

<div id='klaviyo-featured-reviews-carousel'></div>

Aggiungere codici brevi

Questo processo prevede prima la registrazione dei codici brevi nei file del suo tema e poi l'inserimento dei codici brevi in qualsiasi punto del suo sito. 

Per completare questa operazione, deve prima aggiungere uno strumento di snippet di codice di terze parti, in modo da poter aggiungere codice al suo sito senza modificare direttamente i file del tema. Può utilizzare uno strumento come Code Snippets per aggiungere il codice di questi widget. 

Registri i codici brevi e aggiunga i widget

Queste istruzioni presuppongono che lei abbia già installato il plugin Code Snippets, ma può utilizzare un altro plugin. 

1. Selezioni Snippets > Aggiungi nuovo dalla barra laterale di Wordpress.
   
2. Nel campo Inserisci titolo qui, dia un nome chiaro allo snippet, come "Codice dei widget delle recensioni di Klaviyo".
3. Nella scheda Funzioni (PHP) della sezione Codice, aggiunga i frammenti di codice qui sotto.
4. Clicchi su Salva modifiche e Attiva.
5. Aggiunga il codice breve di ciascun widget alla pagina in cui desidera che il widget appaia. 

Snippet di codice e codici brevi

Widget per le recensioni dei prodotti

Snippet di codice (da aggiungere alla scheda Funzioni (PHP)):

function klaviyo_add_product_reviews_widget() {
    globale $prodotto;
	se (isset($prodotto)) {
        $product_id = $product->get_id();
        $tag = "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>" ;
		restituire $tag;
    }
}
add_shortcode('klaviyo-reviews-all', 'klaviyo_add_product_reviews_widget');

Codice breve: [klaviyo-reviews-all]

Widget di valutazione a stelle

Snippet di codice (da aggiungere alla scheda Funzioni (PHP)):

function klaviyo_add_product_star_ratings_widget() {
    globale $prodotto;
    se (isset($prodotto)) {
        $product_id = $product->get_id();
        $tag = "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>" ;
		restituire $tag;
    }
}
add_shortcode('klaviyo_star_rating', 'klaviyo_add_product_star_ratings_widget');

Codice breve: [klaviyo_star_rating]

SEO / Tutte le recensioni & Widget Carosello in primo piano

Snippet di codice (da aggiungere alla scheda Funzioni (PHP)):

function klaviyo_add_featured_reviews_widget() {
    return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
function klaviyo_add_all_reviews_widget() {
    return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}

Codice breve: [klaviyo-featured-reviews-carousel]

Codice breve: [adempiuto-reviews-all]

Modifichi direttamente i file del suo tema

Se ha accesso al file functions.php della sua istanza di Wordpress, utilizzi i frammenti di codice qui sotto per aggiungere i widget delle recensioni. 

Snippet di codice del widget delle recensioni dei prodotti

// crea una funzione che rende un div dinamico con l'ID prodotto corretto
function klaviyo_add_product_reviews_widget() {
    global $prodotto;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>" ;
    }
}
// inserisce il widget dopo il riepilogo del singolo prodotto
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Snippet di codice del widget Valutazione a stelle

// crea una funzione che rende un div dinamico con l'ID del prodotto corretto
function klaviyo_add_product_star_ratings_widget() {
    global $prodotto;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>" ;
    }
}
// inserisce il widget dopo il riepilogo del singolo prodotto
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Ulteriori snippet di codice opzionali

Aggiunga questi snippet di codice per aggiungere widget opzionali in qualsiasi punto del suo sito. Si noti che deve aggiungere questi elementi all'HTML di una pagina specifica; non possono essere aggiunti al suo file functions.php.

SEO / Tutte le recensioni widget

<div id='klaviyo-reviews-all' data-id='all'></div>

Widget carosello di recensioni in primo piano

<div id='klaviyo-featured-reviews-carousel'></div>

Risultato

Dopo aver completato questi passaggi, i widget delle recensioni di Klaviyo appariranno sul suo negozio online. 

Risorse aggiuntive

• Primi passi con Klaviyo Reviews
• Come richiedere recensioni ai suoi clienti con i flussi di recensioni di Klaviyo