So installierst du Klaviyo Reviews für WooCommerce

Du wirst lernen

Erfahre, wie du Klaviyo Reviews auf deinem WooCommerce Laden installierst und das Widget für Bewertungen hinzufügst. Wenn du wissen willst, was du tun musst, um loszulegen, schau dir die Seite Erste Schritte mit Klaviyo Reviews an.

Bevor du beginnst

Es gibt 4 Methoden, um Klaviyo Reviews für WooCommerce zu installieren. Welche für dich die richtige ist, hängt von deinen technischen Kenntnissen und deinem Wordpress-Setup ab. Verwende das folgende Flussdiagramm, um die beste Installationsmethode für dich auszuwählen. 

Bei der Wahl der Installationsmethode solltest du Folgendes beachten: 

• Das Hinzufügen von Sternebewertungen zu Sammlungsseiten wird nur für 2 Installationsmethoden unterstützt: Plug-in mit visuellem Editor und Kurzwahlnummer. 
• Überlege dir, welche Rechte du als Redakteur in Wordpress hast. Nicht alle Nutzer/innen haben die Möglichkeit, Website-Theme-Dateien direkt zu bearbeiten. Wenn du keinen Zugriff auf deine functions.php Datei oder ähnliches hast, verwende eine der anderen Methoden. 
• Einige dieser Methoden erfordern das Hinzufügen eines weiteren Plug-ins zu deiner Wordpress-Seite. Die folgenden Anweisungen beziehen sich auf das Code-Fragment-Plug-in. Klaviyo empfiehlt jedoch kein bestimmtes Plug-in und kann bei der Fehlersuche im Zusammenhang mit Plug-ins nicht helfen. 

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

Hier erfährst du, wie du Klaviyo Reviews für WooCommerce installierst: 

• Installation eines Plug-ins und Verwendung des visuellen Themeneditors 
• Ein Plug-in installieren, ohne den visuellen Themeneditor zu verwenden
• Hinzufügen der Kurzwahlnummer
• Ändern deiner Theme-Dateien

Widget für verfügbare Bewertungen

Sobald du Klaviyo Reviews installiert hast, wird in deinem Laden ein Bewertungs-Widget angezeigt, das die Details der Bewertung und der Rezension enthält. 

• Sterne-Bewertungs-Widget
  Zeigt deine aktuelle Sternebewertung für ein bestimmtes Produkt an und wird meist unter dem Produktnamen auf der Produktseite oder einer Sammlungsseite eingefügt.
  
• Widget für Produktbewertungen
  Zeigt ein Diagramm mit allen Bewertungen, die ein Produkt erhalten hat, Bilder, die mit den Bewertungen eingereicht wurden, und das häufigste Feedback, das das Produkt erhalten hat.
  
  Darunter findest du eine Liste mit allen veröffentlichten Bewertungen und Kundenfragen sowie eine Suchleiste, Bewertungsfilter, eine Schaltfläche " Bewertung schreiben" und eine Schaltfläche " Frage stellen".
  
  Dieses Widget wird normalerweise am unteren Ende einer Produktseite hinzugefügt.
• Karussell-Widget für hervorgehobene Bewertungen
  Zeigt hervorgehobene Bewertungen aus all deinen Produkten an. Du kannst sie auf deiner Homepage, auf einer eigenständigen Bewertungsseite oder an einem anderen Ort auf deiner Website veröffentlichen. Du kannst auch die Bewertungen auswählen, die in diesem Widget angezeigt werden sollen. Falls verfügbar, werden jeder Bewertung vom Kunden übermittelte Bilder beigefügt; falls keine Bilder übermittelt wurden, werden deine Produktbilder verwendet.
  
• SEO / Alle Bewertungen Widget
  Zeigt alle deine Bewertungen für alle Produkte auf einer einzigen Seite an. Nutze dieses Widget, um dein SEO zu verbessern und potenziellen Kunden einen zentralen Ort zu bieten, an dem sie sehen können, was deine aktuellen Kunden lieben. Dieses Widget wird meist zu einer eigenständigen Bewertungsseite auf deiner Website hinzugefügt.
  

Installiere ein Plug-in und verwende den visuellen Themeneditor 

Um den visuellen Theme-Editor zu verwenden, um Klaviyo Reviews Widget zu deiner Website hinzuzufügen, musst du zunächst einen Code hinzufügen, der diesen Drag-and-Drop-Block in dein Theme lädt. Du kannst ein Tool wie Code-Fragment verwenden, um den Quellcode für diesen Block hinzuzufügen, und dann den visuellen Theme-Editor verwenden, um Klaviyo Reviews Widget per Drag-and-Drop in dein Theme zu ziehen. 

Quellcode für das Bewertungs-Widget hinzufügen

In dieser Anleitung wird davon ausgegangen, dass du das Code-Fragment Plug-in bereits installiert hast, aber du kannst stattdessen auch ein anderes Plug-in verwenden. 

1. Wähle Snippets > Neu hinzufügen in der Wordpress-Seitenleiste.
   
2. Gib dem Snippet im Feld Titel eingeben einen eindeutigen Namen, z. B. "Klaviyo Reviews Widget Code".
3. Füge auf der Registerkarte Funktionen (PHP) im Abschnitt Code das folgende Code-Fragment hinzu.
4. Klicke auf Änderungen speichern und Aktivieren.

Bewertungen 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 Block() {
    // Registrieren und Einreihen des Logobildes
    wp_register_script(
        'Klaviyo-Block-Editor-Skript',
        false,
        array( 'wp-Block', 'wp-Element', 'wp-editor' ),
        false,
        true
    );
    $logo_url = Plug-in( 'img/Klaviyo-logo.png', Klaviyo/Klaviyo.php' );
    wp_add_inline_script( 'Klaviyo-Block-editor-script', '
        ( function( Block, Element ) {
            var el = Element.createElement;
            // Benutzerdefinierte Kategorie hinzufügen
            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 Produktbewertungen",
                icon: "admin-comments",
                { category: Klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-product-reviews" },
                        "Klaviyo Produktbewertungen werden hier angezeigt"
                    );
                },
                save: function() {
                    return null;
                },
            });
            Block.registerBlockType( Klaviyo/product-star-ratings", {
                title: "Klaviyo Star Ratings",
                icon: "Stern-gefüllt",
                category: Klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-product-star-ratings" },
                        "Klaviyo Produkt-Sternbewertungen werden hier angezeigt"
                    );
                },
                save: function() {
                    return null;
                },
            });
            Block.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 werden hier angezeigt"
                    );
                },
                save: function() {
                    return null;
                },
            });
            Block.registerBlockType( Klaviyo/all-reviews", {
                title: "Klaviyo Alle Bewertungen",
                icon: "admin-page",
                category: Klaviyo",
                edit: function() {
                    return el(
                        "div",
                        { className: "klaviyo-all-reviews" },
                        "Klaviyo Alle Bewertungen werden hier angezeigt"
                    );
                },
                save: function() {
                    return null;
                },
            });
        } )(
            window.wp.Block,
            window.wp.Element
        );
    ' );
}
add_action( 'Block', 'Block' );
// Callback-Funktionen zum Rendern des 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-in hinzufügen

1. Navigiere zu Erscheinungsbild > Editor. 
2. Wähle Vorlage. 
3. Wähle deine Einzelproduktvorlage. Beachte, dass sie einen etwas anderen Namen haben kann. 
4. Klicke auf +, um das Menü Block zu öffnen.
    
5. Navigiere zum Klaviyo Abschnitt des Menüs Block.
   
6. Ziehe Klaviyo Reviews Widget per Drag and Drop in dein Theme.
7. Klicke auf Speichern.

Füge das Widget für die Sternebewertung der Sammlungen hinzu

1. Navigiere zu Erscheinungsbild > Editor. 
2. Wähle Vorlage. 
3. Wähle eine Seite, die eine Sammlung von Produkten enthält. 
4. Klicke auf +, um das Menü Block zu öffnen.
    
5. Navigiere zum Klaviyo Abschnitt des Menüs Block. 
6. Ziehe das Sterne-Bewertungs-Widget auf ein beliebiges Produkt in der Sammlung.
7. Klicke auf Speichern.

.page-id-YOUR_PAGE_ID 

Klaviyo-Sterne-Bewertungs-Widget { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    margin: 0 auto; 
}

Installiere ein Plug-in und füge ein Widget mit Code hinzu

Dieser Prozess erfordert das Hinzufügen eines Code-Fragment-Tools eines Drittanbieters, damit du Code zu deiner Website hinzufügen kannst, ohne deine Themedateien direkt zu bearbeiten. Du kannst ein Tool wie Code-Fragment verwenden, um den Code für diese Widgets hinzuzufügen. 

Quellcode für das Bewertungs-Widget hinzufügen

In dieser Anleitung wird davon ausgegangen, dass du das Code-Fragment Plug-in bereits installiert hast, aber du kannst stattdessen auch ein anderes Plug-in verwenden. 

1. Wähle Snippets > Neu hinzufügen in der Wordpress-Seitenleiste.
   
2. Gib dem Snippet im Feld Titel eingeben einen eindeutigen Namen, z. B. "Klaviyo Reviews Widget Code".
3. Füge auf der Registerkarte Funktionen (PHP) im Abschnitt Code das folgende Code-Fragment hinzu.
4. Klicke auf Änderungen speichern und Aktivieren.

Du musst für jedes Widget, das du abonnierst, ein Code-Fragment installieren. In den folgenden Abschnitten wird der Code für jedes Widget beschrieben. 

Produktbewertungen Widget Code-Fragment

Um die Position des Widgets auf deiner Website anzupassen, bearbeite die Position ("woocommerce_after_single_product_summary") und die Priorität(15) in der add_action-Funktion.

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

Sternebewertung Widget Code-Fragment

Um die Position des Widgets auf deiner Website anzupassen, bearbeite die Position ("woocommerce_single_product_summary") und die Priorität(6) in der add_action-Funktion.

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ätzliches optionales Code-Fragment

Verwende dieses Code-Fragment, um ein optionales Widget an beliebiger Stelle auf deiner Website einzufügen. Beachte, dass du diese in den HTML-Code einer bestimmten Seite einfügen musst; sie können nicht in deine functions.php-Datei eingefügt werden.

SEO-Widget

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

Karussell-Widget mit ausgewählten Bewertungen

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

Kurzwahlnummer hinzufügen

Dazu musst du zuerst die Kurzwahlnummer in deinen Themadateien registrieren und dann die Kurzwahlnummer an einer beliebigen Stelle auf deiner Website einfügen. 

Dazu musst du zunächst ein Code-Fragment-Tool eines Drittanbieters hinzufügen, damit du Code zu deiner Website hinzufügen kannst, ohne deine Themedateien direkt zu bearbeiten. Du kannst ein Tool wie Code-Fragment verwenden, um den Code für diese Widgets hinzuzufügen. 

Die Kurzwahlnummer registrieren und Widget hinzufügen

In dieser Anleitung wird davon ausgegangen, dass du das Code-Fragment Plug-in bereits installiert hast, aber du kannst stattdessen auch ein anderes Plug-in verwenden. 

1. Wähle Snippets > Neu hinzufügen in der Wordpress-Seitenleiste.
   
2. Gib dem Snippet im Feld Titel eingeben einen eindeutigen Namen, z. B. "Klaviyo Reviews Widget Code".
3. Füge auf der Registerkarte Funktionen (PHP) im Abschnitt Code das folgende Code-Fragment hinzu.
4. Klicke auf Änderungen speichern und Aktivieren.
5. Füge die Kurzwahlnummer jedes Widgets auf der Seite ein, auf der das Widget erscheinen soll. 

Code-Fragment und Kurzwahlnummer

Widget für Produktbewertungen

Code-Fragment (auf der Registerkarte Funktionen (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', 'klaviyoo_add_product_reviews_widget');

Kurzwahlnummer: [Klaviyo Reviews-all]

Star Rating Widget

Code-Fragment (auf der Registerkarte Funktionen (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 & Featured Carousel Widget

Code-Fragment (auf der Registerkarte Funktionen (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, kannst du das folgende Code-Fragment verwenden, um das Widget für Bewertungen hinzuzufügen. 

Produktbewertungen Widget Code-Fragment

// Erstelle eine Funktion, die ein dynamisches Div mit der richtigen Produkt-ID rendert
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>" ;
    }
}
// Platziere das Widget nach der einzelnen Produktübersicht
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Sternebewertung Widget Code-Fragment

// Erstelle eine Funktion, die ein dynamisches Div mit der richtigen Produkt-ID rendert
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>" ;
    }
}
// Platziere das Widget nach der einzelnen Produktübersicht
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Zusätzliches optionales Code-Fragment

Füge dieses Code-Fragment hinzu, um ein optionales Widget an beliebiger Stelle auf deiner Seite einzufügen. Beachte, dass du diese in den HTML-Code einer bestimmten Seite einfügen musst; sie können nicht in deine functions.php-Datei eingefügt werden.

SEO / Alle Bewertungen Widget

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

Karussell-Widget mit ausgewählten Bewertungen

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

Ergebnis

Nachdem du diese Schritte durchgeführt hast, wird das Klaviyo Reviews Widget in deinem Online-Shop erscheinen. 

Zusätzliche Ressourcen

• Erste Schritte mit Klaviyo Reviews
• So forderst du mit Klaviyo Reviews Flow Bewertungen von deinem Kunden an