Come installare Klaviyo Reviews per WooCommerce

Cosa imparerai

Scopri come installare Klaviyo Reviews sul tuo negozio WooCommerce e aggiungere i widget delle recensioni. Per scoprire tutti i passaggi necessari per iniziare, vai a Primi passi con Klaviyo Reviews.

Prima di iniziare

Esistono quattro metodi per installare Klaviyo Reviews per WooCommerce. La scelta giusta per te dipende dal tuo livello di conoscenze tecniche e dalla tua configurazione di WordPress. Utilizza il diagramma di flusso riportato sotto per selezionare il metodo di installazione più adatto al tuo caso.

Quando selezioni un metodo di installazione, considera quanto segue:

• L'aggiunta di valutazioni in stelle alle pagine delle collezioni è supportata solo per 2 metodi di installazione: plugin con editor visuale e codici brevi.
• Valuta il tuo livello di accesso come editor in Wordpress. Non tutti gli utenti hanno l'opzione di modificare direttamente i file del tema del sito web. Se non hai accesso al tuo file functions.php o simile, usa uno degli altri metodi.
• Diversi di questi metodi richiedono l’aggiunta di un altro plugin al tuo sito WordPress. Le istruzioni riportate di seguito fanno riferimento al plugin snippet di codice, ma Klaviyo non approva alcun plugin in particolare e non può aiutarti con la risoluzione dei problemi relativi ai plugin.

Dopo aver selezionato i passaggi di installazione più adatti a te, procedi con le istruzioni pertinenti.

Scopri come installare Klaviyo Reviews per WooCommerce:

• Installazione di un plugin e utilizzo dell’editor visuale del tema
• Installazione di un plugin, senza usare l’editor visivo del tema
• Aggiunta di codici brevi
• Modifica dei file del tema

Widget di recensioni disponibili

Dopo aver installato Klaviyo Reviews, il tuo negozio mostrerà widget di recensioni, che includono dettagli di valutazione e recensione.

• Widget di valutazione a stelle
  Mostra la tua valutazione a stelle attuale per un determinato prodotto e, nella maggior parte dei casi, viene aggiunto sotto il nome del prodotto, nella pagina del prodotto o in una pagina raccolta.
  

• Widget delle recensioni dei prodotti
  Mostra un grafico che suddivide tutte le valutazioni ricevute da un prodotto, le immagini inviate dalle persone con le recensioni e i feedback più comuni ricevuti dal prodotto.
  
  Sotto, trovi un elenco di tutte le recensioni pubblicate e delle domande dei clienti, insieme a una barra di ricerca, filtri per le recensioni, un pulsante Scrivi una recensione e un pulsante Fai una domanda.
  
  Questo widget di solito viene aggiunto vicino al fondo di una pagina prodotto.

• Widget carosello di recensioni in evidenza
  Mostra recensioni in evidenza di tutti i tuoi prodotti. Puoi metterlo in evidenza nella homepage, in una pagina recensioni dedicata o in qualsiasi altra sezione del tuo sito. Puoi anche selezionare le recensioni che vengono messe in evidenza in questo widget. Se disponibili, le immagini inviate dai clienti accompagnano ogni recensione; se non è stata inviata alcuna immagine, vengono utilizzate le immagini dei tuoi prodotti.
  

• SEO / Widget tutte le recensioni
  Mostra tutte le tue recensioni su tutti i prodotti in un'unica pagina. Usa questo widget per migliorare la tua SEO e offrire un unico punto in cui i potenziali clienti possano vedere cosa apprezzano i tuoi clienti attuali. Questo widget viene aggiunto più spesso a una pagina Recensioni autonoma sul tuo sito.
  

Installa un plugin e usa l'editor visuale del tema

Per utilizzare l'editor del tema visivo per aggiungere i widget di Klaviyo Reviews al tuo sito, devi prima aggiungere un frammento di codice per caricare questi blocchi trascina e rilascia nel tuo tema. Puoi utilizzare uno strumento come snippet di codice per aggiungere il codice sorgente per questi blocchi, quindi utilizzare l'editor del tema visivo per trascinare e rilasciare i widget di Klaviyo Reviews nel tuo tema.

Aggiungi il codice sorgente del widget delle recensioni

Queste istruzioni presuppongono che tu abbia già installato il plugin snippet di codice, ma puoi usare invece un altro plugin.

1. Seleziona Snippets > Aggiungi nuovo dalla barra laterale di Wordpress.
   

2. Nel campo Inserisci qui il titolo, assegna un nome chiaro allo snippet, come “Codice dei widget Klaviyo Reviews”.
3. Nella scheda Functions (PHP) della sezione Code, aggiungi lo snippet di codice riportato di seguito.
4. Clicca su Salva modifiche e attiva.

Codice sorgente del widget delle recensioni

function 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() {
    // Register and enqueue the logo image
    wp_register_script(
        'klaviyo-block-editor-script',
        false,
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        false,
        true
    );
    $logo_url = plugins_url( 'img/klaviyo-logo.png', 'klaviyo/klaviyo.php' );
    wp_add_inline_script( 'klaviyo-block-editor-script', '
        ( function( blocks, element ) {
            var el = element.createElement;
            // Add custom category
            blocks.updateCategory( "widgets", {
                slug: "klaviyo",
                title: "Klaviyo",
                icon: el("img", { src: "' . $logo_url . '", style: { width: "20px", height: "20px" } })
            } );
            blocks.registerBlockType( "klaviyo/product-reviews", {
                title: "Klaviyo Product Reviews",
                icon: "admin-comments",
                category: "klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-product-reviews" },
                        "Klaviyo Product Reviews will be displayed here"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/product-star-ratings", {
                title: "Klaviyo Star Ratings",
                icon: "star-filled",
                category: "klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-product-star-ratings" },
                        "Klaviyo Product Star Ratings will be displayed here"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/featured-reviews", {
                title: "Klaviyo Featured Reviews",
                icon: "admin-post",
                category: "klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-featured-reviews" },
                        "Klaviyo Featured Reviews will be displayed here"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/all-reviews", {
                title: "Klaviyo All Reviews",
                icon: "admin-page",
                category: "klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-all-reviews" },
                        "Klaviyo All Reviews will be displayed here"
                    );
                },
                save: function() {
                    return null;
                },
            });
        } )(
            window.wp.blocks,
            window.wp.element
        );
    ' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// Callback functions to render the blocks
function render_klaviyo_product_reviews( $attributes, $content ) {
    global $product;
    if ( is_product() && isset($product) ) {
        return "<div id='klaviyo-reviews-all' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
function render_klaviyo_star_ratings( $attributes, $content ) {
    global $product;
    if (isset($product)) {
        return "<div class='klaviyo-star-rating-widget' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
function render_klaviyo_featured_reviews( $attributes, $content ) {
    return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
function render_klaviyo_all_reviews( $attributes, $content ) {
    return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}

Aggiungi plugin di Klaviyo Reviews

1. Vai su Aspetto > Editor.
2. Select modello.
3. Scegli il tuo modello Prodotto singolo. Tieni presente che potrebbe avere un nome leggermente diverso.
4. Fai clic su + per aprire il menu dei blocchi.
   

5. Vai alla sezione Klaviyo del menu Blocchi.
   

6. Trascina e rilascia i widget di Klaviyo Reviews nel tuo tema.
7. Clicca su Salva.

Aggiungi il widget di valutazione a stelle delle raccolte

1. Vai su Aspetto > Editor.
2. Select modello.
3. Scegli una pagina che contiene una raccolta di prodotti.
4. Fai clic su + per aprire il menu dei blocchi.
   

5. Vai alla sezione Klaviyo del menu Blocchi.
6. Trascina il widget Valutazione a stelle su qualsiasi prodotto della collezione.
7. Clicca su Salva.

.page-id-YOUR_PAGE_ID 

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

Installa un plugin e aggiungi widget con il codice

Questo processo richiede l’aggiunta di uno strumento snippet di codice di terze parti, così puoi aggiungere codice al tuo sito senza modificare direttamente i file del tuo tema. Puoi usare uno strumento come snippet di codice per aggiungere il codice per questi widget.

Aggiungi il codice sorgente del widget delle recensioni

Queste istruzioni presuppongono che tu abbia già installato il plugin snippet di codice, ma puoi invece utilizzare un plugin diverso.

1. Seleziona Snippets > Aggiungi nuovo dalla barra laterale di Wordpress.
   

2. Nel campo Inserisci qui il titolo, assegna un nome chiaro allo snippet, come “Codice dei widget Klaviyo Reviews”.
3. Nella scheda Funzioni (PHP) della sezione Codice, aggiungi gli snippet di codice riportati di seguito.
4. Clicca su Salva modifiche e attiva.

Devi installare uno snippet di codice per ogni widget che intendi utilizzare. Le sezioni seguenti descrivono il codice per ogni widget.

Snippet di codice del widget delle recensioni di prodotti

Per modificare 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() {
    global $product;
    if (is_product() && isset($product)) {
        $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 di valutazione a stelle

Per modificare 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() {
    global $product;
    if (is_product() && isset($product)) {
        $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);

Snippet di codice aggiuntivi facoltativi

Usa questi snippet di codice per aggiungere widget facoltativi ovunque sul tuo sito. Tieni presente che devi aggiungerli all’HTML di una pagina specifica; non possono essere aggiunti al tuo file functions.php.

Widget SEO

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

Widget con carosello di recensioni in evidenza

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

Aggiungi il codice breve

Questo processo prevede prima la registrazione del codice breve nei file del tuo tema e poi l'inserimento del codice breve in qualsiasi punto del tuo sito.

Per completare questa operazione, devi prima aggiungere uno strumento di snippet di codice di terze parti, così puoi aggiungere codice al tuo sito senza modificare direttamente i file del tuo tema. Puoi usare uno strumento come snippet di codice per aggiungere il codice per questi widget.

Registra i codici brevi e aggiungi widget

Queste istruzioni presuppongono che tu abbia già installato il plugin snippet di codice, ma puoi usare un plugin diverso.

1. Seleziona Snippets > Aggiungi nuovo dalla barra laterale di Wordpress.
   

2. Nel campo Inserisci qui il titolo, assegna un nome chiaro allo snippet, come “Codice dei widget Klaviyo Reviews”.
3. Nella scheda Funzioni (PHP) della sezione Codice, aggiungi gli snippet di codice riportati di seguito.
4. Clicca su Salva modifiche e attiva.
5. Aggiungi il codice breve di ogni widget alla pagina in cui vuoi che il widget venga visualizzato.

Snippet di codice e codici brevi

Widget delle recensioni di prodotti

Snippet di codice (aggiungi nella scheda Funzioni (PHP)):

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

Codice breve: [klaviyo-reviews-all]

Widget di valutazione a stelle

Snippet di codice (aggiungi nella scheda Funzioni (PHP)):

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

Codice breve: [klaviyo_star_rating]

SEO / Tutte le recensioni e widget carosello in evidenza

Snippet di codice (aggiungi nella 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: [fulfilled-reviews-all]

Modifica direttamente i file del tema

Se hai accesso al file functions.php della tua istanza Wordpress, usa gli snippet di codice riportati di seguito per aggiungere i widget delle recensioni.

Snippet di codice del widget delle recensioni di prodotti

// create a function that renders a dynamic div with the correct product ID
function klaviyo_add_product_reviews_widget() {
    global $product;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>";
    }
}
// place the widget after the single product summary
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Snippet di codice del widget di valutazione a stelle

// create a function that renders a dynamic div with the correct product ID
function klaviyo_add_product_star_ratings_widget() {
    global $product;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>";
    }
}
// place the widget after the single product summary
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Snippet di codice aggiuntivi facoltativi

Aggiungi questi snippet di codice per aggiungere widget facoltativi in qualsiasi punto del tuo sito. Tieni presente che devi aggiungerli all’HTML di una pagina specifica; non possono essere aggiunti al tuo file functions.php.

Widget SEO / Tutte le recensioni

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

Widget con carosello di recensioni in evidenza

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

Risultato

Dopo aver completato questi passaggi, i widget di Klaviyo Reviews appariranno sul tuo negozio online.

Risorse aggiuntive