Comment installer Klaviyo Reviews pour WooCommerce

Vous apprendrez

Apprenez à installer Klaviyo Reviews sur votre WooCommerce point de vente et à ajouter un widget de commentaires. Pour connaître toutes les étapes nécessaires à la mise en œuvre, consultez la rubrique Mise en œuvre de Klaviyo Reviews.

Avant de commencer

Il y a 4 méthodes pour installer Klaviyo Reviews pour WooCommerce. Le bon choix dépend de votre niveau de connaissances techniques et de votre configuration Wordpress. Utilisez l'organigramme ci-dessous pour choisir la méthode d'installation qui vous convient le mieux. 

Lorsque vous choisissez une méthode d'installation, tenez compte des éléments suivants : 

• L'ajout d'un classement par étoiles aux pages de la collection n'est possible que pour deux méthodes d'installation : le plugin avec éditeur visuel et les codes courts. 
• 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èmes de sites 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 l'ajout d'un autre plugin à votre site Wordpress. Les instructions ci-dessous font référence au plugin Code Snippets, mais Klaviyo ne soutient aucun plugin en particulier et ne peut pas vous aider à résoudre les problèmes liés aux plugins. 

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

Apprenez à installer Klaviyo Reviews pour WooCommerce par : 

• Installation d'un plugin et utilisation de l'éditeur visuel de thème 
• Installer un plugin sans utiliser l'éditeur visuel de thème
• Ajouter des codes courts
• Modifier les fichiers de votre thème

Widgets de commentaires disponibles

Une fois que vous aurez installé Klaviyo Reviews, votre boutique affichera des widgets de commentaires, qui présentent les détails de l'évaluation et des commentaires. 

• Widget d'évaluation par étoiles
  Affiche votre classement actuel par étoiles pour un produit particulier. Il est le plus souvent ajouté sous le nom de votre produit, soit sur la page du produit, soit sur la page d'une collection.
  
• Widget d'évaluation des produits
  Affiche un tableau présentant toutes les évaluations reçues par un produit, les images d'utilisateurs soumises avec les évaluations et les commentaires les plus courants reçus par le produit.
  
  En dessous, vous trouverez une liste de tous les avis publiés et des questions des clients, ainsi qu'une barre de recherche, des filtres d'avis, un bouton Écrire un avis et un bouton Poser une question.
  
  Ce widget est généralement ajouté au bas de la page d'un produit.
• Widget carrousel d'avis en vedette
  Affiche les avis mis en avant sur tous vos produits. Vous pouvez l'afficher sur votre page d'accueil, sur une page autonome consacrée aux avis ou à tout autre endroit de votre site. Vous pouvez également sélectionner les avis qui sont présentés dans ce widget. Si elles sont disponibles, les images envoyées par les clients accompagnent chaque avis ; les images de vos produits sont utilisées si aucune image n'a été envoyée.
  
• SEO / Tous les avis widget
  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 plugin et utilisez l'éditeur visuel de thème 

Afin d'utiliser l'éditeur visuel de thème pour ajouter des widgets Klaviyo Reviews à votre site, vous devez d'abord ajouter un morceau de code pour charger ces blocs glisser-déposer dans votre thème. Vous pouvez utiliser un outil comme Code Snippets pour ajouter le code source de ces blocs, puis utiliser l'éditeur visuel de thème pour glisser-déposer les widgets Klaviyo Reviews dans votre thème. 

Ajouter le code source du widget des critiques

Ces instructions supposent que vous avez déjà installé le plugin Code Snippets, mais vous pouvez utiliser un autre plugin à la place. 

1. Sélectionnez Snippets > Add new dans la barre latérale de Wordpress.
   
2. Dans le champ Enter title here, nommez l'extrait quelque chose de clair, comme "Klaviyo Reviews Widgets Code".
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.

Examine le code source du widget

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() {
    // Enregistrez et mettez en file d'attente l'image du logo
    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 ;
            // Ajouter une catégorie personnalisée
            blocks.updateCategory( "widgets", {
                slug : "klaviyo",
                title : "Klaviyo",
                icon : el("img", { src : "' . $logo_url . '", style : { width: "20px", height: "20px" } })
            } ) ;
            blocks.registerBlockType( "klaviyo/product-reviews", {
                titre : "Klaviyo Product Reviews",
                icon : "admin-comments",
                catégorie : "klaviyo",
                edit : function() {
                    return el(
                       "div",
                        { className: "klaviyo-product-reviews" },
                       "Les commentaires sur les produits Klaviyo seront affichés ici"
                    ) ;
                },
                save : function() {
                    return null;
                },
            }) ;
            blocks.registerBlockType( "klaviyo/product-star-ratings", {
                titre : "Klaviyo Star Ratings",
                icon : "rempli d'étoiles",
                catégorie : "klaviyo",
                edit : function() {
                    return el(
                       "div",
                        { className: "klaviyo-product-star-ratings" },
                       "L'évaluation par étoiles des produits Klaviyo sera affichée ici"
                    ) ;
                },
                save : function() {
                    return null;
                },
            }) ;
            blocks.registerBlockType( "klaviyo/featured-reviews", {
                titre : "Klaviyo Featured Reviews",
                icon : "admin-post",
                catégorie : "klaviyo",
                edit : function() {
                    return el(
                       "div",
                        { className: "klaviyo-featured-reviews" },
                       "Klaviyo Featured Reviews sera affiché ici"
                    ) ;
                },
                save : function() {
                    return null;
                },
            }) ;
            blocks.registerBlockType( "klaviyo/all-reviews", {
                titre : "Klaviyo All Reviews",
                icon : "admin-page",
                catégorie : "klaviyo",
                edit : function() {
                    return el(
                       "div",
                        { className: "klaviyo-all-reviews" },
                       "Klaviyo Tous les commentaires seront affichés ici"
                    ) ;
                },
                save : function() {
                    return null;
                },
            }) ;
        } )(
            window.wp.blocks,
            window.wp.element
        ) ;
    ' ) ;
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' ) ;
// Fonctions de rappel pour le rendu des blocs
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 les plugins Klaviyo Reviews

1. Naviguez vers Apparence > Editor. 
2. Sélectionnez Modèles. 
3. Choisissez votre modèle de produit unique. Notez qu'il peut avoir un nom légèrement différent. 
4. Cliquez sur + pour ouvrir le menu du bloc.
    
5. Naviguez jusqu'à la section Klaviyo du menu Blocs.
   
6. Glissez et déposez les widgets Klaviyo Reviews dans votre thème.
7. Cliquez sur Enregistrer.

Ajouter le widget d'évaluation par étoiles des collections

1. Naviguez vers Apparence > Editor. 
2. Sélectionnez Modèles. 
3. Choisissez une page qui contient une collection de produits. 
4. Cliquez sur + pour ouvrir le menu du bloc.
    
5. Naviguez jusqu'à la section Klaviyo du menu Blocs. 
6. Faites glisser le widget d'évaluation des étoiles sur n'importe quel produit de la collection.
7. Cliquez sur Enregistrer.

.page-id-Votre_id_de_page 

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

Installez un plugin et ajoutez des widgets 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 les fichiers de votre thème. Vous pouvez utiliser un outil comme Code Snippets pour ajouter le code de ces widgets. 

Ajouter le code source du widget des critiques

Ces instructions supposent que vous avez déjà installé le plugin Code Snippets, mais vous pouvez utiliser un autre plugin à la place. 

1. Sélectionnez Snippets > Add new dans la barre latérale de Wordpress.
   
2. Dans le champ Enter title here, nommez l'extrait quelque chose de clair, comme "Klaviyo Reviews Widgets Code".
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 envisagez d'utiliser. Les sections ci-dessous décrivent le code de chaque widget. 

Extrait de code du widget des avis sur les produits

Pour ajuster l'emplacement du widget sur votre site, modifiez l'emplacement ('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 notation par étoiles

Pour ajuster l'emplacement du widget sur votre site, modifiez l'emplacement ('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 supplémentaires facultatifs

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.

RÉFÉRENCEMENT widget

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

Widget carrousel d'avis en vedette

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

Ajouter des codes courts

Ce processus implique d'abord l'enregistrement des codes courts dans les fichiers de votre thème, puis l'insertion des codes courts à n'importe quel endroit de votre site. 

Pour ce faire, vous devez d'abord ajouter un outil d'extrait de code tiers afin de pouvoir ajouter du code à votre site sans modifier directement les fichiers de votre thème. Vous pouvez utiliser un outil comme Code Snippets pour ajouter le code de ces widgets. 

Enregistrez les codes courts et ajoutez des widgets

Ces instructions supposent que vous avez déjà installé le plugin Code Snippets, mais vous pouvez utiliser un autre plugin à la place. 

1. Sélectionnez Snippets > Add new dans la barre latérale de Wordpress.
   
2. Dans le champ Enter title here, nommez l'extrait quelque chose de clair, comme "Klaviyo Reviews Widgets Code".
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 code court de chaque widget à la page où vous souhaitez qu'il apparaisse. 

Extraits de code et codes courts

Widget des critiques de produits

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

Code court : [klaviyo-reviews-all]

Widget de classement par étoiles

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

Code court : [klaviyo_star_rating]

SEO / Toutes les revues & Widget Featured Carousel

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

Code court : [klaviyo-featured-reviews-carousel]

Code court : [fulfilled-reviews-all]

Modifiez directement les fichiers de votre 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 de commentaires. 

Extrait de code du widget des avis sur les produits

// créez une fonction qui rend une div dynamique avec l'ID du produit correct
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>" ;
    }
}
// placez le widget après le résumé du produit unique
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15) ;

Extrait de code du widget de notation par étoiles

// créez une fonction qui rend une div dynamique avec l'ID du produit correct
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>" ;
    }
}
// placez le widget après le résumé du produit unique
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6) ;

Extraits de code supplémentaires facultatifs

Ajoutez ces extraits de code pour ajouter des widgets optionnels 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.

SEO / Toutes les revues widget

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

Widget carrousel d'avis en vedette

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

Résultats

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

Ressources complémentaires

• Démarrer avec Klaviyo Reviews
• Comment demander des avis à vos clients avec les flux d'avis de Klaviyo ?