Woocommerce

Recommendations

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

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, die es ermöglichen, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie man mit Empfehlungen unter Verwendung des WooCommerce-Plugins beginnt.

Für unsere vollständigen Best Practices, welche Empfehlungen zu verwenden sind, lesen Sie diesen Artikel.

Design erstellen #

Empfehlungen werden standardmäßig als Slider angezeigt. Dies ermöglicht es den Kunden, mehr Produkte mit weniger Klicks zu sehen. Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.

Ein Design kann für beliebig viele Empfehlungen verwendet werden, die Sie erstellen.

Design-Editor #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Produkt-Slider
  3. Wählen Sie aus der Liste der Designvorlagen diejenige aus, mit der Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
  5. Nehmen Sie alle gewünschten Änderungen am Design vor.

Code-Design #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Leer > Code.
  3. Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.

Wenn Sie ein Startdesign möchten, überprüfen Sie die Slider-Vorlage weiter unten.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um den Empfehlungen-Slider anzuzeigen und ihn in Ihre Website einbettbar zu machen. Befolgen Sie diese Schritte für jedes Empfehlungsbanner, das Sie erstellen möchten.

  1. Gehen Sie zu Recommendations > Content.
  2. Klicken Sie auf Neuer Inhalt.
  3. Geben Sie ihm einen beschreibenden Namen. Wir empfehlen, ihn basierend auf der Seite und der Logik zu benennen, die Sie verwenden möchten. Z.B. “Startseite / Besucherempfehlungen”.
  4. Wählen Sie in Inhaltstyp, die Produktlogik aus, die Sie aus dem Dropdown-Menü verwenden möchten. Sie können eine Übersicht aller Produktlogiken hier sehen.
  5. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben, und wählen Sie die Anzahl der Produkte aus, die Sie anzeigen möchten.
  6. Klicken Sie oben auf dem Bildschirm auf Speichern.

Zur Website hinzufügen #

Um Clerk-Empfehlungen auf Ihrer Website hinzuzufügen, haben Sie drei verschiedene Optionen: Injection, Embedded Code und über das Plugin.

Plugin-Setup #

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

  1. Gehen Sie zum WooCommerce-Backend.
  2. Wählen Sie Clerk im linken Seitenmenü aus.
  3. Finden Sie die Inhaltseinstellung, die Sie aktivieren möchten.
  4. Aktivieren Sie das Kontrollkästchen mit der Bezeichnung Aktiviert.
  5. Stellen Sie sicher, dass das Feld Inhalt den Namen Ihres Empfehlungsinhalts (ohne “@”) enthält. Es wird innerhalb des Inhalts-Einbettungscodes als Ihr Datenvorlagenname aufgeführt, z.B. data-template=@product-page-alternatives.

Hier ist ein vollständiges Beispiel für einen Empfehlungen-Einbettungscode mit einer Beispiel-Produkt-ID:

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

Clerk-Setup #

  1. Gehen Sie zu Recommendations > Content.
  2. Wählen Sie den gewünschten Inhalt aus.
  3. Öffnen Sie den Tab In die Website einfügen.
  4. Hier haben Sie zwei Optionen:
    • Die Verwendung von Injection ermöglicht es Ihnen, den Code mit einem CSS-Selektor einzufügen.
    • Die Verwendung von Embedded Code ermöglicht es Ihnen, den Code manuell in Ihre Website einzufügen.
  5. Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
  6. Fügen Sie für den eingebetteten Code alle erforderlichen Frontend-Logiken hinzu, um beispielsweise eine Produkt- oder Kategorie-ID einzufügen. Dies hängt von der Logik ab, die Sie wählen.

Powerstep #

Um den Hinzufügen-zum-Warenkorb Powerstep zu aktivieren, befolgen Sie diese Schritte:

  1. Wenn Sie es noch nicht getan haben, erstellen Sie den Inhalt, den Sie in Ihrem Hinzufügen-zum-Warenkorb-Powerstep verwenden möchten.
  2. Gehen Sie im WooCommerce-Backend im linken Seitenmenü zu Seiten.
  3. Klicken Sie oben auf der Seite auf Neu hinzufügen.
  4. Geben Sie der Powerstep-Seite einen aussagekräftigen Namen, wie “Produkt zum Warenkorb hinzugefügt!”, da dies als Titel auf Ihrem Powerstep angezeigt wird.
  5. Geben Sie im großen Textfeld [clerk-powerstep] ein und klicken Sie auf Veröffentlichen.
  6. Gehen Sie zu Clerk > Clerk-Einstellungen im Seitenmenü und finden Sie Powerstep-Einstellungen.
  7. Fügen Sie im Feld Inhalt die IDs der von Ihnen erstellten Inhaltsblöcke ein, getrennt durch Kommas. Die ID wird innerhalb des Inhalts-Einbettungscodes als Ihr Datenvorlagenname aufgeführt, z.B. data-template=@power-step-others-also-bought.
  8. Wählen Sie den Seitennamen aus, den Sie unter Powerstep-Seite erstellt haben, und aktivieren Sie Aktiviert.
  9. Klicken Sie auf Einstellungen speichern.

Wenn Sie Probleme mit dem Powerstep haben, überprüfen Sie diesen Leitfaden.

Exit Intent #

Das Exit Intent-Popup reagiert, wenn ein Besucher versucht, Ihren Webshop zu verlassen. Es zeigt interessante Produkte an, die möglicherweise einen abwandernden Besucher in einen kaufenden Kunden umwandeln.

Sie können es über das Plugin oder manuell aktivieren. Nachfolgend finden Sie die Schritte für beide Optionen.

Plugin-Setup #

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

  1. Erstellen Sie neuen Inhalt in my.clerk.io und benennen Sie ihn Exit Intent.

  2. Wählen Sie eine Logik dafür - Wir schlagen “Besucherempfehlungen” vor.

  3. Gehen Sie im WooCommerce-Backend zu Clerk im Seitenmenü und finden Sie Exit-Intent-Einstellungen.

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

  5. Klicken Sie auf Einstellungen speichern, um es zu aktivieren.

Clerk-Setup #

Wenn Sie Exit-Intent manuell konfigurieren möchten, befolgen Sie diese Schritte:

  1. Erstellen Sie neuen Inhalt in my.clerk.io und benennen Sie ihn Exit Intent.

  2. Gestalten Sie Ihren Inhalt in Designs in my.clerk.io

  3. Wählen Sie eine Logik dafür - Wir schlagen “Besucherempfehlungen” vor.

  4. Kopieren Sie aus In die Website einfügen den bereitgestellten Einbettungscode in diese WooCommerce-Datei, direkt über dem Clerk.io-Tracking-Skript: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Fügen Sie data-exit-intent="true" zu dem Einbettungscode hinzu, den Sie gerade in class-clerk-visitor-tracking.php platziert haben. So:

<!-- Start des Clerk.io E-Commerce-Personalisierungstools - 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>
<!-- Ende des Clerk.io E-Commerce-Personalisierungstools - www.clerk.io -->

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

Startvorlage #

Wenn Sie Code-Designs verwenden möchten, kann Ihnen diese Vorlage den Einstieg erleichtern. Sie wird einen Standard-Slider mit verschiedenen Produktinformationen rendern, die 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">Im Angebot</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">Nicht auf Lager</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">In den Warenkorb</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.