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 Daten-Synchronisationsfehlern bis zur manuellen Installation von Elementen.

Manuelle Installation von Elementen #

WooCommerce-Themes platzieren Hooks oft an nicht standardmäßigen Positionen.

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

Befolgen Sie diese Schritte, um Codes bei Bedarf manuell einzufügen.

Suchformular finden #

Beginnen Sie damit, Ihr Suchformular zu lokalisieren.

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

Search field in WooCommerce

Theme-Dateien aufrufen #

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

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

Dadurch können Sie in den Dateien suchen.

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 themes-Ordner aus, den Sie im vorherigen Schritt gespeichert haben.

Dateien durchsuchen #

Nun können Sie die Dateien durchsuchen.

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

Falls Sie Search bereits eingerichtet und eine Seite in WooCommerce für Suchergebnisse erstellt haben, Ihr Suchfeld jedoch nicht korrekt verlinkt, gehen Sie wie folgt vor.

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

Suchen Sie einen eindeutigen HTML-Code für das Suchfeld, z. B. searchform:

Search form HTML

Suchen Sie danach im Editor, um eine Liste der Dateien zu erhalten, die es enthalten:

Search results in editor

Finden Sie die passende Datei per FTP.

Formulareinstellungen aktualisieren #

Nun 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 (oft im <form>-Element), muss dem Namen der Seite entsprechen, die Sie in WooCommerce erstellt haben. Dies ist häufig "soegeresultater" oder "search-results".

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

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

Ein Suchformular könnte vor der Änderung so aussehen:

Search form before changes

Und nach der Änderung so:

Search form after changes

Nun sollten Sie beim Suchen auf die Suchseite weitergeleitet werden: www.mywebshop.com/soegeresultater?searchterm=test.

Nutzung von Formatters #

Clerk.js ermöglicht Ihnen das Schreiben eigener JavaScript-Funktionen, die Ihrer Designs neue Funktionalitäten hinzufügen.

Formatters können auf zwei Arten ergänzt werden:

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

  • Als Teil der Clerk.js-Konfiguration mit dem tracking-script auf allen Seiten, sodass mehrere Formatter gleichzeitig definiert werden können.

In WooCommerce befindet sich das Tracking Script 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 Formatter #

Sie können beliebig viele Formatters schreiben, getrennt durch Komma:

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

Nutzung in Designs #

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

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

Damit können Sie jede gewünschte Funktionalität in Ihren Designs umsetzen.

HTTP-Authentifizierung #

HTTP-Authentifizierung wird oft auf Staging-Seiten verwendet, um unerwünschte Besucher zu vermeiden.

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

Das lässt sich 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 Synchronisationsfehler #

Hinweis: Wir empfehlen immer, das Plugin auf die neueste Version zu aktualisieren, um alle aktuellen Features 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.

Allerdings kann es in manchen Fällen vorkommen, dass die Serverkonfiguration den Import blockiert, sodass im Data Sync-Prozess ein Fehler auftritt.

Unten finden Sie eine Liste der häufigsten Fehler und wie Sie diese beheben.

401 Unauthorized #

Dieser Fehler tritt auf, wenn Ihr Webshop oder Ihre Entwicklungsumgebung HTTP-Authentifizierung zum Zugriff erfordert.

Dies wird gelöst, indem Benutzername und Passwort als Teil der Import-URL eingefügt werden:

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

403 Forbidden #

Dieser Fehler tritt auf, wenn Ihr Server die Verbindung des Importers blockiert.

In den meisten Fällen müssen Sie einfach die IP-Adresse des Importers in die Whitelist aufnehmen, um Zugriff zu gewähren.

Die aktuellste IP-Adresse finden Sie hier.

Stellen Sie außerdem sicher, dass Public Key, Private Key und Import URL für den Shop 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 freigeschaltet haben und der Fehler trotzdem erscheint, prüfen Sie Folgendes:

  • Der Authentifizierungsteil des Requests könnte vom Shop-Server entfernt werden.

  • Rate Limit des Servers, z. B. durch Cloudflare.

  • Ein Redirect von www zu non-www (oder umgekehrt) auf dem Webshop. Falls der Data Sync-Log einen 403 für eine URL ohne www anzeigt, die Website aber mit www läuft, versuchen Sie, www. in die Store URL Ihrer Clerk.io-Konfiguration einzutragen. Beispielsweise https://www.yourdomain.com statt https://yourdomain.com.

404 Not Found #

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

In den meisten Fällen passiert das, weil das Plugin

  • gar nicht installiert ist

  • aufgrund eines Updates deaktiviert wurde

  • ein Cache die Initialisierung des Links verhindert

  • WooCommerce-Permalinks auf Beitragsname statt auf Monat und Name gesetzt sind

Folgen Sie diesen Schritten zur Fehlersuche:

  1. Stellen Sie sicher, dass Sie das Plugin korrekt installiert und aktiviert haben. Wenn Sie das Plugin kürzlich automatisch aktualisiert haben, kann es vorkommen, dass WooCommerce das Plugin manchmal deaktiviert. Ist dies passiert, 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 die Synchronisation weiterhin nicht funktioniert, wechseln Sie im WooCommerce-Backend zu Settings > Permalinks und ändern Sie die Allgemeinen Einstellungen auf Monat und Name und klicken Sie auf Änderungen speichern:

WooCommerce permalinks settings

429 Too Many Requests #

Dieser Fehler tritt auf, wenn Ihr Server den Zugang des Importers wegen zu vieler eingehender Anfragen verweigert.

Sie können dies beheben, indem Sie entweder:

  • das Request-Limit auf Ihrem Server erhöhen.

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

Bei Byte.nl gibt der Importer diesen Fehler aufgrund des Rate-Limiters aus. Kontaktieren Sie Byte.nl-Support und bitten Sie darum, den User-Agent “clerk” des Importers zu whitelisten.

500 Internal Server Error #

Dieser Fehler bedeutet, dass Ihr Server einen internen Fehler hatte und nicht spezifizieren konnte, welcher Fehler genau aufgetreten ist.

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

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

Ein Beispiel für einen solchen Fehler kann auftreten, wenn Sie sowohl WooCommerce als auch Klarna updaten. In diesem Fall ist das Problem auf das Plugin ‘woocommerce-gateway-klarna’ zurückzuführen, das nicht aktualisiert wird.

Gehen Sie in diesem Fall zu woocommerce-gateway-klarna > includes > variables-checkout.php.

Suchen Sie nach:

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

und ändern Sie es in:

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

503 Service Unavailable #

Dieser Fehler ist typischerweise vorübergehend 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 bestehen bleibt, könnte das bedeuten, dass Ihr Server überlastet oder am Limit ist.

Kontrollieren Sie hierzu die aktuelle Serverauslastung.

520 Unknown Error #

Dieser Fehler stammt meist von Cloudflare und tritt oft auf, weil WooCommerce bei höheren Page Sizes zu Engpässen kommt.

Zur Behebung setzen Sie die Page Size in my.clerk.io > Data > Configuration auf 50 und führen eine neue Synchronisation durch.

522 Connection Timed Out #

Dieser Fehler tritt auf, wenn der Server zu beschäftigt ist, um zu antworten, oder wenn dem Importer der Serverzugriff verweigert wird.

  1. Warten Sie einige Minuten und versuchen Sie es erneut. Möglicherweise war der Server vorübergehend ausgelastet.

  2. Wenn es immer noch nicht funktioniert, tragen Sie die Importer-IP in die Whitelist Ihrer Serverkonfiguration ein. Die aktuellste 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-Umgebung nie aktiviert sein, da es Seiten verlangsamt und potenziell Fehlermeldungen im Frontend zeigt.

Das Synchronisationsproblem entsteht, wenn WooCommerce beim Erstellen der Produktdaten für den Import auf einen Fehler stößt.

Beheben lässt sich dies, indem Sie das Debugging in wp-config.php deaktivieren und define('WP_DEBUG', false) setzen.

Diese Anleitung erklärt es im Detail:

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

Und diese Anleitung bietet eine Alternative:

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

Fehler werden weiterhin geloggt, aber dann nur noch in eine Datei – nicht mehr im Debug-Modus.

Upgrade auf Clerk.js 2 #

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

Damit lässt sich Clerk auf jedem Webshop einfacher installieren.

Da sich die beiden Versionen jedoch leicht unterscheiden, müssen Sie diese Schritte für ein erfolgreiches Upgrade befolgen.

Die zwei Hauptunterschiede von Clerk.js 2 sind:

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

  • Das Script muss direkt vor dem </head>-Tag im Template Ihres Webshops eingefügt werden.

Designs erstellen #

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

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

Unten finden Sie eine Anleitung, wie Sie Ihren alten Code auf Liquid übertragen.

Design Editor-Variante #

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

  2. Wählen Sie einen anderen Design-Typ als Blank und vergeben Sie einen Namen. Wir empfehlen, “V2” hinzuzufügen, damit klar ist, dass es sich um Clerk.js 2-Designs handelt.

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

  4. Klicken Sie auf Publish Design, wenn Sie fertig sind, und fahren Sie mit Schritt 2 des Guides fort.

  5. Gehen Sie zu Recommendations/Search > Elements und wählen Sie, dass Ihr Clerk-Element das neue Design nutzt. Klicken Sie anschließend auf Update Element.

  6. Dadurch werden diese Designs vorübergehend im Shop nicht angezeigt, bis Sie Clerk.js 2 wie weiter unten beschrieben eingebunden haben.

Designs umwandeln #

Da Clerk.js 2 die flexiblere Template-Sprache Liquid verwendet, müssen Sie Ihr Design darauf anpassen.

  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 Clerk.js 2-Designs zu kennzeichnen.

  3. Klicken Sie auf Create Design.

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

  5. Wechseln Sie zurück in die Designübersicht und klicken Sie auf Edit Design Ihres Clerk.js 1-Designs. Wir empfehlen, dies in einem neuen Tab zu machen, 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 bemerken, dass die Container Code im neuen Design nicht enthalten ist.

    • Dies liegt daran, dass Liquid mit for-Schleifen alle Produkte rendert.

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

  7. Wandeln Sie das Design in die Liquid-Syntax um. Der Hauptunterschied ist, dass früher die Syntax {{ formatter attribute }} verwendet wurde, aber in v2 lautet sie {{ product.attribute | formatter }}.

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

  9. Wenn Sie {{#if}}- oder {{#is}}-Befehle genutzt haben, müssen auch diese umgewandelt werden – verwenden Sie {% if product.attribute %}, {% else %}, {% endif %}.

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

  11. Unten ein Beispiel für ein Clerk.js 1-Design und die vollständig umgewandelte 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 legen Sie fest, dass Ihr Element-Block das neue Design nutzt.

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

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

Mehrsprachige Einrichtung #

Wenn Sie WPML in WooCommerce verwenden, sollten Sie Ihre Sprachen anhand der URL unterscheiden können, z. B.:

Wenn Sie solche individuellen URLs haben, können Sie das WooCommerce-Plugin für WPML erweitern.

Es ist auch möglich, die Sprache per lang-Parameter zu definieren, z. B.:

Shop kopieren #

Der einfachste Weg, Clerk in mehreren Domains bei Standard-Setups zu verwenden, ist das Erstellen eines separaten Shops für jede Domain in my.clerk.io.

So können Sie Produkte, Umsätze, Währungen etc. für jede Domain getrennt verwalten.

Nachdem Sie die Ersteinrichtung abgeschlossen haben, klicken Sie oben links im Seitenmenü und dann auf "+ Add new store" als letzte Option in der Liste (meist unterhalb des bestehenden Shops und Firmennamens).

Auf der Add New Store-Seite tragen Sie die Details Ihres neuen Webshops ein. Wählen Sie Ihren Hauptshop im Dropdown Copy Elements From Existing Store und klicken Sie auf Add Store:

Add new store in WooCommerce

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

Installation und Konfiguration #

Offizieller Support für WPML wurde zur Clerk WooCommerce Extension hinzugefügt. Solange Sie diese Version oder neuer verwenden, wird WPML unterstützt.

Im WooCommerce-Einstellungsbereich sehen Sie die Einstellungen wie gewohnt.

Ist WPML auf Ihrer WordPress-Seite aktiv und konfiguriert, erscheint oben Multi Language Scope mit der aktuellen Sprache.

Zum Wechseln der Sprache nutzen Sie einfach den Selektor im oberen Bereich. Wählen Sie die Sprache aus, für die Sie Clerk konfigurieren möchten, und nehmen Sie die gewünschten Einstellungen vor. Wiederholen Sie dies für jede Sprache.

Beachten Sie: All Languages sollte beim Speichern der Konfiguration nicht ausgewählt werden, da die Einstellungen dann nur als Fallback gespeichert werden.

Domains synchronisieren #

Sobald Sie das Plugin erweitert haben, können Sie jeden Shop mit seiner Sprachdomain synchronisieren.

Da das Plugin bereits installiert ist, können Sie direkt mit der Konfiguration und dem Datenabgleich starten.

Sobald die Synchronisation abgeschlossen ist, ist Ihre Domain bereit und nutzt das gleiche Setup wie Ihr Hauptshop.

Shortcode-Integration #

Wenn Sie einen Shortcode-Editor wie Elementor verwenden, wird unser regulärer Empfehlungs-Code-Snippet möglicherweise nicht angezeigt, da die Produkt-ID in Elementor anders als im normalen HTML-Block syntaktisch dargestellt wird.

Wenn Sie Hooks verwenden, können Sie über Appearance -> Custom Layouts -> Insert den Shortcode am Clerk-Hook einfügen (ein Entwickler kann eigene Hooks anlegen, um Clerk als Hook einzubinden).

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>

Mit:

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

Probieren Sie es zuerst nur mit einfachen Klammern und dann, falls es nicht funktioniert, mit doppelten Klammern:

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

Wenn das auch nicht geht, probieren Sie Folgendes:

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

Manuell einfügen #

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

WP Bakery Builder #

Theme-Datei-Integration: Produktseiten-Slider auf allen Seiten einfügen

  1. Navigieren Sie zu Appearance > Theme File Editor > WooCommerce > content-single-product.php (oder einer ähnlichen Datei, die das Layout der Produktseite definiert).

  2. Fügen Sie den Span-Code an der gewünschten Stelle ein, um den Slider anzuzeigen. Dies entspricht einer Änderung via FTP.

<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 bestimmte Seiten mithilfe von Visual Hooks erzeugt, statt aus HTML-Dateien heraus gerendert zu werden.

Um Inhalte auf Seiten mit Visual Hooks einzufügen, müssen Sie die Clerk-Inhalte in die functions.php-Datei des aktiven Themes eintragen.

Die functions.php befindet sich üblicherweise unter folgendem Pfad:

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

Produktseite Beispiel #

Um beispielsweise ein Recommendations-Element mit dem Element @product-page-alternatives zu Ihrer Produktseite hinzuzufügen, fügen Sie diesen Code in die zentralen <?php ?>-Tags in die functions.php ein:

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

Warenkorb-Seite Beispiel #

Ein weiteres Beispiel: Recommendations-Element auf die Warenkorb-Seite einfü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>";
}

Um Ihre eigenen Recommendation-Elemente einzufügen, ersetzen Sie den Code in den -Tags durch den Einbettungscode, den Sie im Bereich Recommendations-Elements in my.clerk.io finden, z. B.:

Clerk embed code example

Der Wert in add_action(), in diesem Beispiel 5, gibt WooCommerce die Priorität für das eingefügte Element an, wodurch bestimmt wird, wie früh das Element im Visual Hook angezeigt wird.

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

Mehr Infos zu WooCommerce-Seiten mit Visual Hooks:

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

Powerstep-Probleme #

Zweifache Darstellung #

Falls das Powerstep-Element doppelt angezeigt wird, müssen Sie die Seite aufteilen, um dies zu beheben.

  1. Gehen Sie im WooCommerce-Backend auf die Powerstep-Seite, die Sie bei Pages erstellt haben.

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

  3. Klicken Sie im erscheinenden Pop-up auf “OK”.

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

Darstellung fehlgeschlagen #

Falls Powerstep weiterhin nicht angezeigt wird, müssen Sie eventuell WooCommerce’s Cart Redirect-Funktion deaktivieren.

Gehen Sie wie folgt vor:

  1. Navigieren Sie zu WooCommerce > Settings > Products und suchen Sie Add to cart behaviour.

  2. Stellen Sie sicher, dass beide Kästchen abgehakt sind.

  3. Klicken Sie unten auf der Seite auf Save changes.

WooCommerce cart redirect settings

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