Woocommerce

FAQ

Lösungen für häufige Fragen und Probleme bei der Verwendung von Clerk mit WooCommerce

Probleme mit Ihrer WooCommerce-Integration? Diese FAQ behandelt die häufigsten Probleme und deren Lösungen, von Datensynchronisationsfehlern bis hin zur manuellen Installation von Elementen.

Manuelle Element-Installation #

WooCommerce-Themes platzieren Hooks oft an nicht standardisierten Positionen.

Das bedeutet, dass das Clerk-Plugin die Embed-Codes möglicherweise nicht automatisch einfügen kann.

Folgen Sie diesen Schritten, um Codes bei Bedarf manuell einzufügen.

Suchformular finden #

Beginnen Sie damit, Ihr Suchformular zu lokalisieren.

Untersuchen Sie Ihre Website und finden Sie einen einzigartigen Text für das Suchfeld.

Theme-Dateien öffnen #

Öffnen Sie die FTP-Dateien Ihres Webshops und suchen Sie public_html > wp-content > themes.

Ziehen Sie den themes-Ordner auf Ihren Desktop, um ihn auf Ihren Computer zu kopieren.

So können Sie die Dateien durchsuchen.

Im Editor öffnen #

Öffnen Sie den Ordner in Ihrem bevorzugten Code-Editor.

Zum Beispiel in Sublime: Project > Add Folder to Project.

Wählen Sie den Ordner themes aus, den Sie im vorherigen Schritt gespeichert haben.

Dateien durchsuchen #

Nun können Sie die Dateien durchsuchen.

Sie können sich dafür entscheiden, nur nach .php-Dateien zu suchen, da dies der Standard-Dateityp für WooCommerce-Theme-Dateien ist.

Wenn Sie Search bereits eingerichtet und eine Seite in WooCommerce für Suchergebnisse erstellt haben, Ihr Suchfeld aber nicht korrekt verlinkt, befolgen Sie diese Schritte.

Sehen Sie sich zunächst Ihren Webshop im Browser an. Wir empfehlen Chrome.

Suchen Sie HTML, das das Suchfeld identifiziert, wie z.B. searchform.

Suchen Sie in Ihrem Editor nach diesem Bezeichner, um die Dateien zu finden, die ihn enthalten.

Finden Sie die entsprechende Datei per FTP.

Formulareinstellungen aktualisieren #

Anschließend können Sie die Einstellungen so ändern, dass Clerk auf die richtige Seite verlinkt.

Sie müssen drei Dinge ändern:

  • Die URL, zu der Kunden verlinkt werden — häufig im <form>-Element zu finden — muss mit dem Namen der Seite übereinstimmen, die Sie in WooCommerce erstellt haben. Dies ist oft "soegeresultater" oder "search-results".

  • Das "name"-Attribut des Eingabefelds muss searchterm sein.

  • Das versteckte Eingabefeld mit name="post_type" muss auskommentiert werden.

Aktualisieren Sie das Suchformular entsprechend den drei oben genannten Änderungen.

Nun sollte die Suche auf die Suchseite verlinkt werden: www.mywebshop.com/soegeresultater?searchterm=test.

Formatters verwenden #

Clerk.js ermöglicht es Ihnen, benutzerdefinierte JavaScript-Funktionen zu schreiben, die neue Funktionen zu Ihren Designs hinzufügen.

Formatters können auf zwei Arten hinzugefügt werden:

  • Über my.clerk.io > Developers > Formatters, wobei jeder Formatter als separater Eintrag erstellt wird.

  • Als Teil der Clerk.js-Konfiguration, wobei das Tracking-Skript auf allen Seiten hinzugefügt wird, sodass mehrere Formatters gleichzeitig definiert werden können.

In WooCommerce befindet sich das Tracking-Skript unter: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php.

Beispiel-Formatter #

Ein Beispiel ist unten zu sehen:

Clerk('config', {
  key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
  formatters: {
    log_price: function(price) {
      console.log(price);
    }
  }
});

Mehrere Formatters #

Sie können beliebig viele Formatters schreiben, die durch Kommas getrennt werden:

formatters: {
  log_price: function(price) {
    console.log(price);
  },
  calculate_discount: function(price, special_price) {
    return price - special_price;
  },
  substring: function(text) {
    var short_string = text.substring(0, 20);
    return short_string;
  }
}

Verwendung in Designs #

Nachdem Sie Ihre Formatters erstellt haben, können Sie sie in Ihren Designs mit folgendem Syntax verwenden:

{%raw%}{{ price | log_price }} {{ price | calculate_discount | special_price }}{%endraw%}

So können Sie beliebige Funktionalitäten in Ihre Designs integrieren.

HTTP-Authentifizierung #

HTTP-Authentifizierung wird auf Staging-Seiten oft genutzt, um unerwünschte Besucher fernzuhalten.

Dies blockiert den Clerk Importer und zeigt einen 401 Unauthorized-Fehler im Sync-Log an.

Sie können dies beheben, indem Sie die Authentifizierungsdaten in die Import-URL einfügen.

In my.clerk.io > Data > Configuration aktualisieren Sie Ihre Import-URL wie folgt:

https://USER:PASS@www.ewoksRus.com

Häufige Sync-Fehler #

Hinweis: Wir empfehlen, das Plugin immer auf die neueste Version zu aktualisieren, um alle aktuellen Funktionen von Clerk zu erhalten.

Beim Importieren von Daten mit Clerks WooCommerce Plugin ist der Server Ihres Webshops dafür verantwortlich, Produkt-, Kategorie- und Bestelldaten an Clerk zu senden.

In einigen Fällen kann jedoch die Serverkonfiguration den Import daran hindern, auf die Daten zuzugreifen, was einen Fehler in der Data Sync verursacht.

Nachfolgend finden Sie eine Liste der häufigsten Fehler und deren Behebung.

401 Unauthorized #

Dieser Fehler tritt auf, wenn Ihr Webshop oder Ihre Entwicklungsumgebung zur Zugriffsgewährung eine HTTP-Authentifizierung erfordert.

Dies wird gelöst, indem Sie Benutzername und Passwort als Teil der Import-URL einfügen:

http://username:password@woocommerce.clerk.io

403 Forbidden #

Dieser Fehler tritt auf, wenn Ihr Server den Importer blockiert.

In den meisten Fällen müssen Sie einfach die IP-Adresse des Importers auf die Whitelist setzen, damit er Zugriff erhält.

Die aktuelle IP-Adresse finden Sie hier.

Stellen Sie außerdem sicher, dass der Public Key, Private Key und die Import URL für den Store in my.clerk.io korrekt sind.

Was, wenn ich bereits auf die Whitelist gesetzt habe, aber der Fehler weiterhin auftritt?

Wenn Sie die IP-Adresse des Importers bereits auf die Whitelist gesetzt haben und der Fehler weiterhin besteht, überprüfen Sie Folgendes:

  • Der Authentifizierungsteil des Bodys kann von der Anfrage des Shop-Servers entfernt worden sein.

  • Rate Limit des Servers in Bezug auf Cloudflare.

  • Eine Weiterleitung von www zu non-www (oder umgekehrt) auf dem Webshop. Wenn das Data Sync-Log einen 403-Fehler für eine URL ohne www anzeigt, die Website aber eigentlich www verwendet, versuchen Sie, www. zur Store URL in Ihrer Clerk.io-Konfiguration hinzuzufügen. Verwenden Sie beispielsweise https://www.yourdomain.com anstelle von https://yourdomain.com.

404 Not Found #

Dieser Fehler tritt auf, wenn der Importer den Link nicht erreichen konnte, der Daten vom Webshop sendet.

Meistens passiert dies, weil das Plugin entweder:

  • überhaupt nicht installiert ist

  • durch ein Update deaktiviert wurde

  • ein Cache verhindert, dass der Link initialisiert wird

  • WooCommerce-Permalinks auf Post name statt Month and name eingestellt sind

Befolgen Sie diese Debugging-Schritte, um den Fehler zu beheben:

  1. Stellen Sie sicher, dass Sie das Plugin korrekt installiert und aktiviert haben. Wenn Sie das Plugin kürzlich automatisch aktualisiert haben, deaktiviert WooCommerce es manchmal. Falls dies passiert ist, gehen Sie zu Plugins > Clerk und klicken Sie auf Aktivieren.

  2. Leeren Sie den Cache Ihres Webshops, bevor Sie einen neuen Import versuchen.

  3. Wenn es immer noch nicht richtig synchronisiert, öffnen Sie Settings > Permalinks in WooCommerce, stellen Sie Common Settings auf Month and name und klicken Sie auf Änderungen speichern.

429 Too Many Requests #

Dieser Fehler tritt auf, wenn Ihr Server dem Importer wegen zu vieler eingehender Anfragen den Zugriff verweigert.

Sie können dies beheben, indem Sie entweder:

  • Das Request Limit für Ihren Server erhöhen.

  • Die Page Size in my.clerk.io > Data > Configuration auf einen höheren Wert stellen, sodass der Importer weniger, aber größere Anfragen stellt.

Wenn Sie beim Hosting-Anbieter Byte.nl sind, tritt dieser Fehler üblicherweise durch deren Rate Limiter auf. Wenden Sie sich in diesem Fall an den Byte.nl-Support und lassen Sie den Importer-User-Agent “clerk” auf die Whitelist setzen.

500 Internal Server Error #

Dieser Fehler bedeutet, dass Ihr Server einen internen Fehler hatte und nicht spezifizieren konnte, was passiert ist.

In solchen Fällen prüfen Sie Ihr Server-Log, um herauszufinden, welcher Prozess abgestürzt ist und warum.

In den meisten Fällen liegt es an einem Produkt mit einem ungültigen Attribut oder einer Funktion, die im Webshop falsch aufgerufen wird.

Ein Beispiel: Nach einem Upgrade von WooCommerce und Klarna kann das Problem durch das ‘woocommerce-gateway-klarna’-Plugin entstehen, das nicht upgradet.

In diesem Fall gehen Sie zu woocommerce-gateway-klarna > includes > variables-checkout.php.

Suchen Sie nach:

if ( ! is_admin() && ! empty( $klarna_country )) {

und ändern Sie es zu:

if ( ! is_admin() && ! empty( $klarna_country ) && WC()->session ) {

503 Service Unavailable #

Dieser Fehler ist in der Regel temporär und tritt auf, wenn der Server zu beschäftigt ist, um die Anfrage zu bearbeiten.

Bitte versuchen Sie es später erneut.

Wenn das Problem weiterhin besteht, kann das darauf hindeuten, dass der Server überlastet ist und an seine Kapazitätsgrenze stößt.

Um dies zu überprüfen, prüfen Sie die Serverauslastung und analysieren Sie die aktuelle Nutzung.

520 Unknown Error #

Dieser Fehler wird normalerweise von Cloudflare zurückgegeben und tritt oft auf, weil es in WooCommerce einen Engpass gibt, der bei größeren Page Sizes Probleme verursacht.

Um das zu beheben, setzen Sie Ihre Page Size auf 50 in my.clerk.io > Data > Configuration und führen Sie eine neue Data Sync durch.

522 Connection Timed Out #

Dieser Fehler tritt meistens auf, wenn der Server zu beschäftigt ist, um zu antworten, oder wenn unser Importer keinen Zugriff auf den Server erhält.

  1. Warten Sie einige Minuten und versuchen Sie danach erneut zu synchronisieren, um zu sehen, ob der Server nur vorübergehend ausgelastet war.

  2. Falls es immer noch nicht funktioniert, setzen Sie die IP des Importers auf die Whitelist in Ihrer Server-Konfiguration. Die aktuelle IP-Adresse finden Sie hier.

Ungültige API-Antwort #

Dieser Fehler tritt meist auf, wenn in WooCommerce das Debugging aktiviert wurde.

Dies sollte auf einer Live-Seite nie aktiviert sein, da es die Seiten verlangsamt und potenziell Fehlermeldungen im Frontend anzeigt.

Das Sync-Problem tritt auf, wenn WooCommerce beim Erstellen der Produktdaten für den Import auf einen Fehler stößt.

Dies lässt sich durch Deaktivierung des Debuggings in wp-config.php beheben, indem Sie define('WP_DEBUG', false) setzen.

Diese Anleitung erklärt es ausführlicher:

https://docs.woocommerce.com/document/woocommerce-product-search/api/debugging/

Und diese Anleitung erklärt eine alternative Workaround:

https://aristath.github.io/blog/wp-hide-php-errors

Fehler werden weiterhin protokolliert, auch wenn Sie nicht im Debug-Modus sind, jedoch werden sie lediglich in eine Datei geschrieben.

Upgrade zu Clerk.js 2 #

Clerk.js 2 ist eine schnellere und flexiblere Version unserer JavaScript-Bibliothek.

Sie erleichtert die Installation von Clerk auf jedem Webshop.

Da sich die beiden Versionen leicht unterscheiden, müssen Sie folgende Schritte befolgen, um erfolgreich upzugraden.

Die wichtigsten Unterschiede zu Clerk.js 2 sind:

  • Die Designs in my.clerk.io nutzen die Liquid Template-Sprache, können jedoch auch einfach mit dem Design Editor erstellt werden.

  • Das Skript muss direkt vor dem </head>-Tag in die Vorlage Ihres Webshops eingefügt werden.

Designs erstellen #

Da Clerk.js 2 einen anderen Ansatz für Designs verfolgt, müssen Sie neue Designs anlegen.

Sie können Ihre Clerk.js 2 Designs entweder komplett neu im Design Editor erstellen oder Ihre alten Code-Designs auf Liquid konvertieren.

Im Folgenden wird beschrieben, wie Sie Ihre alten Code-Designs auf Liquid umstellen.

Design Editor-Option #

  1. Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.

  2. Wählen Sie einen anderen Designtyp als Blank und geben Sie ihm einen Namen. Wir empfehlen, “V2” hinzuzufügen, um anzuzeigen, dass Sie Clerk.js 2 Designs verwenden.

  3. Im Design Editor können Sie vorhandene Elemente wie Name, Bild, Button usw. bearbeiten oder neue Elemente zum Design hinzufügen.

  4. Klicken Sie auf Publish Design, wenn Sie fertig sind, und fahren Sie mit Schritt 2 in der Anleitung fort.

  5. Gehen Sie zu Recommendations/Search > Elements und ändern Sie Ihr Clerk-Element, damit es Ihr neues Design verwendet, und klicken Sie dann auf Update Element.

  6. Dadurch werden die Elemente vorübergehend nicht auf Ihrem Webshop angezeigt, bis Sie Clerk.js 2 gemäß dieser Anleitung eingebunden haben.

Designs konvertieren #

Da Clerk.js 2 die flexiblere Template-Sprache Liquid verwendet, müssen Sie die Designs entsprechend konvertieren.

  1. Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.

  2. Wählen Sie Blank > Code und vergeben Sie einen Namen. Wir empfehlen, “V2” hinzuzufügen, um die Clerk.js 2 Designs kenntlich zu machen.

  3. Klicken Sie auf Create Design.

  4. Sie erhalten ein leeres Design mit Product-HTML und CSS, das Sie verwenden können.

  5. Gehen Sie zurück zur Design-Übersicht und klicken Sie auf Edit Design für Ihr Clerk.js 1 Design. Wir empfehlen, dies in einem neuen Tab aufzurufen, damit Sie den Code einfach kopieren können.

  6. Kopieren Sie das alte Clerk.js 1 Design in das neue Clerk.js 2 Design.

    • Sie werden feststellen, dass im neuen Design kein Container Code enthalten ist.

    • Das liegt daran, dass Liquid for-Loops nutzt, um alle Produkte zu rendern.

    • Kopieren Sie Ihr altes Product-HTML in die for-Schleife, Ihren alten Container-Code herum und das CSS ebenfalls.

  7. Konvertieren Sie das Design in die Liquid-Syntax. Der Hauptunterschied ist, dass die alten Designs die Syntax {{ formatter attribute }} nutzten, während v2 die Syntax {{ product.attribute | formatter }} verwendet.

  8. Gehen Sie alle Ihre Attribute durch und passen Sie sie an das neue Format an.

  9. Wenn Sie {{#if}} oder {{#is}} verwenden, müssen diese ebenfalls konvertiert werden. Nutzen Sie {% if product.attribute %} {% else %} {% endif %}.

  10. Löschen Sie id="{{ $id }}" und die Klasse :target aus dem Container-Code in der Clerk.js 2 Version, da diese nicht mehr unterstützt werden.

  11. Unten ein Beispiel für ein Clerk.js 1 Design und die voll konvertierte Version:

Clerk.js 1 Design #
// Product HTML
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Price {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Price {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Price {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Buy Now</div>
</li>

// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- This code creates the slider by its ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>
Clerk.js 2 Design #
<h2>{{ headline }}</h2>

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Buy Now</div>
        </a>
    </li>
    {% endfor %}
</ul>

  1. Klicken Sie auf Update Design, um die Änderungen zu speichern.

  2. Gehen Sie zu Recommendations/Search > Elements und ändern Sie Ihren Element-Block auf das neue Design.

  3. Klicken Sie auf Update Element. Dadurch werden die Elemente vorübergehend nicht auf Ihrem Webshop angezeigt, bis Sie mit Schritt 2 fertig sind. Wählen Sie das neue Design für alle Elemente, die aktualisiert werden sollen.

  4. Aktualisieren Sie abschließend das Plugin gemäß dieser Anleitung.

Mehrsprachige Einrichtung #

Wenn Sie WPML in WooCommerce nutzen, sollten Sie Ihre Sprachen anhand der URL differenzieren können, zum Beispiel:

Wenn Sie solche spezifischen URLs haben, können Sie das WooCommerce-Plugin auf WPML erweitern.

Es ist auch möglich, die Sprache mit dem lang-Parameter zu definieren, zum Beispiel:

Store kopieren #

Der einfachste Weg, Clerk in mehreren Domains in Standard-Setups zu verwenden, besteht darin, für jede Domain einen separaten Store in my.clerk.io anzulegen.

So können Sie Produkte, Verkäufe, Währungen usw. getrennt verwalten und den Überblick behalten.

Nach der ersten Einrichtung klicken Sie oben links im Seitenmenü auf das Menü und dann auf "+ Add new store" (letzter Eintrag in der Dropdown-Liste, meist unter den bestehenden Stores und Ihrem Firmennamen).

Auf der Seite Add New Store geben Sie Ihre Webshop-Details ein, wählen unter Copy Elements From Existing Store den Hauptstore aus und klicken auf Add Store.

So werden die Elements und Designs aus Ihrem Hauptstore übernommen. Denken Sie daran, auch die Headlines in die richtige Sprache zu übersetzen.

Installation und Konfiguration #

Offizieller Support für WPML wurde zur Clerk WooCommerce Extension hinzugefügt. Das bedeutet, dass WPML unterstützt wird, sofern Sie diese Version oder eine neuere verwenden.

Im WooCommerce-Einstellungsmenü sehen Sie die Einstellungen wie gewohnt.

Wenn WPML auf Ihrer WordPress-Seite aktiv und konfiguriert ist, sehen Sie Multi Language Scope mit der aktuellen Sprache oben auf der Einstellungsseite.

Um die Sprache zu wechseln, nutzen Sie einfach den Selektor im oberen Panel. Wählen Sie die Sprache, für die Sie Clerk konfigurieren möchten, und hinterlegen Sie Ihre Einstellungen. Wiederholen Sie dies für jede Sprache.

Beachten Sie, dass Sie beim Speichern der Konfiguration All Languages nicht auswählen sollten, da dies die Einstellungen nur als Fallback speichert.

Domains synchronisieren #

Sobald Sie das Plugin erweitert haben, können Sie jeden Store mit seiner Sprach-Domain synchronisieren.

Nachdem Sie die Erweiterung installiert haben, können Sie sofort konfigurieren und Daten synchronisieren.

Nach Abschluss der Sync ist Ihre Domain bereit und verwendet das gleiche Setup wie Ihr Hauptstore.

Shortcode-Integration #

Wenn Sie einen Shortcode-Editor wie Elementor nutzen, wird unser regulärer Empfehlungs-Code möglicherweise nicht korrekt angezeigt, da die Produkt-ID in Elementor anders als in einem normalen HTML-Block geschrieben wird.

Wenn Sie Hooks verwenden, können Sie unter Appearance -> Custom Layouts -> Insert den Shortcode an dem Hook einfügen, der zu Clerk gehört (ggf. kann ein Entwickler diese Hooks anlegen).

Code ersetzen #

Um den Code einzufügen, ersetzen Sie:

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

Durch:

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

Probieren Sie es zunächst mit einfachen, dann ggf. mit doppelten Klammern:

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

Falls dies nicht funktioniert, versuchen Sie folgende Varianten:

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

Manuelle Einbindung #

Falls Sie den Shortcode nicht einfügen oder keinen Editor nutzen können, gehen Sie zu Appearance > Personalization, klicken Sie auf die Produktseite und folgen Sie dann diesen Schritten Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

Theme-Datei-Integration: Slider für Produktseite auf allen Seiten hinzufügen

  1. Navigieren Sie zu Appearance > Theme File Editor > WooCommerce > content-single-product.php (oder einer ähnlichen Datei, in der Ihr Produktseiten-Layout definiert ist).

  2. Fügen Sie den span-Code an gewünschter Stelle im File ein, um den Slider anzuzeigen. Dieser Prozess entspricht der Änderung via 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>

Visual Hooks #

Innerhalb von WooCommerce werden einige Website-Seiten mittels Visual Hooks erstellt, statt aus einer HTML-Datei gerendert zu werden.

Um Inhalte auf solche durch Visual Hooks generierte Seiten hinzuzufügen, müssen Sie den Clerk-Inhalt in die functions.php des aktiven Webshop-Themes einfügen.

Die functions.php befindet sich üblicherweise unter:

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

Beispiel Produktseite #

Wenn Sie z. B. ein Recommendations-Element mit dem Element @product-page-alternatives auf Ihrer Produktseite einfügen möchten, platzieren Sie folgenden Code im Haupt-<?php ?>-Block in functions.php:

// 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>";
}

Warenkorbseite Beispiel #

Ein weiteres Beispiel, um ein Recommendations-Element auf der Warenkorb-Seite einzufügen:

// 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>";
}

Wenn Sie Ihre eigenen Recommendation-Elemente auf diesen Seiten verwenden möchten, ersetzen Sie die Beispiel-<span>-Blöcke durch die Embed-Codes Ihrer Elements aus my.clerk.io.

Der Wert in add_action(), hier die 5, bestimmt die Priorität, mit der WooCommerce das Element einbindet. Dadurch wird gesteuert, wie früh das Element innerhalb des Visual Hooks angezeigt wird.

Hinweis: Bei der Priorität akzeptiert WooCommerce nur Vielfache von 5.

Weitere Infos zu WooCommerce-Seiten, die Visual Hooks verwenden:

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

Powerstep-Probleme #

Doppelte Darstellung #

Tritt das Problem auf, dass der Powerstep doppelt angezeigt wird, müssen Sie die Seite teilen, um es zu beheben.

  1. Gehen Sie im WooCommerce-Backend auf die Powerstep-Seite, die Sie unter Pages angelegt haben.

  2. Wählen Sie oben rechts Shortcodes und dann Row / Columns.

  3. Klicken Sie im auftauchenden Popup auf “OK”.

  4. Verschieben Sie [clerk-powerstep] innerhalb der [row] [col] und [/row] [/col]-Tags und klicken Sie dann auf Save.

Keine Darstellung #

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

Gehen Sie dazu folgendermaßen vor:

  1. Gehen Sie zu WooCommerce > Settings > Products und finden Sie Add to cart behaviour.

  2. Stellen Sie sicher, dass beide Checkboxen deaktiviert sind.

  3. Klicken Sie unten auf Save changes.

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