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. Dieser Artikel erklärt, wie Sie mit Recommendations unter Verwendung des WooCommerce Plugins beginnen.

Unsere vollständigen Best Practices, welche Recommendations verwendet werden sollten, finden Sie in diesem Artikel.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Nachfolgend finden Sie die grundlegende Anleitung zur Einrichtung eines Elements.

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

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. Dadurch können Kunden mehr Produkte mit weniger Klicks sehen. Sie können entweder den Design Editor zur visuellen Konfiguration verwenden oder Code Designs nutzen.

Ein Design kann für beliebig viele Recommendation Elements wiederverwendet werden.

Design-Editor #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
  2. Wählen Sie Product Slider
  3. Wählen Sie aus der Liste der Design-Vorlagen diejenige, mit der Sie beginnen möchten.
  4. Geben Sie einen Namen ein und klicken Sie auf Create design.
  5. Nehmen Sie Änderungen am Design nach Wunsch vor.

Code Design #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
  2. Wählen Sie Other designs > Blank > Code.
  3. Geben Sie einen Namen ein und klicken Sie auf Create design.
  4. Erstellen Sie ein Code Design von Grund auf mit Liquid code.

Wenn Sie ein Anfangsdesign möchten, finden Sie die Slider-Vorlage weiter unten.

Element erstellen #

Dies enthält alle Einstellungen, die für die Anzeige der Recommendations verwendet werden, und macht es auf Ihrer Website einbettbar. Folgen Sie diesen Schritten für jedes Recommendations-Banner, das Sie erstellen möchten.

  1. Gehen Sie zu Recommendations > Elements.
  2. Klicken Sie auf New Element.
  3. Geben Sie einen aussagekräftigen Namen an. Wir empfehlen, das Element nach der Seite und der gewünschten Logik zu benennen, z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie unter Element type, die gewünschte Produktlogik aus dem Dropdown-Menü. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Unter Design wählen Sie das erstellte Design aus dem Dropdown-Menü und bestimmen die Anzahl der anzuzeigenden Produkte.
  6. Klicken Sie oben auf der Seite auf Save.

Auf der Website einfügen #

Zur Einbindung von Clerk Recommendations auf Ihrer Website stehen Ihnen drei Optionen zur Verfügung: Injection, Embedded code und über das Plugin.

  1. Öffnen Sie den Tab Insert into website.
  2. Hier haben Sie zwei Möglichkeiten:
    • Mit Injection können Sie den Code per CSS-Selektor einfügen.
    • Mit Embedded code können Sie den Code manuell auf Ihrer Website platzieren.
  3. Wählen Sie die für Sie einfachste Option aus.
  4. Für einige Logics sehen Sie das Dropdown-Menü Choose your platform. Wählen Sie in diesen Fällen WooCommerce aus. Dadurch wird der Embedcode mit den passenden WooCommerce-Shortcodes vorausgefüllt.

Plugin-Einrichtung #

Diese Option steht für Kategorie-, Warenkorb-, Produktseiten, Exit Intent und Powerstep zur Verfügung.

  1. Gehen Sie ins Backend von WooCommerce.
  2. Wählen Sie Clerk im linken Seitenmenü.
  3. Suchen Sie die Element-Einstellung, die Sie aktivieren möchten.
  4. Aktivieren Sie das Kontrollkästchen Enabled.
  5. Stellen Sie sicher, dass das Feld Element den Namen Ihres Recommendation Elements enthält (ohne “@”). Es ist innerhalb des Element-Embedcodes als Data Template Name aufgeführt, z. B. data-template=@product-page-alternatives.

my.clerk.io Einrichtung #

  1. Gehen Sie zu Recommendations > Elements.
  2. Wählen Sie den gewünschten Inhalt aus.
  3. Öffnen Sie den Tab Insert into website.
  4. Hier haben Sie zwei Möglichkeiten:
    • Mit Injection können Sie den Code mit einem CSS-Selektor einfügen.
    • Mit Embedded code können Sie den Code manuell auf Ihrer Website platzieren.
  5. Wählen Sie die für Sie einfachste Methode.
  6. Beim Embedded code fügen Sie ggf. notwendige Frontend-Logik hinzu, zum Beispiel, um eine Produkt- oder Kategorie-ID einzufügen. Dies hängt von der gewählten Logik ab.

Hier ein vollständiges Embedcode-Beispiel für Recommendations mit einer Beispiel-Produkt-ID:

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

Seiten #

Im Folgenden finden Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten, sowie die Typen, um unseren Best Practices zu folgen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elements mit den folgenden Logiken:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Fügen Sie die Embedcodes in Ihr Startseitentemplate/-block ein.

Wenn Sie alle Banner untereinander anzeigen möchten, fügen Sie alle Embedcodes an der gleichen Stelle ein. Möchten Sie sie über die Startseite verteilen, wiederholen Sie den Vorgang entsprechend oft.

Kategorieseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Wählen Sie im Dropdown Insert into website > Choose your platform WooCommerce und kopieren Sie den Embedcode.
  3. Fügen Sie den Embedcode in Ihr Kategorieseiten-Template ein oder aktivieren Sie ihn mittels Plugin-Einstellung.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elements mit den folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie im Dropdown Insert into website > Choose your platform für beide WooCommerce und kopieren Sie die Embedcodes.
  3. Fügen Sie die Embedcodes in Ihr Produktseiten-Template ein oder aktivieren Sie sie über die Plugin-Einstellungen.

Add-To-Basket Schritt #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Geben Sie ihm den Namen “Add-To-Basket / Others Also Bought”. Dieser Name ist wichtig, damit der Embedcode richtig funktioniert.
  3. Klicken Sie oben auf der Seite auf Save.
  4. Gehen Sie im WooCommerce Backend im linken Menü zu Pages.
  5. Klicken Sie oben auf der Seite auf Add New.
  6. Geben Sie der Powerstep-Seite einen aussagekräftigen Namen, z. B. “Produkt zum Warenkorb hinzugefügt!”, da dieser als Titel auf Ihrem Powerstep angezeigt wird.
  7. Geben Sie in das große Textfeld [clerk-powerstep] ein und klicken Sie auf Publish.
  8. Gehen Sie zu Clerk > Clerk Settings im Seitenmenü und suchen Sie Powerstep Settings.
  9. Tragen Sie im Feld Element die IDs der erstellten Elements ein, getrennt durch Kommas. Die ID finden Sie im Embedcode des Elements als Data Template Name, z. B. data-template=@power-step-others-also-bought.
  10. Wählen Sie den von Ihnen erstellten Seitennamen unter Powerstep Page und aktivieren Sie Enabled.
  11. Klicken Sie auf Save Settings.

Falls Sie Probleme mit dem Powerstep haben, sehen Sie sich diese Anleitung an.

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Wählen Sie im Dropdown Insert into website > Choose your platform WooCommerce und kopieren Sie den Embedcode.
  3. Fügen Sie den Embedcode in Ihr Warenkorbseiten-Template ein oder aktivieren Sie ihn mittels Plugin.

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Sie können es entweder über das Plugin oder manuell aktivieren. Nachfolgend die Schritte für beide Möglichkeiten.

Plugin-Einrichtung #

So richten Sie Exit Intent über das Plugin ein – folgen Sie diesen 5 Schritten:

  1. Erstellen Sie in my.clerk.io ein neues Element und benennen Sie es Exit Intent.

  2. Wählen Sie eine Logik dafür – wir empfehlen “Visitor Recommendations”.

  3. Gehen Sie im WooCommerce-Backend zu Clerk im Seitenmenü und suchen Sie Exit-Intent Settings.

  4. Aktivieren Sie Enabled und stellen Sie sicher, dass das Feld Template “exit-intent” enthält.

  5. Klicken Sie auf Save Settings, um es zu aktivieren.

Manuelle Einrichtung #

Wenn Sie Exit-Intent manuell konfigurieren möchten, gehen Sie wie folgt vor:

  1. Erstellen Sie in my.clerk.io ein neues Element und nennen Sie es Exit Intent.

  2. Stylen Sie Ihr Element unter Designs bei my.clerk.io

  3. Wählen Sie eine Logik – wir empfehlen “Visitor Recommendations”.

  4. Kopieren Sie unter Insert Into Website 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. Fügen Sie data-exit-intent="true" zum Embed Code hinzu, den Sie gerade in class-clerk-visitor-tracking.php eingefügt haben. 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-Popup aus.

Startvorlagen #

Wenn Sie Code Designs verwenden möchten, können Ihnen diese Vorlagen den Einstieg erleichtern.

Slider-Code #

Diese Vorlage rendert einen Standardslider mit verschiedenen Produktinformationen, den Sie an Ihre Bedürfnisse anpassen können.

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.