Klaviyo Reviews voor WooCommerce installeren

Wat je leert

Lees hoe je Klaviyo Reviews installeert in je WooCommerce-webshop en reviewwidgets toevoegt. Ga naar Aan de slag met Klaviyo Reviews.om meer te weten te komen over alle stappen die je moet uitvoeren om te starten.

Voordat je van start gaat

Er zijn 4 methoden om Klaviyo Reviews voor WooCommerce te installeren. Welke voor jou de juiste is, hangt af van je niveau van technische kennis en je Wordpress-configuratie. Gebruik het onderstaande stroomschema om de beste installatiemethode voor jou te selecteren.

Houd bij het kiezen van een installatiemethode rekening met het volgende:

• Sterbeoordelingen toevoegen aan collectiepagina's wordt alleen ondersteund voor 2 installatiemethoden: plug-in met visuele editor en shortcode.
• Houd rekening met je niveau van editortoegang in Wordpress. Niet alle gebruikers hebben de optie om themabestanden van de website rechtstreeks te bewerken. Als je geen toegang hebt tot je functions.php-bestand of iets vergelijkbaars, gebruik je een van de andere methoden.
• Voor een aantal van deze methoden moet je nog een extra plug-in aan je Wordpress-site toevoegen. De onderstaande instructies verwijzen naar de plug-in codefragment, maar Klaviyo beveelt geen specifieke plug-in aan en kan niet helpen met probleemoplossing met betrekking tot plug-ins.

Zodra je de juiste installatiestappen voor je hebt geselecteerd, ga je verder met de relevante instructies.

Leer hoe je Klaviyo Reviews voor WooCommerce installeert door:

• Een plug-in installeren en de visuele thema-editor gebruiken
• Een plug-in installeren zonder de visuele thema-editor te gebruiken
• Shortcodes toevoegen
• Je themabestanden aanpassen

Beschikbare reviewwidgets

Zodra je Klaviyo Reviews installeert, toont je winkel beoordelingswidget met beoordelings- en reviewdetails.

• Widget voor sterbeoordeling
  Toont je huidige sterbeoordeling voor een bepaald product en wordt meestal onder de naam van je product toegevoegd, op de productpagina of op een collectiepagina.
  

• Productreviews-widget
  Toont een grafiek met een uitsplitsing van alle beoordelingen die een product heeft ontvangen, gebruikersafbeeldingen die bij reviews zijn ingediend en de meest voorkomende feedback die het product heeft gekregen.
  
  Daaronder staat een lijst met alle gepubliceerde reviews en klantvragen, samen met een zoekbalk, reviewfilters, een knop Review schrijven en een knop Een vraag stellen.
  
  Deze widget wordt meestal onderaan een productpagina toegevoegd.

• Widget met carrousel met uitgelichte reviews
  Toont uitgelichte reviews van al je producten. Je kunt dit uitlichten op je homepage, op een aparte reviewspagina of ergens anders op je site. Je kunt ook de reviews selecteren die in deze widget worden uitgelicht. Als deze beschikbaar zijn, worden door klanten ingestuurde afbeeldingen bij elke review weergegeven; je productafbeeldingen worden gebruikt als er geen afbeelding is ingestuurd.
  

• SEO / Widget met alle beoordelingen
  Toont al je beoordelingen voor alle producten op één pagina. Gebruik deze widget om je SEO te verbeteren en potentiële klanten één plek te bieden om te zien wat je huidige klanten geweldig vinden. Deze widget wordt meestal toegevoegd aan een losse Reviews -pagina op je site.
  

Installeer een plug-in en gebruik de visuele thema-editor

Om de visuele thema-editor te gebruiken om Klaviyo Reviews-widgets aan je site toe te voegen, moet je eerst een stukje code toevoegen om deze drag-and-dropblokken in je thema te laden. Je kunt een tool zoals codefragment gebruiken om de broncode voor deze blokken toe te voegen en vervolgens de visuele thema-editor gebruiken om Klaviyo Reviews-widgets via drag-and-drop aan je thema toe te voegen.

Broncode voor reviews-widget toevoegen

Deze instructies gaan ervan uit dat je de plug-in codefragment al hebt geïnstalleerd, maar je kunt in plaats daarvan ook een andere plug-in gebruiken.

1. Selecteer Snippets > Nieuwe toevoegen in de Wordpress-zijbalk.
   

2. Geef het fragment in het veld Hier titel invoeren een duidelijke naam, zoals “Code voor Klaviyo Reviews-widget”.
3. Voeg op het tabblad Functions (PHP) in de sectie Code het onderstaande codefragment toe.
4. Klik op Wijzigingen opslaan en activeren.

Broncode van de reviews-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() {
    // 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>";
}

Klaviyo Reviews-plug-ins toevoegen

1. Navigeer naar Weergave > Editor.
2. Select template.
3. Kies je Template voor één product. Let op: het kan een iets andere naam hebben.
4. Klik op + om het blokmenu te openen.
   

5. Navigeer naar de sectie Klaviyo in het menu Blocks.
   

6. Sleep Klaviyo Reviews-widgets naar je thema en zet ze neer.
7. Klik op Opslaan.

De widget voor sterrenwaarderingen van collecties toevoegen

1. Navigeer naar Weergave > Editor.
2. Select template.
3. Kies een pagina die een collectie producten bevat.
4. Klik op + om het blokmenu te openen.
   

5. Ga naar de sectie Klaviyo in het menu Blokken.
6. Sleep de Sterbeoordeling -widget naar een product in de collectie.
7. Klik op Opslaan.

.page-id-YOUR_PAGE_ID 

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

Installeer een plug-in en voeg widgets toe met code

Voor dit proces moet je een tool van derden voor codefragmenten toevoegen, zodat je code aan je site kunt toevoegen zonder je themabestanden rechtstreeks te bewerken. Je kunt een tool zoals codefragment gebruiken om de code voor deze widgets toe te voegen.

Broncode voor reviews-widget toevoegen

Deze instructies gaan ervan uit dat je de codefragment -plug-in al hebt geïnstalleerd, maar je kunt in plaats daarvan ook een andere plug-in gebruiken.

1. Selecteer Snippets > Nieuwe toevoegen in de Wordpress-zijbalk.
   

2. Geef het fragment in het veld Hier titel invoeren een duidelijke naam, zoals “Code voor Klaviyo Reviews-widget”.
3. Voeg in het tabblad Functions (PHP) van de sectie Code de onderstaande codefragmenten toe.
4. Klik op Wijzigingen opslaan en activeren.

Je moet een codefragment installeren voor elke widget die je van plan bent te gebruiken. In de onderstaande secties vind je de code voor elke widget.

Codefragment voor de widget voor productreviews

Als je de locatie van de widget op je site wilt aanpassen, bewerk je de locatie van ('woocommerce_after_single_product_summary') en de prioriteit (15) in de functie 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);

Codefragment van de widget voor sterrenwaardering

Als je de locatie van de widget op je site wilt aanpassen, bewerk je de locatie van ('woocommerce_single_product_summary') en de prioriteit (6) in de functie 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);

Aanvullende optionele codefragmenten

Gebruik deze codefragmenten om overal op je site optionele widgets toe te voegen. Let erop dat je deze moet toevoegen aan de HTML voor een specifieke pagina; ze kunnen niet aan je functions.php-bestand worden toegevoegd.

SEO-widget

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

Carrousel-widget uitgelichte reviews

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

Shortcodes toevoegen

In dit proces registreer je eerst de shortcode in je themabestanden en voeg je daarna de shortcode overal op je site in.

Om dit te voltooien, moet je eerst een tool van derden voor codefragmenten toevoegen, zodat je code aan je site kunt toevoegen zonder je themabestanden rechtstreeks te bewerken. Je kunt een tool zoals codefragment gebruiken om de code voor deze widgets toe te voegen.

Registreer de shortcode en voeg widgets toe

Deze instructies gaan ervan uit dat je de plug-in codefragment al hebt geïnstalleerd, maar je kunt in plaats daarvan ook een andere plug-in gebruiken.

1. Selecteer Snippets > Nieuwe toevoegen in de Wordpress-zijbalk.
   

2. Geef het fragment in het veld Hier titel invoeren een duidelijke naam, zoals “Code voor Klaviyo Reviews-widget”.
3. Voeg in het tabblad Functions (PHP) van de sectie Code de onderstaande codefragmenten toe.
4. Klik op Wijzigingen opslaan en activeren.
5. Voeg de shortcode van elke widget toe aan de pagina waar je wilt dat de widget wordt weergegeven.

Codefragmenten en shortcodes

Widget voor productreviews

Codefragment (toevoegen aan het tabblad Functies (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 voor sterrenwaarderingen

Codefragment (toevoegen aan het tabblad Functies (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 / Alle reviews en widget voor aanbevolen carrousel

Codefragment (toevoegen aan het tabblad Functies (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>";
}

Shortcode: [klaviyo-featured-reviews-carousel]

Shortcode: [fulfilled-reviews-all]

Pas je themabestanden rechtstreeks aan

Als je toegang hebt tot het bestand functions.php van je Wordpress-instantie, gebruik je de onderstaande codefragmenten om review-widgets toe te voegen.

Codefragment voor de widget voor productreviews

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

Codefragment van de widget voor sterrenwaardering

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

Aanvullende optionele codefragmenten

Voeg deze codefragmenten toe om optionele widgets overal op je site toe te voegen. Let erop dat je deze moet toevoegen aan de HTML voor een specifieke pagina; ze kunnen niet aan je functions.php-bestand worden toegevoegd.

SEO/Widget voor alle reviews

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

Carrousel-widget uitgelichte reviews

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

Resultaat

Na het voltooien van deze stappen verschijnen Klaviyo Reviews-widgets in je webshop.

Extra hulpbronnen