So installierst du Klaviyo Reviews für WooCommerce

Übersicht

Hier erfährst du, wie du Klaviyo Reviews in deinem WooCommerce-Shop installierst und Bewertungs-Widgets hinzufügst. Um mehr über alle Schritte zu erfahren, die für den Einstieg erforderlich sind, gehe zu Erste Schritte mit Klaviyo Reviews.

Bevor du anfängst

Es gibt vier Methoden zum Installieren von Klaviyo Reviews für WooCommerce. Welche Methode für dich geeignet ist, hängt von deinem technischen Kenntnisstand und deinem WordPress-Setup ab. Wähle anhand des folgenden Flussdiagramms die für dich am besten geeignete Installationsmethode aus.

Wenn du eine Installationsmethode auswählst, beachte Folgendes:

• Das Hinzufügen von Sternebewertungen zu Kategorieseiten wird nur bei 2 Installationsmethoden unterstützt: Plug-in mit visuellem Editor und Kurzwahlnummern.
• Berücksichtige dein Editorzugriffslevel in Wordpress. Nicht alle Nutzer*innen haben die Option, Website-Theme-Dateien direkt zu bearbeiten. Wenn du keinen Zugriff auf deine functions.php-Datei oder eine ähnliche Datei hast, verwende eine der anderen Methoden.
• Für einige dieser Methoden musst du ein weiteres Plug-in zu deiner WordPress-Website hinzufügen. Die Anweisungen unten beziehen sich auf das Plug-in „Code-Fragment“, aber Klaviyo empfiehlt kein bestimmtes Plug-in und kann bei Plug-in-bezogener Fehlerbehebung nicht helfen.

Sobald du die richtigen Installationsschritte für dich ausgewählt hast, fahre mit den entsprechenden Anweisungen fort.

So installierst du Klaviyo Reviews für WooCommerce:

• Ein Plug-in installieren und den visuellen Theme-Editor verwenden
• Ein Plug-in installieren, ohne den visuellen Theme-Editor zu verwenden
• Kurzwahlnummern hinzufügen
• Deine Theme-Dateien ändern

Verfügbare Bewertungs-Widgets

Sobald du Klaviyo Reviews installiert hast, zeigt dein Shop Bewertungs-Widgets an, die Bewertungen und Rezensionsdetails enthalten.

• Sternebewertungs-Widget
  Zeigt deine aktuelle Sternebewertung für ein bestimmtes Produkt an und wird meistens unter dem Namen deines Produkts hinzugefügt, entweder auf der Produktseite oder einer Kategorieseite.
  

• Widget für Produktbewertungen
  Zeigt ein Diagramm, das alle Bewertungen aufschlüsselt, die ein Produkt erhalten hat, von Nutzer*innen eingereichte Bilder mit Bewertungen sowie das häufigste Feedback, das das Produkt erhalten hat.
  
  Darunter befindet sich eine Liste aller veröffentlichten Bewertungen und Fragen von Kund*innen sowie eine Suchleiste, Bewertungsfilter, eine Schaltfläche Bewertung schreiben und eine Schaltfläche Frage stellen.
  
  Dieses Widget wird normalerweise in der Nähe des unteren Endes einer Produktseite hinzugefügt.

• Widget für hervorgehobenes Rezensionen-Karussell
  Zeigt hervorgehobene Rezensionen aus all deinen Produkten an. Du kannst dies auf deiner Startseite, auf einer eigenständigen Rezensionen-Seite oder an einer beliebigen anderen Stelle auf deiner Website platzieren. Du kannst auch die Rezensionen auswählen, die in diesem Widget hervorgehoben werden. Falls verfügbar, werden jeder Rezension von Kund*innen eingereichte Bilder beigefügt; deine Produktbilder werden verwendet, wenn kein Bild eingereicht wurde.
  

• SEO / Widget „Alle Bewertungen“
  Zeigt alle deine Bewertungen über alle Produkte hinweg auf einer einzigen Seite an. Verwende dieses Widget, um deine SEO zu verbessern und potenziellen Kund*innen einen zentralen Ort zu bieten, an dem sie sehen können, was deine aktuellen Kund*innen lieben. Dieses Widget wird am häufigsten zu einer eigenständigen Bewertungen -Seite auf deiner Website hinzugefügt.
  

Ein Plug-in installieren und den visuellen Theme-Editor verwenden

Um den visuellen Theme-Editor zu verwenden, um deiner Website Klaviyo Reviews-Widgets hinzuzufügen, musst du zuerst ein Codestück hinzufügen, um diese Drag-and-drop-Blöcke in deinem Theme zu laden. Du kannst ein Tool wie Code-Fragment verwenden, um den Quellcode für diese Blöcke hinzuzufügen, und dann den visuellen Theme-Editor verwenden, um Klaviyo Reviews-Widgets per Drag-and-drop in dein Theme zu ziehen.

Quellcode für Bewertungs-Widgets hinzufügen

Diese Anweisungen gehen davon aus, dass du das Plug-in Code-Fragment bereits installiert hast, du kannst aber stattdessen auch ein anderes Plug-in verwenden.

1. Wähle in der WordPress-Seitenleiste Fragmente > Neu hinzufügen aus.
   

2. Gib dem Fragment im Feld Titel hier eingeben einen eindeutigen Namen, z. B. „Klaviyo Reviews Widgets Code“.
3. Füge im Tab Functions (PHP) im Abschnitt Code das folgende Code-Fragment ein.
4. Klicke auf Änderungen speichern und aktivieren.

Überprüft den Widget-Quellcode

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 hinzufügen

1. Gehe zu Design > Editor.
2. Select Vorlage.
3. Wähle deine Vorlage Einzelnes Produkt aus. Beachte, dass es möglicherweise einen leicht abweichenden Namen hat.
4. Klicke auf +, um das Blockmenü zu öffnen.
   

5. Gehe im Menü Blöcke zum Abschnitt Klaviyo.
   

6. Ziehe Klaviyo Reviews-Widgets per Drag-and-drop in dein Theme.
7. Klicke auf Speichern.

Füge das Widget für Sternebewertungen der Kollektionen hinzu

1. Gehe zu Design > Editor.
2. Select Vorlage.
3. Wähle eine Seite aus, die eine Sammlung von Produkten enthält.
4. Klicke auf +, um das Blockmenü zu öffnen.
   

5. Navigiere zum Abschnitt Klaviyo im Menü Blöcke.
6. Ziehe das Widget Sternebewertung auf ein beliebiges Produkt in der Kollektion.
7. Klicke auf Speichern.

.page-id-YOUR_PAGE_ID 

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

Ein Plug-in installieren und Widgets mit Code hinzufügen

Für diesen Prozess musst du ein Tool eines Drittanbieters für Code-Fragmente hinzufügen, damit du Code zu deiner Website hinzufügen kannst, ohne deine Theme-Dateien direkt zu bearbeiten. Du kannst ein Tool wie Code-Fragment verwenden, um den Code für diese Widgets hinzuzufügen.

Quellcode für Bewertungs-Widgets hinzufügen

Diese Anleitung setzt voraus, dass du das Code-Fragment -Plug-in bereits installiert hast, aber du kannst stattdessen auch ein anderes Plug-in verwenden.

1. Wähle in der WordPress-Seitenleiste Fragmente > Neu hinzufügen aus.
   

2. Gib dem Fragment im Feld Titel hier eingeben einen eindeutigen Namen, z. B. „Klaviyo Reviews Widgets Code“.
3. Füge im Tab Funktionen (PHP) im Abschnitt Code die folgenden Code-Fragmente ein.
4. Klicke auf Änderungen speichern und aktivieren.

Du musst für jedes Widget, das du verwenden möchtest, ein Code-Fragment installieren. In den folgenden Abschnitten ist der Code für jedes Widget aufgeführt.

Code-Fragment für das Widget für Produktbewertungen

Um die Position des Widgets auf deiner Website anzupassen, bearbeite den Standort ('woocommerce_after_single_product_summary') und die Priorität (15) in der Funktion 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);

Code-Fragment für das Sternebewertungs-Widget

Um die Position des Widgets auf deiner Website anzupassen, bearbeite den Standort ('woocommerce_single_product_summary') und die Priorität (6) in der Funktion 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);

Zusätzliche optionale Code-Fragmente

Verwende diese Code-Fragmente, um optionale Widgets an beliebiger Stelle auf deiner Website hinzuzufügen. Beachte, dass du diese dem HTML einer bestimmten Seite hinzufügen musst; sie können nicht deiner functions.php-Datei hinzugefügt werden.

SEO-Widget

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

Karussell-Widget mit hervorgehobenen Bewertungen

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

Kurzwahlnummern hinzufügen

Bei diesem Prozess werden zuerst die Kurzwahlnummern in deinen Theme-Dateien registriert und anschließend werden die Kurzwahlnummern an beliebiger Stelle auf deiner Website eingefügt.

Um das abzuschließen, musst du zuerst ein Drittanbieter-Tool für Code-Fragmente hinzufügen, damit du Code zu deiner Website hinzufügen kannst, ohne deine Theme-Dateien direkt zu bearbeiten. Du kannst ein Tool wie Code Snippets verwenden, um den Code für diese Widget hinzuzufügen.

Kurzwahlnummern registrieren und Widgets hinzufügen

Diese Anweisungen setzen voraus, dass du das Code-Fragment -Plug-in bereits installiert hast, aber du kannst stattdessen auch ein anderes Plug-in verwenden.

1. Wähle in der WordPress-Seitenleiste Fragmente > Neu hinzufügen aus.
   

2. Gib dem Fragment im Feld Titel hier eingeben einen eindeutigen Namen, z. B. „Klaviyo Reviews Widgets Code“.
3. Füge im Tab Funktionen (PHP) im Abschnitt Code die folgenden Code-Fragmente ein.
4. Klicke auf Änderungen speichern und aktivieren.
5. Füge die Kurzwahlnummer jedes Widgets zu der Seite hinzu, auf der das Widget angezeigt werden soll.

Code-Fragmente und Kurzwahlnummern

Widget für Produktbewertungen

Code-Fragment (zum Tab Functions (PHP) hinzufügen):

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

Kurzwahlnummer: [klaviyo-reviews-all]

Widget für Sternebewertungen

Code-Fragment (zum Tab Functions (PHP) hinzufügen):

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

Kurzwahlnummer: [klaviyo_star_rating]

SEO / Alle Bewertungen & Vorgestelltes Karussell-Widget

Code-Fragment (zum Tab Functions (PHP) hinzufügen):

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

Kurzwahlnummer: [klaviyo-featured-reviews-carousel]

Kurzwahlnummer: [fulfilled-reviews-all]

Ändere deine Theme-Dateien direkt

Wenn du Zugriff auf die Datei functions.php deiner Wordpress-Instanz hast, verwende die Code-Fragmente unten, um Bewertungs-Widgets hinzuzufügen.

Code-Fragment für das Widget für Produktbewertungen

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

Code-Fragment für das Sternebewertungs-Widget

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

Zusätzliche optionale Code-Fragmente

Füge diese Code-Fragmente hinzu, um optionale Widgets überall auf deiner Website hinzuzufügen. Beachte, dass du diese dem HTML einer bestimmten Seite hinzufügen musst; sie können nicht deiner functions.php-Datei hinzugefügt werden.

Widget für SEO / alle Bewertungen

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

Karussell-Widget mit hervorgehobenen Bewertungen

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

Ergebnis

Nachdem du diese Schritte abgeschlossen hast, werden Klaviyo Reviews-Widgets in deinem Onlineshop angezeigt.