Woocommerce

FAQ

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

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

Manuelle Element-Installation #

WooCommerce-Themes platzieren Hooks oft an nicht standardisierten Positionen.

Das bedeutet, dass das Clerk Plugin den Einbettungscode 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 suchen Sie nach einem eindeutigen Text für das Suchfeld.

Search field in WooCommerce

Theme-Dateien öffnen #

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

Ziehen Sie den themes-Ordner auf Ihren Desktop, um eine Kopie auf Ihrem Computer zu haben.

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

Dateien durchsuchen #

Nun können Sie die Dateien durchsuchen.

Sie können wählen, nur in .php-Dateien zu suchen, da dies der Standard-Dateityp für WooCommerce-Theme-Dateien ist.

Wenn Sie die Suche bereits eingerichtet und eine Seite in WooCommerce für Suchergebnisse erstellt haben, Ihr Suchfeld aber nicht korrekt verlinkt, gehen Sie wie folgt vor.

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

Finden Sie ein HTML-Element, das für das Suchfeld eindeutig ist, zum Beispiel searchform:

Search form HTML

Suchen Sie dies in Ihrem Editor, um eine Liste von Dateien zu finden, die es enthalten:

Search results in editor

Finden Sie die passende Datei auf dem FTP.

Formulareinstellungen anpassen #

Jetzt können Sie die Einstellungen ändern, damit Clerk auf die richtige Seite verlinkt.

Sie müssen drei Dinge ändern:

  • Die URL, zu der Kunden weitergeleitet werden, oft im <form>-Element zu finden, muss mit dem Namen der von Ihnen in WooCommerce erstellten Seite übereinstimmen. Dies ist oft "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 sollte nach der Änderung so aussehen:

Search form after changes

Jetzt sollten Sie bei der Suche auf die Suchseite weitergeleitet werden: www.mywebshop.com/soegeresultater?searchterm=test.

Verwendung von Formatters #

Clerk.js ermöglicht es Ihnen, eigene JavaScript-Funktionen zu schreiben, die Ihrer Designs neue Funktionalität 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-Script zu allen Seiten hinzugefügt wird und 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 sehen Sie unten:

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

Mehrere Formatter #

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

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 wie folgt verwenden:

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

So können Sie beliebige Funktionalitäten in Ihren Designs erstellen.

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 Sync-Log an.

Sie beheben dies, 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 #

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

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

In manchen Fällen kann jedoch die Konfiguration des Servers den Import daran hindern, auf die Daten zuzugreifen, was einen Fehler im Data Sync verursacht.

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 eine HTTP-Authentifizierung erfordert.

Lösen Sie das Problem, indem Sie Benutzername und Passwort als Teil der Import-URL eintragen:

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

403 Forbidden #

Dieser Fehler tritt auf, wenn Ihr Server den Importer am Zugriff hindert.

In den meisten Fällen müssen Sie lediglich die IP-Adresse des Importers auf die Whitelist setzen.

Die aktuellste IP-Adresse finden Sie hier.

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

Was tun, wenn schon auf der Whitelist, aber der Fehler immer noch auftritt?

Wenn Sie die IP-Adresse des Importers auf die Whitelist gesetzt haben, der Fehler aber weiterhin auftritt, prüfen Sie Folgendes:

  • Der Authentifizierungsteil im Body wird eventuell vom Shop-Server entfernt.

  • Rate limit für den Server bzgl. Cloudflare.

404 Not Found #

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

In den meisten Fällen geschieht dies, weil das Plugin entweder:

  • gar nicht installiert ist

  • nach einem Update deaktiviert wurde

  • ein Cache bewirkt, dass der Link nicht initialisiert wird

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

Folgen Sie diesen Schritten zur Fehlerbehebung:

  1. Stellen Sie sicher, dass Sie das Plugin korrekt installiert und aktiviert haben. Wenn Sie das Plugin vor Kurzem automatisch aktualisiert haben, deaktiviert WooCommerce das Plugin manchmal. Sollte dies der Fall sein, 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, gehen Sie im WooCommerce-Backend zu Settings > Permalinks und ändern Sie die Common Settings auf Month and name und klicken Sie auf Save Changes:

WooCommerce permalinks settings

429 Too Many Requests #

Dieser Fehler tritt auf, wenn Ihr Server dem Importer aufgrund 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 einstellen, sodass der Importer weniger, aber größere Anfragen macht.

Wenn Sie den Hosting-Anbieter Byte.nl nutzen, tritt der Fehler in der Regel aufgrund deren Rate-Limiter auf. Wenden Sie sich in diesem Fall an Byte.nl Support und bitten Sie darum, den User-Agent des Importers “clerk” auf die Whitelist zu setzen.

500 Internal Server Error #

Dieser Fehler bedeutet, dass Ihr Server auf einen internen Fehler gestoßen ist und nicht angeben konnte, welcher Fehler aufgetreten ist.

Überprüfen Sie in solchen Fällen Ihr Server-Log, um zu identifizieren, welcher Prozess abgestürzt ist, und warum.

In den meisten Fällen liegt der Fehler an einem Produkt mit einem ungültigen Attribut oder einer fehlerhaft aufgerufenen Funktion im Webshop.

Ein Beispiel für einen solchen Fehler könnte auftreten, wenn Sie sowohl WooCommerce als auch Klarna upgraden. In diesem Fall wird das Problem durch das Plugin ‘woocommerce-gateway-klarna’ verursacht, das nicht aktualisiert wird.

Falls dies der Fall ist, 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 meist temporär und tritt auf, wenn der Server zu beschäftigt ist, um die Anfrage zu verarbeiten.

Bitte versuchen Sie es später erneut.

Wenn das Problem weiterhin besteht, könnte es darauf hindeuten, dass der Server überlastet ist und seine Kapazitätsgrenze erreicht.

Prüfen Sie zur Bestätigung die Serverauslastung.

520 Unknown Error #

Dieser Fehler kommt meist von Cloudflare und tritt häufig auf, weil es einen Engpass in WooCommerce gibt, der bei höheren Page Sizes zu Problemen führt.

Zur Behebung setzen Sie die Page Size auf 50 in my.clerk.io > Data > Configuration und starten Sie einen neuen Data Sync.

522 Connection Timed Out #

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

  1. Warten Sie einige Minuten und versuchen Sie erneut zu synchronisieren, um zu sehen, ob der Server ausgelastet war.

  2. Wenn es immer noch nicht funktioniert, setzen Sie die IP des Importers in Ihrer Serverkonfiguration auf die Whitelist. Die aktuellste IP-Adresse finden Sie hier.

Invalid API response #

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

Dies sollte auf einem Live-System niemals aktiviert sein, da es die Seiten verlangsamt und potenziell Fehlermeldungen im Frontend anzeigt.

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

Dies kann behoben werden, indem Sie das Debugging in wp-config.php deaktivieren, 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 einen alternativen Workaround:

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

Fehler werden weiterhin protokolliert, auch wenn nicht im Debugging-Modus, aber Sie werden in eine Datei geloggt.

Upgrade auf Clerk.js 2 #

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

Es erleichtert die Installation von Clerk in jedem Webshop.

Da sich die beiden Versionen jedoch leicht unterscheiden, müssen Sie diese Schritte befolgen, um erfolgreich zu aktualisieren.

Die zwei Hauptunterschiede in Clerk.js 2 sind:

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

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

Designs erstellen #

Da Clerk.js 2 eine andere Herangehensweise an Designs hat, müssen Sie neue Designs erstellen.

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

Unten finden Sie eine Anleitung, wie Sie Ihre alten Code-Designs in Liquid umwandeln.

Design Editor Option #

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

  2. Wählen Sie einen Design-Typ außer Blank und geben Sie einen Namen ein. Wir empfehlen, “V2” hinzuzufügen, damit klar ersichtlich ist, dass Sie Clerk.js 2 Designs verwenden.

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

  4. Klicken Sie auf Publish Design, wenn Sie fertig sind, und gehen Sie zu Schritt 2 in der Anleitung.

  5. Gehen Sie zu Recommendations/Search > Elements und ändern Sie Ihren Clerk Content so, dass er Ihr neues Design verwendet, dann klicken Sie auf Update Content.

  6. Dadurch werden sie vorübergehend nicht mehr im Webshop angezeigt, bis Sie Clerk.js 2 wie weiter unten beschrieben eingefügt haben.

Designs umwandeln #

Da Clerk.js 2 die flexiblere Template-Sprache Liquid nutzt, müssen Sie die Designs in diese Sprache umwandeln.

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

  2. Wählen Sie Blank > Code und geben Sie einen Namen ein. Wir empfehlen, “V2” hinzuzufügen, damit klar ist, dass Sie Clerk.js 2 Designs verwenden.

  3. Klicken Sie auf Create Design.

  4. Dies erstellt ein leeres Design mit Produkt-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 zu tun, um den Code einfach kopieren zu können.

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

    • Sie werden feststellen, dass es keinen Container Code im neuen Design gibt.

    • Das liegt daran, dass Liquid for-Schleifen verwendet, um alle Produkte zu rendern.

    • Kopieren Sie Ihr altes Produkt-HTML in die Schleife, den alten Container Code um die Schleife herum und kopieren Sie auch das CSS.

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

  8. Überarbeiten Sie alle Ihre Attribute und passen Sie sie an das neue Format an.

  9. Wenn Sie {{#if}} oder {{#is}} Anweisungen verwenden, müssen diese ebenfalls angepasst werden. Benutzen Sie die Syntax {% 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 Design in Clerk.js 1 und die vollständig 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 Content Block so, dass Ihr neues Design verwendet wird.

  3. Klicken Sie auf Update Content. Dadurch werden sie vorübergehend nicht auf Ihrem Webshop angezeigt, bis Sie mit Schritt 2 fertig sind. Wählen Sie das neue Design für allen Content aus, der aktualisiert werden soll.

  4. Führen Sie zum Schluss das Plugin-Upgrade nach dieser Anleitung durch.

Mehrsprachige Einrichtung #

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

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

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

Store kopieren #

Am einfachsten richten Sie Clerk in mehreren Domains bei Standard-Setups ein, indem Sie für jede Domain einen separaten Store in my.clerk.io anlegen.

So können Sie Produkte, Verkäufe, Währungen usw. je Domain getrennt halten.

Nachdem Sie mit dem ersten Setup fertig sind, klicken Sie auf die obere linke Ecke des Seitenmenüs und dann auf "+ Add new store" ganz unten in der Auswahlliste (in der Regel unter dem/den bestehenden Store(s) und Ihrem Firmennamen).

Füllen Sie auf der Add New Store-Seite die Details Ihres Webshops aus und wählen Sie Ihren Haupt-Store im Dropdown Copy Content From Existing Store aus, dann klicken Sie auf Add Store:

Add new store in WooCommerce

Dadurch werden der Content und die Designs aus Ihrem Haupt-Store übernommen. Vergessen Sie nicht, auch die Headlines in die richtige Sprache zu übersetzen.

Installieren und konfigurieren #

Offizielle Unterstützung für WPML wurde zur Clerk WooCommerce Extension hinzugefügt. Das bedeutet, dass WPML ab dieser Version oder neuer unterstützt wird.

Im Einstellungen-Panel für WooCommerce sehen Sie die Einstellungen wie gewohnt.

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

Um die Sprache zu wechseln, nutzen Sie einfach den Selektor im oberen Bereich. Sie sollten die Sprache auswählen, die Sie mit Clerk konfigurieren möchten, und die gewünschten Einstellungen vornehmen. Wiederholen Sie dies für jede Sprache.

Beachten Sie, dass es nicht ratsam ist, All Languages im Dropdown auszuwählen, wenn Sie Ihre Konfiguration speichern, da die Einstellungen dann nur als Fallback gespeichert werden.

Domains synchronisieren #

Nachdem Sie das Plugin erweitert haben, können Sie jetzt jeden Ihrer Stores mit der jeweiligen Language Domain synchronisieren.

Da Sie die Extension bereits installiert haben, können Sie den ersten Schritt überspringen und direkt mit der Konfiguration und Daten-Synchronisation beginnen.

Wenn der Sync abgeschlossen ist, ist Ihre Domain bereit und verwendet dieselbe Einrichtung wie Ihr Haupt-Store.

Shortcode-Integration #

Wenn Sie einen Shortcode-Editor wie Elementor verwenden, wird unser regulärer Empfehlungscode möglicherweise nicht gerendert, da die Produkt-ID in Elementor anders geschrieben wird als in einem Standard-HTML-Block.

Wenn Sie Hooks verwenden, gehen Sie zu Appearance -> Custom Layouts -> Insert und fügen Sie den Shortcode auf dem Hook ein, der zu Clerk gehört (ein Entwickler kann diese Hooks erstellen, wenn Clerk ein Hook sein soll).

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 zuerst einfache Klammern, und falls das nicht klappt, doppelte Klammern:

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

Falls das nicht funktioniert, können Sie folgende Alternativen versuchen:

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

Manuelles Einfügen #

Falls Sie den Shortcode nicht einfügen können oder keinen Editor nutzen, 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 File Integration: Einen Produktseiten-Slider zu allen Seiten hinzufügen

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

  2. Fügen Sie den Span-Code an der gewünschten Stelle in der Datei ein, um den Slider anzuzeigen. Dieser Vorgang ähnelt der Änderung per 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 Seiten mit Visual Hooks erstellt, statt aus einer HTML-Datei zu rendern.

Um Inhalte auf Seiten, die via Visual Hooks erstellt wurden, hinzuzufügen, müssen Sie den Clerk-Content in die aktive functions.php Ihres Webshops einfügen.

Die functions.php befindet sich in der Regel unter folgendem Pfad:

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

Beispiel Produktseite #

Um z.B. ein Recommendations-Element mit dem Element @product-page-alternatives auf Ihrer Produktseite hinzuzufügen, würden Sie folgenden Code innerhalb der Haupt-<?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>";
}

Beispiel Warenkorbseite #

Ein weiteres Beispiel, um ein Recommendations-Element zur Warenkorb-Seite hinzuzufü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 eigene Recommendation-Elemente auf den oben genannten Seiten einzufügen, ersetzen Sie den Code zwischen den -Tags mit dem Embed-Code, den Sie in Ihren Recommendations-Elementen in my.clerk.io finden, z.B.:

Clerk embed code example

Der Wert im add_action(), in diesem Beispiel 5, gibt WooCommerce die Priorität an, mit der der Content hinzugefügt wird, und beeinflusst so, wie früh der Inhalt im Visual Hook dargestellt wird.

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

Mehr Infos zu WooCommerce-Webseiten, die Visual Hooks verwenden:

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

Powerstep-Probleme #

Doppelte Darstellung #

Wenn das Powerstep-Element doppelt angezeigt wird, müssen Sie die Seite aufteilen, um den Fehler zu beheben.

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

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

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

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

Keine Darstellung #

Wenn Powerstep immer noch nicht angezeigt wird, müssen Sie möglicherweise die Einstellungsoption “Cart Redirect” von WooCommerce deaktivieren.

Gehen Sie dazu wie folgt vor:

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

  2. Stellen Sie sicher, dass beide Kästchen nicht ausgewählt 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.