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 dem Setup-Guide können Sie sehen, auf welchen Seiten Sie Empfehlungen installieren und welche Typen Sie verwenden sollten, um unsere Beste Praxis zum Laufen zu bringen.

Starten Sie im Hauptmenü mit einem Klick auf Erste Schritte:

1. Ein Standardmuster erstellen #

Als erstes müssen Sie ein Standard-Design für Ihre Schieberegler erstellen.

Sie können das Anleitung zur Einrichtung unter Empfehlungen - Erstellen Sie ein Design für Ihre Empfehlungsschieberegler_ - verwenden, um schnell ein Design zu erstellen, das dasselbe Farbschema und denselben Stil wie Ihr Webshop hat.

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

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

2. Auswählen 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 Arten von Empfehlungen verwendet werden sollten.

  • Wo auf der Seite sie platziert werden sollten.

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

Bitte bedenken Sie: durch Nur durch Anklicken auf jeden Block von Empfehlungen werden sie grün als ob sie wurden installiert - sind sie nicht - Sie müssen noch klicken und die Schritte befolgen.

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 erlauben:

- Empfehlungen zu Ihrer Produktseite hinzufügen_

- Empfehlungen zu Ihrer Einkaufswagenseite hinzufügen_

- Beliebteste Produkte auf Ihren Kategorieseiten anzeigen_

Klicken Sie auf jeden einzelnen und auf Wählen Sie die Methode, den Sie für die Integration verwenden möchten, und folgen Sie den Schritten.

Hier ist ein Beispiel für 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 über die Extension:

- Empfehlungen für den Einkaufswagen anzeigen

Exit-Intent-Empfehlungen hinzufügen

Klicken Sie auf die einzelnen Punkte und folgen Sie den Anweisungen.

Hier ist ein Beispiel, wie man Warenkorb-Empfehlungen 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

- Fügen Sie Inhaltsempfehlungen zu Ihrem Blog oder Ihren News hinzu

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

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

Klicken Sie auf FERTIG

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

Inhalt ändern

Nachdem Sie die Funktionen aktiviert haben, können Sie die Funktion EMPFEHLUNGEN von Clerk.io in Ihrem Webshop sehen.

Einfügen mit Shortcodes #

1. Shortcode-Einbindung #

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 Erscheinungsbild -> 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 zuerst 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 Inhalt

3. WP Baker Builder #

Theme-Datei-Integration

Hinzufügen eines Produktseiten-Sliders zu allen Seiten:

PLACEHOLDER_58

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

Fügen Sie den Span-Code an der Stelle in die Datei ein, an der er 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 die Inhalt, die Sie in Ihrem Add-To-Basket-Schritt (Power Step) verwenden möchten.

  2. Gehen Sie im WooCommerce-Backend auf 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 Veröffentlichen.

6. Gehen Sie zu Clerk -> Clerk-Einstellungen im Sidemenü und suchen Sie Powerstep Einstellungen.

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

Inhalt.

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 Sie die ID des Inhalts finden können:

8. Wählen Sie den Namen der Seite, die Sie gerade erstellt haben, unter Seite Powerstep

und überprüfen 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 finden Sie Verhalten beim Hinzufügen zum Warenkorb.

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

Wenn die Seite “Zum Warenkorb hinzufügen” 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 in dem daraufhin angezeigten Pop-up auf “OK”.
  • Verschieben Sie schließlich [clerk-powerstep] innerhalb der Tags [row] [col] und [/row] [/col], und klicken Sie auf “Speichern”.

Intent beenden #

Das Beenden Absicht Popup reagiert, wenn ein Besucher versucht, Ihren Webshop zu verlassen. Es öffnet sich und zeigt interessante Produkte an, wodurch ein Besucher, der den Shop verlässt, möglicherweise zu einem Kunden wird.

Einrichtung mit Plugin #

Unter PLACEHOLDER_10 des WooCommerce-Plugins kann Exit-Intent direkt über das Plugin aktiviert werden.

Die Einrichtung erfolgt in 5 Schritten:

  1. Erstellen Sie ein neues Website-Inhalt in mein.clerk.io und benennen Sie es “Exit Intent”

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

  3. Gehen Sie im WooCommerce-Backend im Seitenmenü auf Sachbearbeiter und suchen Sie Exit-Intent Einstellungen.

  4. Markieren Sie das Kä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 wird das Pop-up-Fenster mit der Absicht, die Seite zu verlassen, angezeigt, wenn jemand zum ersten Mal versucht, verlassen aufzurufen.

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 Version von Website-Inhalt in my.clerk.io

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

  3. Von In die Website einfügen, kopieren Sie den mitgelieferten Embedcode in diese WooCommerce-Datei, genau über das clerk.io Tracking-Skript:

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

  1. Fügen Sie: data-exit-intent=“true” zu dem soeben eingefügten Einbettungscode hinzu. Zum Beispiel so:

Beispiel für eingebetteten Code

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

Eingefügt in die Klasseclerk-visitor-tracking.php_

Stil Vergessen Sie nicht, Ihre Inhalte auf Entwürfe unter my.clerk.io zu veröffentlichen.

Alle Empfehlungen, die data-exit-intent=“true” enthalten, lösen das Pop-up-Fenster mit der Ausstiegsabsicht aus.

Hinzufügen von Empfehlungen mit Visual Hooks #

Innerhalb von WooCommerce werden bestimmte Webseiten mit Visual Hooks erstellt, anstatt aus einer HTML-Datei gerendert zu werden. Um Seiten, die mit Visual Hooks erstellt wurden, Inhalte hinzuzufügen, müssen Sie den Inhalt Clerk.io 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 der <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 Empfehlungs-Sliders auf der Add-to-Cart-Seite:

// 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:

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/

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.