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 iniziarePrima 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 recensioniAggiungere 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.
- Selezioni Snippets > Aggiungi nuovo dalla barra laterale di Wordpress.
- Nel campo Inserisci titolo qui, dia un nome chiaro allo snippet, come "Codice dei widget delle recensioni di Klaviyo".
- Nella scheda Funzioni (PHP) della sezione Codice, aggiunga lo snippet di codice qui sotto.
- 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
- Si rechi su Aspetto > Editor.
- Selezionare i modelli.
- Scelga il suo modello di Prodotto singolo. Si noti che potrebbe avere un nome leggermente diverso.
- Clicchi su + per aprire il menu a blocchi.
- Si rechi nella sezione Klaviyo del menu Blocchi.
- Trascini i widget di Klaviyo Reviews nel suo tema.
- Clicca su Salva.
Aggiungere il widget di valutazione delle collezioni con le stelle
- Si rechi su Aspetto > Editor.
- Selezionare i modelli.
- Scelga una pagina che contiene una collezione di prodotti.
- Clicchi su + per aprire il menu a blocchi.
- Si rechi nella sezione Klaviyo del menu Blocchi.
- Trascini il widget della valutazione in stelle su qualsiasi prodotto della collezione.
- Clicca su Salva.
Utilizzi lo snippet di codice qui sotto per centrare il widget della valutazione in stelle, se lo desidera. Si noti che deve sostituire il segnaposto YOUR_PAGE_ID con l'ID della pagina della sua collezione. Impari a trovare l'ID di una pagina.
.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
Quando utilizza questo metodo, i widget vengono aggiunti al suo sito in base al posizionamento dei ganci visivi di WooCommerce. Pertanto, se non ha i widget di WooCommerce nella sua pagina di prodotto, deve utilizzare un'opzione di installazione alternativa.
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 recensioniAggiungere 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.
- Selezioni Snippets > Aggiungi nuovo dalla barra laterale di Wordpress.
- Nel campo Inserisci titolo qui, dia un nome chiaro allo snippet, come "Codice dei widget delle recensioni di Klaviyo".
- Nella scheda Funzioni (PHP) della sezione Codice, aggiunga i frammenti di codice qui sotto.
- 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 prodottiSnippet di codice del widget delle recensioni dei prodotti
Per regolare la posizione del widget sul suo sito, modifichi la posizione ('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 suo sito, modifichi la posizione ('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 widgetRegistri 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.
- Selezioni Snippets > Aggiungi nuovo dalla barra laterale di Wordpress.
- Nel campo Inserisci titolo qui, dia un nome chiaro allo snippet, come "Codice dei widget delle recensioni di Klaviyo".
- Nella scheda Funzioni (PHP) della sezione Codice, aggiunga i frammenti di codice qui sotto.
- Clicchi su Salva modifiche e Attiva.
- 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 prodottiWidget 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 stelleWidget 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]
Aggiunga questo breve codice alla pagina del suo prodotto per visualizzare la valutazione in stelle di un singolo prodotto, o a qualsiasi pagina di una collezione per visualizzare le valutazioni in stelle di tutti gli articoli della collezione.
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 temaModifichi 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.
Queste istruzioni sono rivolte agli sviluppatori con esperienza PHP di Wordpress. Se non ha familiarità con il PHP di Wordpress, utilizzi un metodo alternativo.
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