Woocommerce

Recommendations

Allgemein #

> Hinweis: Wenn Sie einen Shortcode-Editor für Ihre Woocommerce-Seiten verwenden, empfehlen wir Ihnen, diese Anleitung zu verwenden.

Clerk.io’s Recommendations können auf jeder Seite des Webshops installiert werden, um Kunden zu helfen, die richtigen Produkte zu finden.

Mit der Einrichtungsanleitung können Sie sehen, auf welchen Seiten Sie Empfehlungen installieren und welche Typen Sie verwenden sollten, um unsere Best Practice zum Laufen zu bringen.

Beginnen Sie im Hauptmenü mit einem Klick auf Einstieg:

1. Erstellen Sie einen Standardentwurf #

Als Erstes müssen Sie ein Standarddesign für Ihre Schieberegler erstellen.

Sie können die Einrichtungsanleitung unter _Empfehlungen - Erstellen Sie ein Design für Ihre Empfehlungs-Slider - verwenden, um schnell ein Design zu erstellen, das das gleiche Farbschema und den gleichen Stil wie Ihr Webshop hat.

Klicken Sie auf Veröffentlichen, sobald Sie mit dem Design zufrieden sind.

Sie können dies später leicht ändern, unter Empfehlungen - Designs im linken Menü.

2. Die Auswahl der zu verwendenden Empfehlungen #

Als nächstes konzentriert sich jeder Schritt der Einrichtungsanleitung auf eine bestimmte Seite des Webshops.

Sie enthalten Informationen über

  • _Warum Empfehlungen auf der Seite wichtig sind**.

  • Welche Empfehlungstypen verwendet werden sollen.

  • Wo sie auf der Seite platziert werden sollten.

Klicken Sie auf die einzelnen Arten von Empfehlungen, die Sie verwenden möchten, und folgen Sie den Anweisungen.

Bitte beachten Sie: Wenn Sie nur auf die einzelnen Empfehlungsblöcke klicken, **werden sie grün, als ob sie installiert wären - sind sie nicht_ - Sie müssen immer noch klicken und den Schritten folgen.

3. Einfügen von Empfehlungen #

Nachdem Sie ausgewählt haben, welche Empfehlungen Sie für eine Seite verwenden möchten, können Sie diese in Ihren Webshop einfügen.

3.1 Einfügen mit Erweiterungs- oder Einbettungscodes #

Bei einigen Seiten können Empfehlungen direkt über die Erweiterung oder den Embedcode hinzugefügt werden:

Hier sind die Seiten, die beide Arten von Integrationen ermöglichen:

Add recommendations to your product page

- Empfehlungen zum Warenkorb hinzufügen

- Anzeigen der beliebtesten Produkte auf Ihren Kategorieseiten

Klicken Sie auf jede einzelne Seite und wählen Sie die Methode, die Sie für die Integration verwenden möchten, und folgen Sie den Anweisungen.

Hier ein Beispiel, wie Sie Empfehlungen zu Ihrer Produktseite hinzufügen:

Methode 1: mit der Erweiterung (folgen Sie den Schritten)

Klicken Sie auf FERTIG

- Methode 2: mit Einbettungscode (folgen Sie den Schritten)

Klicken Sie auf FERTIG

Für einige Einbettungscodes werden Variablen wie Produkt oder Kategorie-IDs benötigt. In diesen Fällen wählen Sie einfach WooCommerce aus dem Dropdown-Menü Plattform wählen, bevor Sie den Einbettungscode kopieren.

3.2 Einfügen nur mit Erweiterung #

Diese Seiten erlauben nur eine Integration durch die Extension:

Empfehlungen für den Einkaufswagen anzeigen

- Exit-Intent-Empfehlungen hinzufügen

Klicken Sie auf jede Empfehlung und befolgen Sie die Schritte.

Hier ein Beispiel für Empfehlungen für den Einkaufskorb anzeigen:

Klicken Sie auf FERTIG

3.3 Einfügen nur mit Embedcodes #

Diese Seiten erlauben nur eine Einbindung mit Embedcode:

Empfehlungen zu Ihrer Homepage hinzufügen

Inhaltsempfehlungen zu Ihrem Blog oder Ihren Nachrichten hinzufügen

Für jede Art von Empfehlungen kopieren Sie einfach den Embedcode und fügen Sie ihn in die Datei ein, die die entsprechende Seite in Ihrem Webshop erzeugt.

Hier ist ein Beispiel, wie Sie Empfehlungen zu Ihrer Homepage hinzufügen:

Klicken Sie auf FERTIG

Sie können Ihren Inhalt später unter Empfehlungen - Inhalt im linken Menü leicht ändern.

Inhalt ändern

Nachdem Sie die Funktionen aktiviert haben, können Sie Clerk.io’s RECOMMENDATIONS Funktion in Ihrem Webshop sehen.

Einfügen mit Shortcodes #

1. Shortcode-Integration #

Wenn Sie einen Shortcode-Editor wie Elementor verwenden, kann es sein, dass unser reguläres Empfehlungscode-Snippet nicht gerendert wird, da die Produkt-ID in Elementor eine andere Syntax hat als in einem normalen HTML-Block.

Wenn Sie Hooks verwenden, können Sie unter Darstellung -> Benutzerdefinierte Layouts -> Einfügen den Shortcode in den Hook einfügen, der zu Clerk gehört (ein Entwickler kann diese erstellen, wenn er möchte, dass Clerk ein Hook ist).

Um den Code einzufügen, ersetzen Sie:

<span class="clerk" data-template="@product-page-alternatives" data-products="[<?php echo $product->get_id(); ?>]">
</span>

Mit:

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

Versuchen Sie es zunächst mit einfachen Klammern und dann, wenn das nicht funktioniert, mit doppelten Klammern.

<span class="clerk" data-template="@category-page-popular" data-category="[ [clerk_category_id] ]"></span>

Wenn das nicht funktioniert, können Sie diese ausprobieren:

<span class="clerk" data-template="@product-page-alternatives" data-products="[<?php the_ID(); ?>]"></span>

<span class="clerk" data-template="@product-page-others-also-bought" data-products="[<?php the_ID(); ?>]"></span>

2. Manuelle Codeeingabe #

Wenn Sie den Shortcode nicht einfügen können oder keinen Editor verwenden, gehen Sie zu Erscheinungsbild→ Personalisierung→ Klicken Sie dann auf die Produktseite und folgen Sie diesen Schritten:

Widget → Shopsidebar 1 → Widget hinzufügen → Clerk Content

3. WP Baker Builder #

Theme-Datei-Integration

Hinzufügen eines Produktseiten-Sliders zu allen Seiten:

Erscheinungsbild - Editor für Themendateien - WooCommerce - Content-single-product.php

(oder eine ähnliche Datei, in der Ihre Produktseite zu finden ist)

Fügen Sie den Code der Spanne in die Datei ein, in der sie angezeigt werden soll. Ähnlich wie beim FTP-Zugang.

<span class="clerk" data-template="@product-page-alternatives" data-products="[<?php the_ID(); ?>]"></span>

<span class="clerk" data-template="@product-page-others-also-bought" data-products="[<?php the_ID(); ?>]"></span>

Schritt “In den Warenkorb #

  1. Wenn Sie es noch nicht getan haben, erstellen Sie den Inhalt, den Sie in Ihrem Add-To-Basket-Schritt (Power Step) verwenden möchten.

  2. Gehen Sie im WooCommerce-Backend zu Seiten.

  3. Klicken Sie oben auf der Seite auf Neu hinzufügen.

  4. Geben Sie der Powerstep-Seite einen aussagekräftigen Namen, z. B. “Produkt in den Warenkorb gelegt”, da dieser als Titel auf Ihrem Powerstep angezeigt wird.

  5. Geben Sie in das große Textfeld [clerk-powerstep] ein, und drücken Sie auf Veröffentlichen.

6. Gehen Sie im Seitenmenü auf Clerk -> Clerk Settings und suchen Sie Powerstep Settings.

7. Fügen Sie die IDs der Inhaltsblöcke, die Sie erstellt haben, durch Kommata getrennt, in

Inhalt ein.

Sie finden die IDs der einzelnen Inhaltsblöcke, die Sie erstellt haben, in Ihrem Clerk-Backend (my,clerk.io) unter Empfehlungen -> Inhalt -> Bearbeiten (die Anzahl der Inhalte variiert zwischen 1 und 4 für den Schritt Add-To-Basket):

Hier ist ein Beispiel, wie man die ID des Inhalts findet:

8. Wählen Sie den Namen der soeben erstellten Seite unter Powerstep Page

und aktivieren Sie Aktiviert.

9. Klicken Sie auf Einstellungen speichern.

OPTIONAL

Wenn der Powerstep immer noch nicht angezeigt wird, müssen Sie möglicherweise die WooCommerce-Einstellung Cart Redirect deaktivieren.

Gehen Sie dazu zu

WooCommerce -> Einstellungen -> Produkte und suchen Sie Verhalten im Warenkorb.

Vergewissern Sie sich, dass beide Kästchen nicht markiert sind, und klicken Sie unten auf der Seite auf Änderungen speichern.

Wenn die Seite “In den Warenkorb” zweimal angezeigt wird:

Wenn Sie auf ein Problem stoßen, bei dem der Powerstep zweimal angezeigt wird, müssen Sie die Seite teilen, um das Problem zu beheben.

  • Gehen Sie im WooCommerce-Backend zu der Powerstep-Seite, die Sie in Schritt eins unter Seiten erstellt haben.

  • Wählen Sie “Shortcodes” in der oberen rechten Ecke und klicken Sie dann auf “Zeilen/Spalten”.

  • Klicken Sie anschließend auf “OK” in dem Pop-up-Fenster, das erscheint.
  • Verschieben Sie schließlich [clerk-powerstep] innerhalb der Tags [row] [col] und [/row] [/col], und klicken Sie auf Speichern.

Beendigungsabsicht #

Das Exit Intent Popup reagiert, wenn ein Besucher versucht, Ihren Webshop zu verlassen. Es poppt auf und zeigt interessante Produkte an, wodurch ein Besucher, der den Shop verlässt, möglicherweise zu einem Käufer wird.

Einrichtung mit Plugin #

Ab v1.3.8 des WooCommerce-Plugins kann Exit-Intent direkt aus dem Plugin heraus aktiviert werden.

Die Einrichtung erfolgt in 5 Schritten:

  1. Erstellen Sie einen neuen Website-Inhalt in my.clerk.io und nennen Sie ihn “Exit Intent “.

  2. Wählen Sie eine Logik dafür - wir empfehlen “Besucherempfehlungen “.

  3. Gehen Sie im WooCommerce-Backend im Seitenmenü auf Kaufmann und suchen Sie Ausgangs-Intent-Einstellungen.

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

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

Jetzt sehen Sie das Popup-Fenster mit der Absicht, die Seite zu verlassen, wenn jemand zum ersten Mal versucht, die Seite zu verlassen.

Manuell einrichten #

Wenn Sie eine ältere Version des Plugins verwenden oder Exit-Intent manuell konfigurieren möchten, folgen Sie diesen Schritten:

  1. Erstellen Sie eine neue Seite Website-Inhalt in my.clerk.io

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

  3. Kopieren Sie unter In die Website einfügen den bereitgestellten Einbettungscode in diese WooCommerce-Datei, gerade oberhalb des Clerk.io Tracking-Skripts:

    wp-content->plugins->clerkio->includes->class-clerk-visitor-tracking.php

  4. Hinzufügen: data-exit-intent=“true “ zum Einbettungscode, den Sie gerade platziert haben. Zum Beispiel so:

Beispiel Einbettungscode

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Eingefügt in class-clerk-visitor-tracking.php_

Denken Sie daran, Ihren Inhalt in Designs bei my.clerk.io zu gestalten.

Alle Empfehlungen, die data-exit-intent=“true “ enthalten, lösen das Exit Intent-Pop-up aus.

Hinzufügen von Empfehlungen mit Visual Hooks #

In WooCommerce werden bestimmte Webseiten mit Visual Hooks erstellt, anstatt aus einer HTML-Datei gerendert zu werden. Um den über Visual Hooks erstellten Seiten Inhalte hinzuzufügen, müssen Sie den Clerk.io-Inhalt in die aktive Datei functions.php des Webshops einfügen.

Die Datei functions.php befindet sich normalerweise unter folgendem Pfad:

/wp-content/themes/YOUR-THEME-NAME-child-theme/functions.php

Um zum Beispiel einen Recommendations-Slider mit dem Inhalt @product-page-alternatives zu Ihrer Produktseite hinzuzufügen, würden Sie den folgenden Code innerhalb des <php? ?> -Tags in functions.php einfügen:

// CLERK ADD PRODUCT PAGE SLIDER

add_action ( 'woocommerce_after_single_product', 'clerk_alternatives',5
);

function clerk_alternatives() {
$clerk_id = wc_get_product()->get_id();
echo "<span class='clerk'
data-template='@product-page-alternatives'
data-products='[$clerk_id]'>
</span>";
}

Und ein weiteres Beispiel für das Hinzufügen eines Schiebereglers für Empfehlungen auf der Seite “In den Warenkorb”:

// CLERK ADD CART SLIDER
add_action ( 'woocommerce_after_cart_contents', 'clerk_cart_slider',5);

function clerk_cart_slider() {
 $clerk_id = get_queried_object()->term_id;
 echo "<span class="clerk"
data-template="@cart-others-also-bought"
data-products="[<?php $items = WC()->cart->get_cart(); foreach( $items as $cart_item ){ $product_id = $cart_item['product_id']; echo $product_id; if ($cart_item != end($items)) {echo ",";} } ?>]"></span>";
}

Um Ihre eigenen Empfehlungs-Slider zu den oben genannten Seiten hinzuzufügen, denken Sie daran, den Code innerhalb der Tags durch den Einbettungscode zu ersetzen, der in Ihrem Empfehlungsinhalt in my.clerk.io bereitgestellt wird, wie unten dargestellt:

Der in add_action() festgelegte Wert, in diesem Beispiel 5, teilt WooCommerce die Priorität des hinzugefügten Inhalts mit, die wiederum beeinflusst, wie früh der Inhalt in diesem Visual Hook angezeigt wird. Hinweis: Bei der Festlegung der Priorität akzeptiert WooCommerce nur Vielfache von 5.

Weitere Informationen über WooCommerce-Webseiten, die Visual Hooks verwenden:

https://www.businessbloomer.com/category/woocommerce-tips/visual-hook-series/