Hoe installeer je Klaviyo Recensies voor WooCommerce

Wat je leert

Leer hoe je Klaviyo Recensies installeert op je WooCommerce zaak en recensies widget toevoegt. Om meer te weten te komen over alle stappen die nodig zijn om aan de slag te gaan, ga je naar Aan de slag met Klaviyo Reviews.

Voordat je van start gaat

Er zijn 4 manieren om Klaviyo Recensies voor WooCommerce te installeren. Welke voor jou geschikt is, hangt af van je technische kennis en je Wordpress-instellingen. Gebruik het onderstaande stroomschema om de beste installatiemethode voor jou te kiezen. 

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

• Sterbeoordelingen toevoegen aan verzamelpagina's wordt alleen ondersteund voor 2 installatiemethoden: plug-in met visuele editor en shortcode. 
• Overweeg je niveau van toegang tot de editor in Wordpress. Niet alle gebruikers hebben de mogelijkheid om themabestanden van websites direct te bewerken. Als je geen toegang hebt tot je functions.php bestand of iets dergelijks, gebruik dan een van de andere methoden. 
• Verschillende van deze methoden vereisen het toevoegen van een andere plug-in aan je Wordpress site. De onderstaande instructies verwijzen naar de codefragment plug-in, maar Klaviyo onderschrijft geen enkele specifieke plug-in en kan niet helpen met plug-in gerelateerde probleemoplossing. 

Als je de juiste installatiestappen voor jou hebt geselecteerd, ga dan verder met de relevante instructies. 

Leer hoe je Klaviyo Recensies 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
• Shortcode toevoegen
• Je themabestanden wijzigen

Beschikbare beoordelingen widget

Zodra je Klaviyo Recensies installeert, zal je zaak beoordelingen-widget weergeven, met functies voor beoordelings- en beoordelingsdetails. 

• Sterrenscore widget
  Toont je huidige sterrenbeoordeling voor een bepaald product en wordt meestal toegevoegd onder de naam van je product op de productpagina of een verzamelpagina.
  
• Product beoordelingen widget
  Toont een grafiek met alle beoordelingen die een product heeft ontvangen, afbeeldingen van gebruikers die bij beoordelingen zijn ingediend en de meest voorkomende feedback die het product heeft ontvangen.
  
  Daaronder staat een lijst met alle gepubliceerde recensies en klantvragen, samen met een zoekbalk, filters voor recensies, een knop Schrijf een recensie en een knop Stel een vraag.
  
  Deze widget wordt meestal onderaan een productpagina toegevoegd.
• Uitgelichte beoordelingen widget
  Toont uitgelichte beoordelingen van al je producten. Je kunt dit doen op je homepage, op een aparte pagina met recensies of ergens anders op je site. Je kunt ook de recensies selecteren die in deze widget worden weergegeven. Als er afbeeldingen beschikbaar zijn, wordt elke beoordeling vergezeld van door klant ingezonden afbeeldingen; als er geen afbeelding is ingezonden, worden jouw productafbeeldingen gebruikt.
  
• SEO / Alle beoordelingen widget
  Toont al je beoordelingen over alle producten op één pagina. Gebruik deze widget om je SEO te verbeteren en potentiële klanten op één plek te laten zien waar je huidige klanten van houden. Deze widget wordt meestal toegevoegd aan een aparte pagina met recensies op je site.
  

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

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

Broncode voor widget met beoordelingen toevoegen

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

1. Selecteer Snippets > Nieuw toevoegen in de Wordpress zijbalk.
   
2. Geef het knipsel in het veld Voer hier een titel in iets duidelijks, zoals "Klaviyo widget Code voor recensies".
3. Voeg in het tabblad Functies (PHP) van de sectie Code het onderstaande codefragment toe.
4. Klik op Wijzigingen opslaan en Activeren.

Beoordeling widget broncode

functie 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' );
functie enqueue_klaviyo_block_editor_assets() {
 // Registreer en enqueue de logo-afbeelding
 wp_register_script(
 'Klaviyo-blok-editor-script',
 false,
 array( 'wp-blok', 'wp-element', 'wp-editor' ),
 false,
 true
 );
   $logo_url = plugins_url( 'img/Klaviyo-logo.png', 'Klaviyo/Klaviyo.php' );
 wp_add_inline_script( 'Klaviyo-blok-editor-script', '
 ( function( blok, element ) {
 var el = element.createElement;
            // Aangepaste categorie toevoegen
 blok.updateCategory( "widget", {
 slug: "Klaviyo" ,
 title: "Klaviyo",
 icoon: el("img", { src: "' . $logo_url . '", stijl: { width: "20px", height: "20px" } })
           } );
 blok.registerBlockType( "Klaviyo/product-reviews", {
 title: "Klaviyo Productreviews",
 icoon: "admin-comments",
 categorie: "Klaviyo",
 bewerken: functie() {
 return el(
 " div",
                        { className: "klaviyo-product-reviews" },
 "Klaviyo Productreviews worden hier weergegeven"
 );
 },
 opslaan: functie() {
                    return null;
                },
 };
 blok.registerBlockType() "Klaviyo/product-star-ratings", {
 title: "Klaviyo Star Ratings",
 icon: "star-filled",
 category: "Klaviyo",
 bewerken: functie() {
 return el(
 " div",
                        { className: "klaviyo-product-star-ratings" },
 "Klaviyo Product Star Ratings worden hier weergegeven"
 );
 },
 opslaan: functie() {
                    return null;
                },
 });
 blok.registerBlockType( "Klaviyo/featured-reviews", {
 title: "Klaviyo Featured Reviews",
 icoon: "admin-post",
 categorie: "Klaviyo",
 bewerken: functie() {
 return el(
 " div",
                        { className: "klaviyo-featured-reviews" },
 "Klaviyo Uitgelichte recensies worden hier weergegeven"
 );
 },
 opslaan: functie() {
                    return null;
                },
 };
 blok.registerBlockType() "Klaviyo/all-reviews", {
 title: "Klaviyo Alle recensies",
 icoon: "admin-pagina",
 categorie: "Klaviyo",
 bewerken: functie() {
 return el(
 " div",
                        { className: "klaviyo-all-reviews" },
 "Klaviyo Alle recensies worden hier weergegeven"
 );
 },
 opslaan: functie() {
                    return null;
                },
 };
 } )(
 window.wp.blok,
 window.wp.element
        );
 ' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// Callback functies om het blok te renderen
functie 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>";
    }
}
functie render_klaviyo_star_ratings( $attributen, $content ) {
 global $product;
 if (isset($product)) {
        return "<div class='klaviyo-star-rating-widget' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
functie render_klaviyo_featured_reviews( $attributen, $content ) {
    return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
functie render_klaviyo_all_reviews( $attributen, $content ) {
    return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}

Plug-in toevoegen Klaviyo Beoordelingen

1. Navigeer naar Uiterlijk > Editor. 
2. Selecteer sjabloon. 
3. Kies je afzonderlijke product template. Merk op dat het een iets andere naam kan hebben. 
4. Klik op + om het blokmenu te openen.
    
5. Navigeer naar de Klaviyo sectie van het blokmenu.
   
6. Sleep de widget Klaviyo Recensies naar je thema.
7. Klik op Opslaan.

Voeg de sterrenclassificatie van de collecties toe widget

1. Navigeer naar Uiterlijk > Editor. 
2. Selecteer sjabloon. 
3. Kies een pagina die een verzameling producten bevat. 
4. Klik op + om het blokmenu te openen.
    
5. Navigeer naar de Klaviyo sectie van het blokmenu. 
6. Sleep de widget Sterrenclassificatie naar een willekeurig 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 widget met code toe

Voor dit proces moet je een codefragmentatieprogramma van derden toevoegen, zodat je code aan je site kunt toevoegen zonder je themabestanden direct te bewerken. Je kunt een hulpmiddel als codefragment gebruiken om de code voor deze widget toe te voegen. 

Broncode voor widget met beoordelingen toevoegen

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

1. Selecteer Snippets > Nieuw toevoegen in de Wordpress zijbalk.
   
2. Geef het knipsel in het veld Voer hier een titel in iets duidelijks, zoals "Klaviyo widget Code voor recensies".
3. Voeg in het tabblad Functies (PHP) van de sectie Code het onderstaande codefragment toe.
4. Klik op Wijzigingen opslaan en Activeren.

Je moet een codefragment installeren voor elk widget abonnement dat je wilt gebruiken. De secties hieronder beschrijven de code voor elke widget. 

Productbeoordelingen widget codefragment

Om de locatie van de widget op je site aan te passen, bewerk je de locatie van ('woocommerce_after_single_product_summary') en prioriteit(15) in de add_action functie.

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

Sterrenscore widget codefragment

Om de locatie van de widget op je site aan te passen, bewerk je de locatie van ('woocommerce_single_product_summary') en prioriteit(6) in de add_action functie.

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

Extra optionele codefragment

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

SEO widget

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

Carrousel-widget uitgelichte reviews

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

Kortere code toevoegen

Dit proces houdt in dat je de shortcode eerst registreert in je themabestanden en vervolgens ergens op je site invoegt. 

Om dit te voltooien moet je eerst een codefragmentatie-tool van derden toevoegen, zodat je code aan je site kunt toevoegen zonder direct je themabestanden te bewerken. Je kunt een hulpmiddel als codefragment gebruiken om de code voor deze widget toe te voegen. 

Registreer de shortcode en voeg widget toe

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

1. Selecteer Snippets > Nieuw toevoegen in de Wordpress zijbalk.
   
2. Geef het knipsel in het veld Voer hier een titel in iets duidelijks, zoals "Klaviyo widget Code voor recensies".
3. Voeg in het tabblad Functies (PHP) van de sectie Code het onderstaande codefragment toe.
4. Klik op Wijzigingen opslaan en Activeren.
5. Voeg elke widget's shortcode toe aan de pagina waar je de widget wilt laten verschijnen. 

codefragment en shortcode

Widget voor productreviews

codefragment (toevoegen aan het tabblad Functies (PHP)):

functie 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 Recensies-alle]

Sterrenscore widget

codefragment (toevoegen aan het tabblad Functies (PHP)):

functie 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 beoordelingen & Uitgelichte Carrousel widget

codefragment (toevoegen aan het tabblad Functies (PHP)):

functie klaviyo_add_featured_reviews_widget() {
    return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
functie klaviyo_add_all_reviews_widget() {
    return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}

shortcode: [Klaviyo-featured-reviews-carousel]

shortcode: [vervuld-reviewsall].

Direct je themabestanden aanpassen

Als je toegang hebt tot het functions.php bestand van je Wordpress instance, gebruik dan het onderstaande codefragment om de widget met beoordelingen toe te voegen. 

Productbeoordelingen widget codefragment

// maak een functie die een dynamische div weergeeft met het juiste product-ID
functie 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>" ;
 }
}
// plaats de widget na de enkele productsamenvatting
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Sterrenscore widget codefragment

// maak een functie die een dynamische div weergeeft met het juiste product-ID
functie 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>" ;
 }
}
// plaats de widget na de samenvatting van het enkele product
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Extra optionele codefragment

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

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 verschijnt Klaviyo Reviews widget op je webshop. 

Extra hulpbronnen

• Aan de slag met Klaviyo Reviews
• Hoe vraag je beoordelingen aan bij je klant met Klaviyo Beoordelingenstroom