Så här installerar du Klaviyo Reviews för WooCommerce

Du kommer att lära dig

Lär dig hur du installerar Klaviyo Reviews i din WooCommerce-butik och lägger till recensionswidgetar. Om du vill läsa om alla steg som krävs för att komma igång kan du 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 passar dig beror på din tekniska kunskapsnivå och din WordPress-konfiguration. Använd flödesschemat nedan för att välja den bästa installationsmetoden för dig.

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

• Det finns bara stöd för att lägga till stjärnbetyg på samlingssidor med 2 installationsmetoder: plugin med visuell redigerare och kortnummer.
• Ta hänsyn till din nivå av redigeringsåtkomst i Wordpress. Alla användare har inte möjlighet att redigera webbplatsens temafiler direkt. Om du inte har åtkomst till din functions.php-fil eller liknande använder du någon av de andra metoderna.
• Flera av de här metoderna kräver att du lägger till ytterligare ett plugin på din Wordpress-webbplats. Instruktionerna nedan hänvisar till pluginet kodsnippet, men Klaviyo rekommenderar inget specifikt plugin och kan inte hjälpa till med felsökning som rör plugin.

När du har valt rätt installationssteg för dig går du vidare till relevanta instruktioner.

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

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

Tillgängliga recensionswidgetar

När du har installerat Klaviyo Reviews kommer din butik att visa recensionswidgetar, som innehåller betyg och recensionsinformation.

• Widget för stjärnbetyg
  Visar ditt nuvarande stjärnbetyg för en viss produkt och läggs oftast till under produktens namn, antingen på produktsidan eller på en kollektionssida.
  

• Widget för produktrecensioner
  Visar ett diagram som bryter ner alla betyg som en produkt har fått, användarbilder som skickats in med recensioner och den vanligaste feedbacken som produkten har fått.
  
  Under det finns en lista över alla publicerade recensioner och kundfrågor, tillsammans med ett sökfält, recensionsfilter, en Skriv en recension -knapp och en Ställ en fråga -knapp.
  
  Den här widgeten läggs vanligtvis till nära botten av en produktsida.

• Widget för karusell med utvalda recensioner
  Visar utvalda recensioner från alla dina produkter. Du kan visa upp detta på din startsida, på en fristående recensionssida eller någon annanstans på din webbplats. Du kan också välja vilka recensioner som visas i den här widgeten. Om det finns tillgängligt medföljer kundinskickade bilder varje recension; dina produktbilder används om ingen bild skickades in.
  

• SEO / Widget för alla recensioner
  Visar alla dina recensioner för alla produkter på en enda sida. Använd den här widgeten för att förbättra din SEO och ge potentiella kunder en enda plats där de kan se vad dina nuvarande kunder gillar. Den här widgeten läggs oftast till på en fristående sida för Recensioner på din webbplats.
  

Installera en plugin och använd den visuella temaredigeraren

För att använda den visuella temaredigeraren för att lägga till widgetar för Klaviyo Reviews på din webbplats måste du först lägga till en kodsnutt för att läsa in 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 widgetar för Klaviyo Reviews i ditt tema.

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

De här instruktionerna förutsätter att du redan har installerat pluginet kodsnippet, men du kan använda ett annat plugin i stället.

1. Välj Snippets > Lägg till nytt i Wordpress-sidofältet.
   

2. I fältet Ange titel här ger du kodsnippeten ett tydligt namn, som till exempel ”Klaviyo Reviews-widgetkod”.
3. På fliken Functions (PHP) i avsnittet Code lägger du till kodsnutten nedan.
4. Klicka på Spara ändringar och Aktivera.

Källkod för recensionswidget

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

Lägg till Klaviyo Reviews-plugin

1. Gå till Utseende > Redigerare.
2. Select mall.
3. Välj din Mall för enskild produkt. Observera att den kan ha ett något annat namn.
4. Klicka på + för att öppna blockmenyn.
   

5. Navigera till avsnittet Klaviyo i menyn Block.
   

6. Dra och släpp Klaviyo Reviews-widgetar i ditt tema.
7. Klicka på Spara.

Lägg till widgeten med stjärnbetyg för kollektioner

1. Gå till Utseende > Redigerare.
2. Select mall.
3. Välj en sida som innehåller en samling produkter.
4. Klicka på + för att öppna blockmenyn.
   

5. Gå till avsnittet Klaviyo i menyn Block.
6. Dra widgeten Stjärnbetyg till valfri produkt i kollektionen.
7. Klicka på Spara.

.page-id-YOUR_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 widgetar med kod

Den här processen kräver att du lägger till ett verktyg för kodsnippet 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 widgeten för recensioner

De här instruktionerna förutsätter att du redan har installerat plugin kodsnippet, men du kan använda ett annat plugin i stället.

1. Välj Snippets > Lägg till nytt i Wordpress-sidofältet.
   

2. I fältet Ange titel här ger du kodsnippeten ett tydligt namn, som till exempel ”Klaviyo Reviews-widgetkod”.
3. På fliken Functions (PHP) i avsnittet Code lägger du till kodsnippen nedan.
4. Klicka på Spara ändringar och Aktivera.

Du måste installera ett kodsnippet för varje widget du planerar att använda. Avsnitten nedan beskriver koden för varje widget.

Kodsnippet för widget för produktrecensioner

För att justera widgetens placering på din webbplats redigerar du platsen för ('woocommerce_after_single_product_summary') och prioriteten (15) i funktionen 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);

Kodsnippet för stjärnbetygswidget

För att justera widgetens placering på din webbplats redigerar du platsen för ('woocommerce_single_product_summary') och prioriteten (6) i funktionen 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);

Ytterligare valfria kodsnippet

Använd dessa kodsnippet för att lägga till valfria widgetar 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 din functions.php-fil.

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 kortnummer i dina temafiler och sedan infogar kortnummer var som helst på din webbplats.

För att slutföra detta måste du först lägga till ett tredjepartsverktyg för kodsnippet 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 kortnumren och lägg till widgetar

De här instruktionerna förutsätter att du redan har installerat pluginet kodsnippet, men du kan använda ett annat plugin i stället.

1. Välj Snippets > Lägg till nytt i Wordpress-sidofältet.
   

2. I fältet Ange titel här ger du kodsnippeten ett tydligt namn, som till exempel ”Klaviyo Reviews-widgetkod”.
3. På fliken Functions (PHP) i avsnittet Code lägger du till kodsnippen nedan.
4. Klicka på Spara ändringar och Aktivera.
5. Lägg till varje widgets kortnummer på sidan där du vill att widgeten ska visas.

Kodsnippet och kortnummer

Produktrecensionswidget

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

Kortnummer: [klaviyo-reviews-all]

Widget för stjärnbetyg

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

Kortnummer: [klaviyo_star_rating]

SEO / Alla recensioner och widget för utvald karusell

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

Kortnummer: [klaviyo-featured-reviews-carousel]

Kortnummer: [fulfilled-reviews-all]

Ändra dina temafiler direkt

Om du har åtkomst till filen functions.php i din Wordpress-instans kan du använda kodsnippet nedan för att lägga till widget för recensionsomdömen.

Kodsnippet för widget för produktrecensioner

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

Kodsnippet för stjärnbetygswidget

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

Ytterligare valfria kodsnippet

Lägg till de här kodsnippen för att lägga till valfria widgetar 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 din functions.php-fil.

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 de här stegen visas Klaviyo Reviews-widgetar i din webbshop.

Ytterligare resurser