Woocommerce

Recommendations

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

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass vollständig automatisierte Produkte auf jeder Seite angezeigt werden können. Dieser Artikel erklärt, wie Sie mit Recommendations mithilfe des WooCommerce-Plugins beginnen.

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

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die sich auf ein Design beziehen. Unten finden Sie die grundlegende Anleitung zur Einrichtung eines Elements.

Wenn Sie die Schritte unter my.clerk.io > Settings > Setup Guides befolgen, werden die Elemente 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. Sie können entweder den Design Editor zur visuellen Konfiguration oder Code Designs verwenden.

Ein Design kann beliebig oft für beliebige Recommendations-Elemente 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 die Vorlage, mit der Sie starten möchten.
  4. Geben Sie einen Namen ein und klicken Sie auf Create design.
  5. Nehmen Sie alle gewünschten Änderungen am Design 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 Ausgangsdesign wünschen, schauen Sie sich die Slider-Vorlage weiter unten an.

Inhalt erstellen #

Hier befinden sich alle Einstellungen zur Anzeige der Recommendations, sodass Sie sie auf Ihrer Website einbinden können. 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 Content.
  3. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, ihn nach Seite und Logik zu benennen, z. B. “Startseite / Besucher-Empfehlungen”.
  4. Wählen Sie unter Content type, im Dropdown die gewünschte Produktlogik aus. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Wählen Sie unter Design das von Ihnen erstellte Design aus und legen Sie die gewünschte Produktanzahl fest.
  6. Klicken Sie oben auf der Seite auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website einzubinden, haben Sie drei Möglichkeiten: Injection, Embedded code und über das Plugin.

  1. Öffnen Sie den Tab Insert into website.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code mithilfe eines CSS-Selectors einfügen.
    • Mit Embedded code können Sie den Code manuell auf Ihrer Website einfügen.
  3. Wählen Sie die für Sie einfachste Option.
  4. Bei manchen Logiken sehen Sie das Dropdown Choose your platform. Wählen Sie in diesen Fällen WooCommerce. Dadurch werden die Embedcodes automatisch mit den richtigen 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 WooCommerce-Backend.
  2. Wählen Sie Clerk im linken Seitenmenü.
  3. Finden Sie die Element-Einstellung, die Sie aktivieren möchten.
  4. Aktivieren Sie das Kontrollkästchen Enabled.
  5. Stellen Sie sicher, dass das Content-Feld den Namen Ihres Recommendation Elements enthält (ohne “@”). Dieser ist im Element-Embedcode als Ihr 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 Optionen:
    • Mit Injection können Sie den Code mithilfe eines CSS-Selectors einfügen.
    • Mit Embedded code können Sie den Code manuell auf Ihrer Website einfügen.
  5. Wählen Sie die für Sie einfachste Option.
  6. Bei Embedded Code fügen Sie ggf. zusätzliche Frontend-Logik hinzu, z. B. für eine Produkt- oder Kategorien-ID. Das hängt von der gewählten Logik ab.

Hier ist 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 #

Unten finden Sie die spezifischen Seiten, auf denen Sie Recommendations platzieren und welche Typen Sie verwenden sollten, damit Sie unsere Best Practices befolgen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elemente mit diesen Logiken:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Binden Sie die Embedcodes in Ihre Startseitenvorlage/-block ein.

Wenn Sie alle Banner übereinander anzeigen möchten, binden Sie alle Embedcodes an derselben Stelle ein. Falls Sie die Banner auf der Startseite verteilen möchten, wiederholen Sie den Prozess entsprechend mehrmals.

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 aus und kopieren Sie den Embedcode.
  3. Fügen Sie den Embedcode in Ihre Kategorieseitenvorlage ein oder nutzen Sie die Plugin-Einstellungen zur Aktivierung.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elemente mit den folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie im Dropdown Insert into website > Choose your platform jeweils WooCommerce und kopieren Sie die Embedcodes.
  3. Fügen Sie die Embedcodes in Ihre Produktseitenvorlage 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. Benennen Sie es “Add-To-Basket / Others Also Bought”. Das ist wichtig, damit der Embedcode korrekt funktioniert.
  3. Klicken Sie oben auf der Seite auf Save.
  4. Gehen Sie im WooCommerce-Backend im linken Seitenmenü zu Pages.
  5. Klicken Sie oben auf der Seite auf Add New.
  6. Geben Sie der Powerstep-Seite einen aussagekräftigen Namen wie “Produkt zum Warenkorb hinzugefügt!”, da dies als Titel Ihres Powersteps angezeigt wird.
  7. Geben Sie im großen Textfeld den Shortcode [clerk-powerstep] ein und klicken Sie auf Publish.
  8. Gehen Sie zu Clerk > Clerk Settings im Seitenmenü und finden Sie Powerstep Settings.
  9. Tragen Sie im Feld Content die IDs der erstellten Elemente durch Kommas getrennt ein. Die ID ist im Element-Embedcode als Ihr Data-Template-Name, z. B. data-template=@power-step-others-also-bought, aufgeführt.
  10. Wählen Sie unter Powerstep Page den von Ihnen erstellten Seitennamen und aktivieren Sie Enabled.
  11. Klicken Sie auf Save Settings.

Wenn Sie Probleme mit dem Powerstep haben, lesen Sie diesen Guide.

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 Ihre Warenkorbseitenvorlage ein oder aktivieren Sie ihn über die Plugin-Einstellungen.

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 finden Sie die Schritte für beide Optionen.

Plugin-Einrichtung #

So richten Sie Exit Intent über das Plugin in 5 Schritten ein:

  1. Erstellen Sie neuen Content in my.clerk.io und nennen Sie ihn Exit Intent.

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

  3. Gehen Sie im WooCommerce-Backend in der Seitenleiste zu Clerk und finden 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, folgen Sie diesen Schritten:

  1. Erstellen Sie neuen Content in my.clerk.io und nennen Sie ihn Exit Intent.

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

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

  4. Kopieren Sie bei Insert Into Website den angegebenen Embedcode in diese WooCommerce-Datei, direkt oberhalb des Clerk.io Tracking-Skripts: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Fügen Sie dem eben eingefügten Embedcode in der class-clerk-visitor-tracking.php data-exit-intent="true" hinzu. 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 mit data-exit-intent="true" lösen das Exit Intent Pop-up aus.

Startvorlagen #

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

Slider Code #

Diese Vorlage zeigt einen Standardslider mit verschiedenen Produktinformationen, den Sie nach Ihren Bedürfnissen 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.