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

Collega il tuo negozio WooCommerce a Klaviyo prima di installare i widget. Il tuo negozio ha anche bisogno del JavaScript onsite di Klaviyo per caricare i widget. Se non hai ancora iniziato la configurazione di Klaviyo Reviews, vai su Recensioni in Klaviyo e fai clic su Aggiungi recensioni.

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 shortcode.
• 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 a un file simile, usa uno degli altri metodi.
• Molti di questi metodi richiedono di aggiungere un altro plugin al tuo sito WordPress. Le istruzioni di seguito fanno riferimento al plugin snippet di codice, ma Klaviyo non approva alcun plugin specifico e non può aiutare 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 shortcode
• 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

Questo metodo richiede un tema a blocchi WordPress con accesso a Site Editor. Per usare l’editor visivo del tema per aggiungere widget di Klaviyo Reviews al tuo sito, devi prima aggiungere un frammento di codice per caricare questi blocchi drag-and-drop nel tuo tema. Puoi usare uno strumento come snippet di codice per aggiungere il codice sorgente di questi blocchi, poi usare l’editor visivo del tema 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 i widget 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 Klaviyo Star Ratings su qualsiasi prodotto nella 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 shortcode

Questo processo prevede la registrazione degli shortcode con un plugin per snippet di codice, quindi il loro inserimento dove vuoi che vengano visualizzati i widget. Le recensioni dei prodotti e le valutazioni a stelle richiedono un prodotto WooCommerce attuale, quindi il loro posizionamento è diverso rispetto ai widget di tutte le recensioni e alle recensioni in evidenza.

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 gli shortcode e aggiungi i 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 lo shortcode di ogni widget nel punto in cui vuoi che venga visualizzato. Nell’editor a blocchi di WordPress, usa un blocco Shortcode.
6. Salva o pubblica la pagina o il modello dopo aver aggiunto gli shortcodes.

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');

Shortcode: [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');

Shortcode: [klaviyo_star_rating]

SEO / Widget con tutte le recensioni e 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>";
}
add_shortcode('klaviyo-featured-reviews-carousel', 'klaviyo_add_featured_reviews_widget');
add_shortcode('fulfilled-reviews-all', 'klaviyo_add_all_reviews_widget');

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

Shortcode: [fulfilled-reviews-all]

Modifica direttamente i file del tema

Se hai accesso al file functions.php della tua istanza WordPress, aggiungi al file gli snippet di recensioni dei prodotti e di valutazione a stelle qui sotto, quindi salvalo. Il tuo modello di prodotto deve supportare gli hook di WooCommerce utilizzati da questi snippet. Aggiungi gli snippet HTML facoltativi alle pagine in cui vuoi che vengano visualizzati quei widget.

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 il metodo di installazione scelto, apri le pagine in cui hai aggiunto i widget sul tuo negozio live e controllane il posizionamento. Se la valutazione a stelle di un prodotto o il widget delle recensioni non viene visualizzato, verifica se è impostato per nascondere i prodotti senza recensioni.

Risorse aggiuntive