Comment installer Klaviyo Reviews pour WooCommerce

Objectif de cet article

Découvrez comment installer Klaviyo Reviews sur votre boutique en ligne WooCommerce et ajouter des widgets d’avis. Pour découvrir toutes les étapes nécessaires pour démarrer, consultez Démarrer avec Klaviyo Reviews.

Avant de commencer

Il existe 4 méthodes d’installation de Klaviyo Reviews pour WooCommerce. Celle qui vous convient le mieux dépend de votre niveau de connaissances techniques et de votre configuration WordPress. Utilisez l’organigramme ci-dessous pour sélectionner la méthode d’installation la plus appropriée.

Lorsque vous sélectionnez une méthode d’installation, tenez compte des éléments suivants :

• L’ajout d’évaluations sous forme d’étoiles aux pages de collection n’est pris en charge que pour 2 méthodes d’installation : plug-in avec l’éditeur visuel et numéros abrégés.
• Tenez compte de votre niveau d’accès à l’éditeur dans Wordpress. Tous les utilisateurs n’ont pas la possibilité de modifier directement les fichiers de thème du site web. Si vous n’avez pas accès à votre fichier functions.php ou à un fichier similaire, utilisez l’une des autres méthodes.
• Plusieurs de ces méthodes nécessitent d’ajouter un autre plug-in à votre site WordPress. Les instructions ci-dessous font référence au plug-in Extraits de code, mais Klaviyo n’approuve aucun plug-in en particulier et ne peut pas vous aider à résoudre les problèmes liés aux plug-ins.

Une fois que vous avez sélectionné les étapes d’installation qui vous conviennent, passez aux instructions correspondantes.

Découvrez comment installer Klaviyo Reviews pour WooCommerce en :

• Installation d’un plug-in et utilisation de l’éditeur de thème visuel
• Installer un plug-in, sans utiliser l’éditeur de thèmes visuel
• Ajouter des numéros abrégés
• Modification des fichiers de votre thème

Widgets d’avis disponibles

Une fois Klaviyo Reviews installé, votre boutique affichera des widget d’avis, qui présentent des détails sur les notes et les avis.

• Widget d’évaluation par étoiles
  Affiche votre évaluation par étoiles actuelle pour un produit particulier, et est le plus souvent ajouté sous le nom de votre produit, soit sur la page produit, soit sur une page de collection.
  

• Widget d’avis sur les produits
  Affiche un tableau répertoriant toutes les notes données à un produit, les images d’utilisateurs soumises avec les avis et les commentaires les plus courants que le produit a reçus.
  
  En dessous, vous trouverez la liste de tous les avis publiés et les questions des clients, ainsi qu’une barre de recherche, des filtres d’avis, un bouton Rédiger un avis et un bouton Poser une question.
  
  Ce widget est généralement ajouté au bas de la page d’un produit.

• Widget de carrousel d’avis mis en avant
  Affiche les avis mis en évidence de tous vos produits. Vous pouvez l’afficher sur votre page d’accueil, sur une page seule dédiée aux avis ou à tout autre endroit de votre site. Vous pouvez également sélectionner les avis présentés dans ce widget. Si elles sont disponibles, les images envoyées par les clients accompagnent chaque avis ; sinon, ce sont les images de vos produits qui sont utilisées.
  

• SEO / widget Tous les avis
  Affiche tous vos avis sur tous les produits sur une seule page. Utilisez-le pour améliorer votre référencement et offrir à vos clients potentiels un endroit unique pour voir ce que vos clients actuels aiment. Ce widget est le plus souvent ajouté à une page Avis autonome sur votre site.

Installez un plug-in et utilisez l’éditeur de thème visuel

Pour utiliser l’éditeur de thèmes visuel afin d’ajouter des widgets Klaviyo Reviews à votre site, vous devez d’abord ajouter un extrait de code pour charger ces blocs glisser-déposer dans votre thème. Vous pouvez utiliser un outil comme extrait de code pour ajouter le code source de ces blocs, puis utiliser l’éditeur de thèmes visuel pour glisser-déposer des widgets Klaviyo Reviews dans votre thème.

Ajouter le code source du widget d’avis

Ces instructions supposent que vous avez déjà installé le plug-in extrait de code, mais vous pouvez utiliser un autre plug-in à la place.

1. Dans la barre latérale de Wordpress, sélectionnez Snippets > Add new.
   

2. Dans le champ Enter title here, donnez à l’extrait de code un nom clair, comme « Code des widgets Klaviyo Reviews ».
3. Dans l’onglet Fonctions (PHP) de la section Code, ajoutez l’extrait de code ci-dessous.
4. Cliquez sur Enregistrer les modifications et activer.

Code source du widget d’avis

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>";
}

Ajouter des plug-ins Klaviyo Reviews

1. Accédez à Apparence > Éditeur.
2. Select modèle.
3. Choisissez votre modèle Produit unique. Notez qu’il peut avoir un nom légèrement différent.
4. Cliquez sur + pour ouvrir le menu des blocs.
   

5. Accédez à la section Klaviyo du menu Blocs.
   

6. Faites glisser et déposez les widgets Klaviyo Reviews dans votre thème.
7. Cliquez sur Enregistrer.

Ajoutez le widget d’évaluation sous forme d’étoiles des collections

1. Accédez à Apparence > Éditeur.
2. Select modèle.
3. Choisissez une page qui contient une collection de produits.
4. Cliquez sur + pour ouvrir le menu des blocs.
   

5. Accédez à la section Klaviyo du menu Blocs.
6. Faites glisser le widget Star rating sur n’importe quel produit de la collection.
7. Cliquez sur Enregistrer.

.page-id-YOUR_PAGE_ID 

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

Installez un plug-in et ajoutez des widget avec du code

Ce processus nécessite l’ajout d’un outil d’extrait de code tiers, afin que vous puissiez ajouter du code à votre site sans modifier directement vos fichiers de thème. Vous pouvez utiliser un outil comme extrait de code pour ajouter le code de ces widget.

Ajouter le code source du widget d’avis

Ces instructions partent du principe que vous avez déjà installé le plug-in extrait de code, mais vous pouvez utiliser un autre plug-in à la place.

1. Dans la barre latérale de Wordpress, sélectionnez Snippets > Add new.
   

2. Dans le champ Enter title here, donnez à l’extrait de code un nom clair, comme « Code des widgets Klaviyo Reviews ».
3. Dans l’onglet Fonctions (PHP) de la section Code, ajoutez les extraits de code ci-dessous.
4. Cliquez sur Enregistrer les modifications et activer.

Vous devez installer un extrait de code pour chaque widget que vous prévoyez d’utiliser. Les sections ci-dessous présentent le code de chaque widget.

Extrait de code du widget d’évaluation des produits

Pour ajuster l’emplacement du widget sur votre site, modifiez l’emplacement de ('woocommerce_after_single_product_summary') et la priorité (15) dans la fonction 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);

Extrait de code du widget de classement par étoiles

Pour ajuster l’emplacement du widget sur votre site, modifiez l’emplacement de ('woocommerce_single_product_summary') et la priorité (6) dans la fonction 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);

Extraits de code facultatifs supplémentaires

Utilisez ces extraits de code pour ajouter des widgets facultatifs n’importe où sur votre site. Notez que vous devez les ajouter au code HTML d’une page spécifique ; ils ne peuvent pas être ajoutés à votre fichier functions.php.

Widget SEO

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

Widget Carrousel d’avis mis en avant

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

Ajouter des numéros abrégés

Ce processus consiste d’abord à enregistrer les numéro abrégé dans les fichiers de votre thème, puis à insérer les numéro abrégé n’importe où sur votre site.

Pour terminer cette opération, vous devez d’abord ajouter un outil tiers d’extrait de code afin de pouvoir ajouter du code à votre site sans modifier directement les fichiers de votre thème. Vous pouvez utiliser un outil comme extrait de code pour ajouter le code de ces widget.

Enregistrez les numéros abrégés et ajoutez des widgets

Ces instructions supposent que vous avez déjà installé le plug-in extrait de code, mais vous pouvez utiliser un autre plug-in à la place.

1. Dans la barre latérale de Wordpress, sélectionnez Snippets > Add new.
   

2. Dans le champ Enter title here, donnez à l’extrait de code un nom clair, comme « Code des widgets Klaviyo Reviews ».
3. Dans l’onglet Fonctions (PHP) de la section Code, ajoutez les extraits de code ci-dessous.
4. Cliquez sur Enregistrer les modifications et activer.
5. Ajoutez le numéro abrégé de chaque widget à la page où vous souhaitez que le widget apparaisse.

Extraits de code et numéros abrégés

Widget Avis sur les produits

Extrait de code (à ajouter à l’onglet Functions (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');

Numéro abrégé : [klaviyo-reviews-all]

Widget de classement par étoiles

Extrait de code (à ajouter à l’onglet Functions (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');

Numéro abrégé : [klaviyo_star_rating]

SEO / Tous les avis et widget de carrousel mis en avant

Extrait de code (à ajouter à l’onglet Functions (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>";
}

Numéro abrégé : [klaviyo-featured-reviews-carousel]

Numéro abrégé : [fulfilled-reviews-all]

Modifiez directement vos fichiers de thème

Si vous avez accès au fichier functions.php de votre instance Wordpress, utilisez les extraits de code ci-dessous pour ajouter des widgets d’avis.

Extrait de code du widget d’évaluation des produits

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

Extrait de code du widget de classement par étoiles

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

Extraits de code facultatifs supplémentaires

Ajoutez ces extraits de code pour ajouter des widgets facultatifs où que ce soit sur votre site. Notez que vous devez les ajouter au code HTML d’une page spécifique ; ils ne peuvent pas être ajoutés à votre fichier functions.php.

Widget SEO/Tous les avis

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

Widget Carrousel d’avis mis en avant

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

Résultat

Après avoir terminé ces étapes, les widget Klaviyo Reviews apparaîtront sur votre boutique en ligne.

Ressources supplémentaires