Woocommerce

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in WooCommerce.
Recommendations WooCommerce

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, wodurch es möglich ist, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. In diesem Artikel wird erklärt, wie du mit Recommendations mithilfe des WooCommerce-Plugins startest.

Unsere vollständigen Best Practices dazu, welche Recommendations verwendet werden sollten, findest du in diesem Artikel.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die sich auf ein Design beziehen. Nachfolgend findest du eine grundlegende Anleitung zum Einrichten eines Elements.

Wenn du die Schritte in my.clerk.io > Settings > Setup Guides befolgst, werden die Elements für unsere Best Practices automatisch erstellt.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. So können Kunden mit weniger Klicks mehr Produkte sehen. Du kannst entweder den Design Editor nutzen, um das Design visuell zu konfigurieren, oder Code Designs verwenden.

Ein Design kann für beliebig viele Recommendations Elements wiederverwendet werden, die du erstellst.

Design Editor #

  1. Gehe zu Recommendations > Designs und klicke auf New Design.
  2. Wähle Product Slider
  3. Wähle aus der Liste der Designvorlagen diejenige aus, mit der du starten möchtest.
  4. Gib dem Design einen Namen und klicke auf Create design.
  5. Nimm alle gewünschten Änderungen am Design vor.

Code Design #

  1. Gehe zu Recommendations > Designs und klicke auf New Design.
  2. Wähle Other designs > Blank > Code.
  3. Gib dem Design einen Namen und klicke auf Create design.
  4. Erstelle ein Code-Design von Grund auf mit Liquid code.

Wenn du ein Startdesign möchtest, sieh dir die Slider-Vorlage weiter unten an.

Element erstellen #

Dies enthält alle Einstellungen, die für die Anzeige der Recommendations verwendet werden, und macht sie auf deiner Website einbettbar. Folge diesen Schritten für jedes Recommendations-Banner, das du erstellen möchtest.

  1. Gehe zu Recommendations > Elements.
  2. Klicke auf New Element.
  3. Gib einen beschreibenden Namen ein. Wir empfehlen, es nach der Seite und Logik zu benennen, die du verwenden möchtest. Z.B. „Home Page / Visitor Recommendations“.
  4. Wähle im Element type, die Produktlogik aus, die du aus dem Dropdown verwenden möchtest. Einen Überblick über alle Produktlogiken findest du hier.
  5. Wähle im Design das erstellte Design aus dem Dropdown aus und wähle die Anzahl der anzuzeigenden Produkte.
  6. Klicke oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations auf deiner Website einzubinden, hast du drei verschiedene Optionen: Injection, Embedded code und über das Plugin.

  1. Öffne den Tab Insert into website.
  2. Hier hast du zwei Optionen:
    • Mit injection kannst du den Code mithilfe eines CSS-Selectors einfügen.
    • Mit embedded code kannst du den Code manuell in deine Website einfügen.
  3. Wähle die für dich einfachste Option.
  4. Für einige Logics siehst du das Choose your platform Dropdown. Wähle in diesen Fällen WooCommerce aus. Dadurch wird der Embedcode mit den richtigen WooCommerce Shortcodes vorausgefüllt.

Plugin-Einrichtung #

Diese Option ist für Kategorie-, Warenkorb-, Produktseiten, Exit Intent und Powerstep verfügbar.

  1. Gehe ins WooCommerce-Backend.
  2. Wähle Clerk im linken Seitenmenü.
  3. Finde die Element-Einstellung, die du aktivieren möchtest.
  4. Klicke das Kontrollkästchen Enabled an.
  5. Stelle sicher, dass das Feld Element den Namen deines Recommendations-Elements enthält (ohne “@”). Dieser wird im Element-Einbettungscode als dein Data-Template-Name aufgeführt, z.B. data-template=@product-page-alternatives.

my.clerk.io-Einrichtung #

  1. Gehe zu Recommendations > Elements.
  2. Wähle den gewünschten Inhalt.
  3. Öffne den Tab Insert into website.
  4. Hier hast du zwei Optionen:
    • Mit injection kannst du den Code mit einem CSS-Selector einfügen.
    • Mit embedded code kannst du den Code manuell in deine Website einfügen.
  5. Wähle die für dich einfachste Option.
  6. Bei Embedded Code füge alle nötigen Frontend-Logiken hinzu, um z. B. eine Produkt- oder Kategorie-ID einzufügen. Dies hängt von der gewählten Logik ab.

Hier ist ein vollständiges Recommendations-Einbettungscode-Beispiel mit einer Beispiel-Produkt-ID:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products=[123]>
</span>

Seiten #

Nachfolgend findest du die spezifischen Seiten, auf denen du Recommendations einfügen und welche Typen du verwenden solltest, um unseren Best Practices zu folgen.

Startseite #

  1. Erstelle in my.clerk.io 3 Elements mit folgenden Logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Füge die Embedcodes in dein Startseiten-Template/-Block ein.

Wenn du alle Banner übereinander anzeigen willst, füge alle Embedcodes an derselben Stelle ein. Falls du sie auf der Startseite verteilen möchtest, folge dem obigen Vorgang mehrfach.

Kategorieseite #

  1. Erstelle in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Wähle im Dropdown Insert into website > Choose your platform WooCommerce und kopiere den Embedcode.
  3. Füge den Embedcode in dein Kategorieseiten-Template ein oder aktiviere ihn in den Plugin-Einstellungen.

Produktseite #

  1. Erstelle in my.clerk.io 2 Elements mit folgenden Logics:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wähle im Dropdown Insert into website > Choose your platform für beide WooCommerce und kopiere die Embedcodes.
  3. Füge die Embedcodes in dein Produktseiten-Template ein oder aktiviere sie in den Plugin-Einstellungen.

Add-To-Basket Schritt #

  1. Erstelle in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Gib ihm den Namen „Add-To-Basket / Others Also Bought“. Das ist wichtig, damit der Embedcode korrekt funktioniert.
  3. Klicke oben auf der Seite auf Save.
  4. Gehe im WooCommerce-Backend im linken Seitenmenü zu Pages.
  5. Klicke oben auf der Seite auf Add New.
  6. Gib der Powerstep-Seite einen sinnvollen Namen, wie z. B. „Produkt zum Warenkorb hinzugefügt!“, da dieser als Titel deines Powersteps angezeigt wird.
  7. Gib ins große Textfeld [clerk-powerstep] ein und klicke auf Publish.
  8. Gehe zu Clerk > Clerk Settings im Seitenmenü und finde Powerstep Settings.
  9. Trage im Feld Element die IDs der erstellten Elements ein, getrennt durch Kommas. Die ID ist im Element-Einbettungscode als dein Data-Template-Name aufgeführt, z.B. data-template=@power-step-others-also-bought.
  10. Wähle im Dropdown Powerstep Page den von dir erstellten Seitennamen aus und aktiviere Enabled.
  11. Klicke auf Save Settings.

Wenn du Probleme mit dem Powerstep hast, sieh dir diese Anleitung an.

Warenkorbseite #

  1. Erstelle in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Wähle im Dropdown Insert into website > Choose your platform WooCommerce und kopiere den Embedcode.
  3. Füge den Embedcode ins Warenkorbseiten-Template ein oder aktiviere ihn in den Plugin-Einstellungen.

Exit Intent #

  1. Erstelle in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Du kannst es über das Plugin oder manuell aktivieren. Nachfolgend findest du die Schritte für beide Optionen.

Plugin-Einrichtung #

Um Exit Intent über das Plugin einzurichten, folge diesen 5 Schritten:

  1. Erstelle ein neues Element in my.clerk.io und nenne es Exit Intent.

  2. Wähle eine Logik dafür – Wir empfehlen „Visitor Recommendations“.

  3. Gehe im WooCommerce-Backend zu Clerk im Seitenmenü und finde Exit-Intent Settings.

  4. Aktiviere Enabled und stelle sicher, dass das Feld Template „exit-intent“ enthält.

  5. Klicke auf Save Settings um es zu aktivieren.

Manuelle Einrichtung #

Wenn du Exit-Intent manuell konfigurieren möchtest, folge diesen Schritten:

  1. Erstelle ein neues Element in my.clerk.io und nenne es Exit Intent.

  2. Style dein Element in Designs bei my.clerk.io

  3. Wähle eine Logik dafür – Wir empfehlen „Visitor Recommendations“.

  4. Kopiere aus Insert Into Website den bereitgestellten Embedcode in diese WooCommerce-Datei, direkt über das Clerk.io-Tracking-Skript: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Füge data-exit-intent="true" zum Embedcode hinzu, den du gerade in class-clerk-visitor-tracking.php eingefügt hast. Zum Beispiel:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'YOUR_STORE_PUBLIC_KEY'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Hinweis: Alle Recommendations, die data-exit-intent="true" enthalten, lösen das Exit Intent Pop-up aus.

Startvorlagen #

Wenn du Code Designs verwenden möchtest, kannst du mit diesen Vorlagen starten.

Slider Code #

Diese Vorlage rendert einen Standardslider mit verschiedenen Produktinformationen, den du nach deinen Bedürfnissen anpassen kannst.

HTML #

<div class="clerk-recommendations">
    <h2 class="section-title" style="text-align:center; text-transform: uppercase;"><span>{{ headline }}</span></h2>

    <div class="clerk-slider">
         {% for product in products %}
            <div class="clerk-slider-item">
                <div class="clerk-slider-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-slider-badge">On Sale</div>
                        {% endif %}
                        <div class="clerk-slider-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-slider-brand">{{ product.brand }}</div>
                        <div class="clerk-slider-name">{{ product.name }}</div>
                        
                        <div class="clerk-slider-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-slider-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-slider-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 0 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button-not-in-stock">Out of Stock</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

CSS #

.clerk-recommendations {
    margin: 1em 0;
}

.clerk-recommendations-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-slider-item {
    margin: auto;
}

.clerk-slider-product {
    position: relative;
    overflow: hidden;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-slider-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-slider-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-slider-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-slider-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-slider-brand {
    font-size: 0.9em;
    color: #757575;
}

.clerk-slider-name {
    height: 3em;
    overflow: hidden;
    color: #4a3b40;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 1em;
}

.clerk-slider-pricing {
    display: flex;

    margin-bottom: 1em;
}

.clerk-slider-price {
    flex: 1;
    color: #757575;
    font-weight: bold;
}

.clerk-slider-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-add-to-cart, .clerk-add-to-cart:hover {
    color: white;
}

.clerk-not-in-stock, .clerk-not-in-stock:hover {
    color: #4a3b40;
}

.clerk-slider-button-not-in-stock {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: white;
    color: #4a3b40;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}

.clerk-slider-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}


.clerk-load-more-button {
    display: block;
    
    width: 20em;

    margin: 1em auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: 1.2em;

    cursor: pointer;
}

@media screen and (min-width: 1100px){
    .clerk-slider-item {
        width: 20%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1100px){
    .clerk-slider-item {
        width: 25%;
    }
}

@media screen and (min-width: 414px) and (max-width: 900px) {
    .clerk-slider-item {
        width: 50%;
    }
    .clerk-slider-button, .clerk-slider-button-not-in-stock {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 413px) {
    .clerk-slider-item {
        width: 100%;
    }
}

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.