Hur man installerar Klaviyo Reviews för WooCommerce

Du kommer att lära dig

Lär dig hur du installerar Klaviyo Reviews på din WooCommerce butik och lägger till recensioner widget. För att lära dig mer om alla steg som krävs för att komma igång, gå till Komma igång med Klaviyo Reviews.

Innan du börjar

Det finns 4 metoder för att installera Klaviyo Reviews för WooCommerce. Vilken som är rätt för dig beror på din tekniska kunskapsnivå och din Wordpress-installation. Använd flödesschemat nedan för att välja den bästa installationsmetoden för dig. 

När du väljer installationsmetod bör du tänka på följande: 

• Att lägga till stjärnbetyg på samlingssidor stöds endast för två installationsmetoder: plugin med visuell redigerare och kortnummer. 
• Tänk på din nivå av redaktörsbehörighet i Wordpress. Det är inte alla användare som har möjlighet att redigera webbplatsens temafiler direkt. Om du inte har tillgång till din functions.php-fil eller liknande kan du använda någon av de andra metoderna. 
• Flera av dessa metoder kräver att du lägger till ett annat plugin till din Wordpress-webbplats. Instruktionerna nedan hänvisar till kodsnippet plugin, men Klaviyo stöder inte någon särskild plugin och kan inte hjälpa till med plugin-relaterad felsökning. 

När du har valt rätt installationssteg för dig, fortsätt med de relevanta instruktionerna. 

Lär dig hur du installerar Klaviyo Reviews för WooCommerce av: 

• Installera ett plugin och använda den visuella temaredigeraren 
• Installera ett plugin utan att använda den visuella temaredigeraren
• Lägga till kortnummer
• Ändra dina temafiler

Tillgängliga recensioner widget

När du har installerat Klaviyo Reviews, kommer din butik att visa recensioner widget, som funktioner betyg och recensioner detaljer. 

• Stjärnklassificering widget
  Visar ditt aktuella stjärnbetyg för en viss produkt och läggs oftast till under produktens namn antingen på produktsidan eller på en kollektionssida.
  
• Produktrecensioner widget
  Visar ett diagram med alla betyg som en produkt har fått, användarbilder som skickats in med recensioner och den vanligaste feedbacken som produkten har fått.
  
  Nedan finns en lista över alla publicerade recensioner och kundfrågor samt ett sökfält, recensionsfilter, en knapp för att skriva en recension och en knapp för att ställa en fråga.
  
  Denna widget läggs vanligtvis till längst ner på en produktsida.
• Karusell för utvalda recensioner widget
  Visar markerade recensioner från alla dina produkter. Du kan göra detta på din hemsida, på en fristående sida med recensioner eller var som helst på din webbplats. Du kan också välja vilka recensioner som ska visas på widget. Om möjligt följer kund-inlämnade bilder med varje recension; dina produktbilder används om ingen bild har lämnats in.
  
• SEO / Alla recensioner widget
  Visar alla dina recensioner för alla produkter på en enda sida. Använd denna widget för att förbättra din SEO och ge en enda plats för potentiella kunder att se vad dina nuvarande kunder älskar. Den här widget läggs oftast till på en fristående sida med recensioner på din webbplats.
  

Installera ett plugin och använd den visuella temaredigeraren 

För att kunna använda den visuella temaredigeraren för att lägga till Klaviyo Reviews widget på din webbplats måste du först lägga till en kod för att ladda dessa dra-och-släpp-block i ditt tema. Du kan använda ett verktyg som kodsnippet för att lägga till källkoden för dessa block och sedan använda den visuella temaredigeraren för att dra och släppa Klaviyo Reviews widget i ditt tema. 

Lägg till källkod för widget för recensioner

Dessa instruktioner förutsätter att du redan har installerat kodsnippet plugin, men du kan använda en annan plugin istället. 

1. Välj Snippets > Lägg till nytt från Wordpress sidofält.
   
2. I fältet Ange titel här namnger du snippet på ett tydligt sätt, till exempel "Klaviyo Reviews widget Code".
3. I fliken Functions (PHP) i avsnittet Code lägger du till kodsnippet nedan.
4. Klicka på Spara ändringar och aktivera.

Recensioner widget källkod

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() {
 // Registrera och enqueue logotypbilden
 wp_register_script(
 'Klaviyo-block-editor-script',
 false,
 array( 'wp-block', '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( block, element ) {
 var el = element.createElement;
            // Lägg till anpassad kategori
 block.updateCategory( "widget", {
 slug: "Klaviyo" ,
 title: "Klaviyo",
 icon: el("img", { src: "' . $logo_url . '", style: { width: "20px", height: "20px" } })
           } );
 block.registerBlockType( "Klaviyo/product-reviews", {
 title: "Klaviyo Produktrecensioner",
 icon: "admin-comments",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-product-reviews" },
 "Klaviyo Produktrecensioner kommer att visas här"
 );
 },
 save: function() {
                    return null;
                },
 });
 block.registerBlockType( "Klaviyo/product-star-ratings", {
 title: "Klaviyo Star Ratings",
 icon: "stjärnfylld",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-product-star-ratings" },
 "Klaviyo Product Star Ratings kommer att visas här"
 );
 },
 save: function() {
                    return null;
                },
 });
 block.registerBlockType( "Klaviyo/featured-reviews", {
 title: "Klaviyo Utvalda recensioner",
 icon: "admin-post",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-featured-reviews" },
 "Klaviyo Utvalda recensioner kommer att visas här"
 );
 },
 save: function() {
                    return null;
                },
 });
 block.registerBlockType( "Klaviyo/all-reviews", {
 title: "Klaviyo Alla recensioner",
 icon: "admin-sida",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-all-reviews" },
 "Klaviyo Alla recensioner kommer att visas här"
 );
 },
 save: function() {
                    return null;
                },
 });
 } )(
 window.wp.block,
 window.wp.element
        );
 ' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// Callback-funktioner för att rendera blocket
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>";
}

Lägg till Klaviyo Reviews plugin

1. Navigera till Utseende > Editor. 
2. Välj galleria. 
3. Välj din mall för enstaka produkter. Observera att den kan ha ett något annorlunda namn. 
4. Klicka på + för att öppna menyn block.
    
5. Navigera till avsnittet Klaviyo avsnittet i blockmenyn.
   
6. Dra och släpp Klaviyo Reviews widget i ditt tema.
7. Klicka på Spara.

Lägg till samlingarnas stjärnklassificering widget

1. Navigera till Utseende > Editor. 
2. Välj galleria. 
3. Välj en sida som innehåller en samling produkter. 
4. Klicka på + för att öppna menyn block.
    
5. Navigera till avsnittet Klaviyo avsnittet i blockmenyn. 
6. Dra stjärnklassificeringen widget till valfri produkt i kollektionen.
7. Klicka på Spara.

.page-id-DITT_PAGE_ID 

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

Installera en plugin och lägg till widget med kod

Den här processen kräver att du lägger till ett kodsnippet-verktyg från tredje part, så att du kan lägga till kod på din webbplats utan att direkt redigera dina temafiler. Du kan använda ett verktyg som kodsnippet för att lägga till koden för dessa widgetar. 

Lägg till källkod för widget för recensioner

Dessa instruktioner förutsätter att du redan har installerat kodsnippet plugin, men du kan använda en annan plugin istället. 

1. Välj Snippets > Lägg till nytt från Wordpress sidofält.
   
2. I fältet Ange titel här namnger du snippet på ett tydligt sätt, till exempel "Klaviyo Reviews widget Code".
3. I fliken Functions (PHP) i avsnittet Code lägger du till kodsnippet nedan.
4. Klicka på Spara ändringar och aktivera.

Du måste installera en kodsnippet för varje widget som du vill använda. I avsnitten nedan beskrivs koden för varje widget. 

Produktrecensioner widget kodsnippet

För att justera placeringen av widget på din webbplats, redigera placeringen av ('woocommerce_after_single_product_summary') och prioritet(15) i add_action-funktionen.

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

Stjärnbetyg widget kodsnippet

För att justera platsen för widget på din webbplats, redigera platsen för ('woocommerce_single_product_summary') och prioritet(6) i add_action-funktionen.

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

Ytterligare valfri kodsnippet

Använd dessa kodsnippet för att lägga till valfri widget var som helst på din webbplats. Observera att du måste lägga till dessa i HTML-koden för en specifik sida; de kan inte läggas till i filen functions.php.

SEO-widget

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

Karusellwidget för utvalda recensioner

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

Lägg till kortnummer

Den här processen innebär att du först registrerar kortnumret i dina temafiler och sedan infogar kortnumret var som helst på din webbplats. 

För att slutföra detta måste du först lägga till ett kodsnippet-verktyg från tredje part så att du kan lägga till kod på din webbplats utan att direkt redigera dina temafiler. Du kan använda ett verktyg som kodsnippet för att lägga till koden för dessa widgetar. 

Registrera kortnummer och lägg till widget

Dessa instruktioner förutsätter att du redan har installerat kodsnippet plugin, men du kan använda en annan plugin istället. 

1. Välj Snippets > Lägg till nytt från Wordpress sidofält.
   
2. I fältet Ange titel här namnger du snippet på ett tydligt sätt, till exempel "Klaviyo Reviews widget Code".
3. I fliken Functions (PHP) i avsnittet Code lägger du till kodsnippet nedan.
4. Klicka på Spara ändringar och aktivera.
5. Lägg till varje widget:s kortnummer på den sida där du vill att widget ska visas. 

kodsnippet och kortnummer

Produktrecensionswidget

kodsnippet (lägg till på fliken Funktioner (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');

kortnummer: [Klaviyo Recensioner-alla]

Widget för stjärnklassificering

kodsnippet (lägg till på fliken Funktioner (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');

kortnummer: [klaviyo_star_rating]

SEO / Alla recensioner & Featured Carousel widget

kodsnippet (lägg till på fliken Funktioner (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>";
}

kortnummer: [Klaviyo-featured-reviews-carousel]

kortnummer: [uppfyllt-reviews-all]

Modifiera dina temafiler direkt

Om du har tillgång till filen functions.php i din Wordpress-instans kan du använda kodsnippet nedan för att lägga till en widget för recensioner. 

Produktrecensioner widget kodsnippet

// skapa en funktion som renderar en dynamisk div med rätt produkt-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>" ;
 }
}
// placera widget efter sammanfattningen av enstaka produkter
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Stjärnbetyg widget kodsnippet

// skapa en funktion som renderar en dynamisk div med rätt produkt-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>" ;
 }
}
// placera widget efter sammanfattningen av enstaka produkter
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Ytterligare valfri kodsnippet

Lägg till dessa kodsnippet för att lägga till valfri widget var som helst på din webbplats. Observera att du måste lägga till dessa i HTML-koden för en specifik sida; de kan inte läggas till i filen functions.php.

SEO/Alla recensioner-widget

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

Karusellwidget för utvalda recensioner

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

Utfall

När du har slutfört dessa steg kommer Klaviyo Reviews widget att visas på din webbbutik. 

Ytterligare resurser

• Kom igång med Klaviyo Reviews
• Så här begär du omdömen från din kund med Klaviyo Reviews flöde