Woocommerce

Recommendations

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

Clerk.io bietet mehr als 23 verschiedene Produktempfehlungs-Logiken, wodurch es möglich ist, vollkommen automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie du mit Recommendations mithilfe des WooCommerce-Plugins loslegst.

Unsere vollständigen Best Practices dazu, welche Recommendations du verwenden solltest, findest du in diesem Artikel.

Slider-Einrichtung #

Recommendations werden mit Sliders erstellt, die sich auf ein Design beziehen. Nachfolgend findest du die grundlegende Anleitung zur Einrichtung eines Sliders.

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

Design erstellen #

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

Ein Design kann beliebig oft für alle Recommendations-Slider wiederverwendet werden, die du erstellst.

Design Editor #

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

Code Design #

  1. Gehe zu Recommendations > Designs und klicke auf Neues Design.
  2. Wähle Weitere Designs > Leer > Code.
  3. Gib einen Namen ein und klicke auf Design erstellen.
  4. Erstelle ein Code-Design von Grund auf mit Liquid-Code.

Wenn du ein Start-Design möchtest, findest du weiter unten die Slider-Vorlage.

Inhalt erstellen #

Dieser Abschnitt enthält alle Einstellungen zur Anzeige der Recommendations und macht sie für deine Website einbettbar. Folge diesen Schritten für jedes Recommendations-Banner, das du erstellen möchtest.

  1. Gehe zu Recommendations > Sliders.
  2. Klicke auf Neuer Inhalt.
  3. Gib einen beschreibenden Namen ein. Wir empfehlen, ihn nach der Seite und der gewünschten Logik zu benennen, z. B. “Startseite / Besucherempfehlungen”.
  4. Wähle unter Inhaltstyp, die Produktempfehlungs-Logik im Dropdown-Menü aus. Eine Übersicht aller Produkt-Logiken findest du hier.
  5. Wähle unter Design im Dropdown-Menü das zuvor erstellte Design und die gewünschte Anzahl der anzuzeigenden Produkte aus.
  6. Klicke oben auf der Seite auf Speichern.

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 In Website einfügen.
  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 auf deiner Website einbetten.
  3. Wähle die Option aus, die für dich am einfachsten ist.
  4. Für manche Logiken erscheint das Dropdown Plattform auswählen. Wähle in diesem Fall WooCommerce. Dadurch wird der Embed-Code mit den richtigen WooCommerce-Shortcodes vorbefüllt.

Plugin-Setup #

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

  1. Gehe in das WooCommerce-Backend.
  2. Wähle Clerk im linken Seitenmenü aus.
  3. Finde die Slider-Einstellung, die du aktivieren möchtest.
  4. Aktiviere das Kontrollkästchen Aktiviert.
  5. Stelle sicher, dass das Feld Inhalt den Namen deines Recommendation-Sliders enthält (ohne “@”). Dieser steht im Embed-Code des Sliders als dein Data-Template-Name, z.B. data-template=@product-page-alternatives.

my.clerk.io Setup #

  1. Gehe zu Recommendations > Sliders.
  2. Wähle den gewünschten Inhalt aus.
  3. Öffne den Tab In Website einfügen.
  4. 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 auf deiner Website einbetten.
  5. Wähle die für dich passende Option.
  6. Für Embedded Code: Füge jegliche Frontend-Logik hinzu, die z.B. eine Produkt- oder Kategorie-ID einbettet. Dies hängt von der gewählten Logik ab.

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

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

Seiten #

Nachfolgend sind die spezifischen Seiten aufgeführt, auf denen du Empfehlungen einbinden solltest – und welche Typen zu verwenden sind, um unsere Best Practices zu befolgen.

Startseite #

  1. Erstelle in my.clerk.io 3 Slider mit folgenden Logiken:
    • Besucherempfehlungen
    • Bestseller
    • Aktuelle Produkte
  2. Füge die Embedcodes zu deinem Homepage-Template/-Block ein.

Wenn du alle Banner übereinander anzeigen möchtest, füge alle Embedcodes an derselben Stelle ein. Falls du sie auf der Startseite verteilen möchtest, führe den obigen Vorgang für jeden Bereich durch.

Kategorie-Seite #

  1. Erstelle in my.clerk.io einen Slider mit der Logik Bestseller in Kategorie.
  2. Wähle im Dropdown In Website einfügen > Plattform auswählen WooCommerce und kopiere den Embedcode.
  3. Füge den Embedcode in dein Kategorietemplate ein oder aktiviere ihn über die Plugin-Einstellungen.

Produktseite #

  1. Erstelle in my.clerk.io 2 Slider mit den folgenden Logiken:
    • Beste Alternativprodukte
    • Beste Cross-Sell-Produkte
  2. Wähle im In Website einfügen > Plattform auswählen-Dropdown für beide WooCommerce aus und kopiere die Embedcodes.
  3. Füge die Embedcodes in dein Produktseiten-Template ein oder aktiviere sie über die Plugin-Einstellungen.

Zum-Warenkorb-hinzufügen-Schritt #

  1. Erstelle in my.clerk.io einen Slider mit der Logik Beste Cross-Sell-Produkte.
  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 Speichern.
  4. Gehe im WooCommerce-Backend im linken Seitenmenü zu Seiten.
  5. Klicke oben auf der Seite auf Neu hinzufügen.
  6. Gib der Powerstep-Seite einen aussagekräftigen Namen wie “Produkt zum Warenkorb hinzugefügt!”, da dieser als Titel auf deinem Powerstep angezeigt wird.
  7. Gib im großen Textfeld [clerk-powerstep] ein und klicke auf Veröffentlichen.
  8. Gehe zu Clerk > Clerk Einstellungen im Seitenmenü und finde Powerstep Einstellungen.
  9. Trage im Feld Inhalt die IDs der von dir erstellten Sliders kommagetrennt ein. Die ID steht im Slider-Embed-Code als Data-Template-Name, z.B. data-template=@power-step-others-also-bought.
  10. Wähle im Powerstep-Seite die von dir angelegte Seite aus und setze das Häkchen bei Aktiviert.
  11. Klicke auf Einstellungen speichern.

Wenn Probleme im Zusammenhang mit dem Powerstep auftreten, hilft dir dieser Leitfaden.

Warenkorb-Seite #

  1. Erstelle in my.clerk.io einen Slider mit der Logik Beste Cross-Sell-Produkte.
  2. Wähle im Dropdown In Website einfügen > Plattform auswählen WooCommerce und kopiere den Embedcode.
  3. Füge den Embedcode in dein Warenkorb-Seitendesign ein oder aktiviere ihn über die Plugin-Einstellungen.

Exit Intent #

  1. Erstelle in my.clerk.io einen Slider mit der Logik Besucherempfehlungen.
  2. Du kannst dies über das Plugin oder manuell aktivieren. Nachfolgend findest du die Schritte für beide Optionen.

Plugin-Setup #

Um Exit Intent über das Plugin einzurichten, befolge diese 5 Schritte:

  1. Erstelle neuen Inhalt in my.clerk.io und nenne ihn Exit Intent.

  2. Wähle eine Logik dafür – wir empfehlen “Besucherempfehlungen”.

  3. Gehe im WooCommerce-Backend zu Clerk im Seitenmenü und suche nach Exit-Intent Einstellungen.

  4. Setze das Häkchen bei Aktiviert und stelle sicher, dass das Template-Feld “exit-intent” enthält.

  5. Klicke auf Einstellungen speichern, um es zu aktivieren.

Manuelle Einrichtung #

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

  1. Erstelle neuen Inhalt in my.clerk.io und nenne ihn Exit Intent.

  2. Gestalte deinen Slider in Designs bei my.clerk.io

  3. Wähle eine Logik dafür – wir empfehlen “Besucherempfehlungen”.

  4. Kopiere im Bereich In Website einfügen den bereitgestellten Embed-Code in diese WooCommerce-Datei, direkt über das Clerk.io-Tracking-Skript: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Ergänze den soeben eingefügten Embed-Code in class-clerk-visitor-tracking.php um data-exit-intent="true". 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 mit data-exit-intent="true" lösen das Exit Intent Pop-up aus.

Startvorlagen #

Wenn du Codedesigns nutzen möchtest, kannst du mit diesen Vorlagen starten.

Slider-Code #

Diese Vorlage rendert einen Standard-Slider mit unterschiedlichen Produktinformationen, den du nach Belieben 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.