Woocommerce

Häufig gestellte Fragen

Manuelle Installation von Elementen #

WooCommerce basiert auf Themes, was oft bedeutet, dass das Clerk.io Plugin unsere Embed-Codes nicht einfügen kann, da die Hooks nicht an den Standardpositionen platziert sind.

Befolgen Sie diese Schritte, um Codes manuell einzufügen, falls dies der Fall ist.

  1. Beginnen Sie damit, Ihr Suchformular zu lokalisieren. Sie können dies tun, indem Sie Ihre Website inspizieren und einen einzigartigen Text für das Feld finden.

  1. Öffnen Sie die FTP-Dateien Ihres Webshops und lokalisieren Sie public\_html > wp-content > themes

  2. Ziehen Sie den Themes-Ordner auf Ihren Desktop, um ihn auf Ihren Computer zu kopieren. Dies ermöglicht es Ihnen, in der Datei zu suchen.

  3. Öffnen Sie den Ordner in Ihrer bevorzugten Code-Edit-Software, z.B. in Sublime: Project > Add Folder to Project.

  4. Wählen Sie den Themes-Ordner aus, den Sie während Schritt 3 auf Ihrem Computer gespeichert haben.

  5. Jetzt können Sie in den Dateien suchen. Sie können sogar wählen, nur in .php-Dateien zu suchen, die normalerweise der Dateityp für Theme-Dateien in WooCommerce sind.

Wenn Sie bereits die Anleitung zur Einrichtung der Suche befolgt haben und eine Seite in WooCommerce für die Suchergebnisse erstellt haben, aber Ihr Suchfeld nicht korrekt verlinkt ist, müssen Sie Folgendes tun.

1. Beginnen Sie damit, den Webshop in Ihrem Browser anzusehen. Wir empfehlen die Verwendung von Chrome.

2. Lokalisieren Sie alle HTML-Elemente, die anscheinend einzigartig für das Suchfeld sind. Zum Beispiel das Suchformular:

3. Suchen Sie dies in Sublime, um eine Liste von Dateien zu finden, in denen es sich befindet:

4. Finden Sie die passende Datei auf FTP.

5. Jetzt können Sie die erforderlichen Einstellungen ändern, damit Clerk.io auf die richtige Seite verlinkt. Die 3 Dinge, die Sie ändern müssen, sind:

  • Die URL, mit der der Kunde verlinkt ist, die oft im

    -Element zu finden ist, muss geändert werden, um mit dem Namen der Seite übereinzustimmen, die Sie in WooCommerce erstellt haben. Dies wird oft “soegeresultater” oder “search-results” sein.

  • Das “name”-Attribut des Eingabefelds, das “searchterm” sein muss.

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

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

7. Und sollte nach der Änderung so aussehen:

8. Jetzt sollten Sie beim Suchen mit der Suchseite verlinkt sein: www.mywebshop.com/soegeresultater?searchterm=test

Verwendung von Formatierern in Designs #

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

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

  • Über my.clerk.io > Settings > Formatters, wo jeder Formatierer als separater Eintrag erstellt wird.
  • Als Teil der Clerk.js-Konfiguration, mit dem Tracking-Skript, das auf allen Seiten hinzugefügt wird, sodass mehrere Formatierer gleichzeitig definiert werden können.

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

Ein Beispiel ist unten zu sehen:

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

Sie können beliebig viele Formatierer schreiben, die durch Kommas getrennt sind:

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

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

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

Dies ermöglicht es Ihnen effektiv, jede Funktionalität in Ihren Designs zu erstellen, die Sie benötigen.

Synchronisierung mit HTTP-Auth #

Oft wird die HTTP-Authentifizierung auf Staging-Seiten verwendet, um ungebetene Besucher zu vermeiden.

Dies blockiert auch den Clerk-Importer und zeigt einen 401 Unauthorized-Fehler im Synchronisierungsprotokoll an.

Sie können den Importer einfach überprüfen, indem Sie die Authentifizierungsinformationen in die Import-URL wie unten angegeben einfügen, in Data Sync bei my.clerk.io:

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

Häufige Synchronisierungsprobleme #

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

Beim Importieren von Daten mit Clerk.io’s WooCommerce Plugin ist der Server des Webshops dafür verantwortlich, die Produkt-, Kategorie- und Bestelldaten an Clerk.io zu senden.

In einigen Fällen könnte jedoch die Serverkonfiguration den Import daran hindern, Zugriff zu erhalten, was einen Fehler in Data Sync verursacht.

Unten finden Sie eine Liste der häufigsten Fehler und wie Sie sie beheben können.

401 Serverfehler: Nicht autorisiert #

Dieser Fehler tritt auf, wenn Ihr Webshop-/Entwicklungsumgebung HTTP-Authentifizierung benötigt, um darauf zuzugreifen.

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

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

403 Serverfehler: Verboten #

Dieser Fehler tritt auf, wenn Ihr Server den Importer daran hindert, darauf zuzugreifen. In den meisten Fällen müssen Sie einfach die IP-Adresse des Importers auf die Whitelist setzen, um ihm Zugriff zu gewähren.

Die neueste IP-Adresse finden Sie hier.

Stellen Sie außerdem sicher, dass der Öffentliche Schlüssel, der Private Schlüssel und die Import-URL korrekt für den Shop sind, in dem Sie bei my.clerk.io arbeiten.

Was ist, wenn ich die IP-Adresse bereits auf die Whitelist gesetzt habe, aber der gleiche Fehler weiterhin auftritt?

Wenn Sie die IP-Adresse des Importers auf die Whitelist gesetzt haben, der Fehler jedoch weiterhin besteht, empfehlen wir, Folgendes zu überprüfen:

  • Der Authentifizierungsteil des Körpers könnte aus der Anfrage des Servers des Shops entfernt worden sein.
  • Rate-Limit für den Server in Bezug auf Cloudflares.

404 Serverfehler: Nicht gefunden #

Dieser Fehler tritt auf, wenn der Importer nicht auf den Link zugreifen konnte, der uns Daten vom Webshop sendet. In den meisten Fällen geschieht dies, weil das Plugin entweder:

  • Überhaupt nicht installiert ist

  • Aufgrund eines Updates deaktiviert wurde

  • Ein Cache dazu führt, dass der Link nicht initialisiert wird

  • WooCommerce-Permalinks auf Beitragsname anstelle von Monat und Name eingestellt sind

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

  1. Stellen Sie sicher, dass Sie das Plugin korrekt installiert haben und dass es aktiviert ist. Wenn Sie das Plugin kürzlich automatisch aktualisiert haben, deaktiviert WooCommerce das Plugin manchmal. Wenn dies der Fall ist, gehen Sie einfach 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, gehen Sie in Ihr WooCommerce-Backend, dann Settings > Permalinks und ändern Sie die Allgemeinen Einstellungen auf Monat und Name und drücken Sie Änderungen speichern:

429 Serverfehler: Zu viele Anfragen #

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

Sie können dies beheben, indem Sie entweder:

  • Das Anforderungs-Limit für Ihren Server erhöhen.
  • Die Seitenanzahl auf einen höheren Wert in my.clerk.io > System Status > Data Sync setzen, wodurch der Importer weniger, größere Anfragen stellt.

Wenn Sie den Hosting-Anbieter Byte.nl verwenden, gibt der Importer normalerweise diesen Fehler zurück, weil deren Ratenbegrenzer aktiv ist. In diesem Fall kontaktieren Sie einfach den Support von Byte.nl und bitten Sie sie, den User-Agent des Importers “clerk” auf die Whitelist zu setzen.

500 Interner Serverfehler #

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

In diesen Fällen können Sie Ihr Serverprotokoll überprüfen, um zu identifizieren, welcher Prozess abgestürzt ist und warum. In den meisten Fällen liegt es einfach an einem Produkt mit einem ungültigen Attribut oder einer Funktion, die im Webshop falsch aufgerufen wird.

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

Wenn dies passiert, gehen Sie 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 Serverfehler: Dienst nicht verfügbar #

Dieser Fehler ist normalerweise vorübergehend 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, kann dies darauf hindeuten, dass der Server überlastet ist und sich seiner maximalen Kapazität nähert.

Um dies zu bestätigen, überprüfen Sie die Serverlast und bewerten Sie die aktuelle Nutzung.

520 Webserver gab einen unbekannten Fehler zurück #

Dieser Fehler wird normalerweise von CloudFlare zurückgegeben und tritt häufig aufgrund eines Engpasses in WooCommerce auf, der Probleme mit höheren Seitenzahlen verursacht.

Um dies zu beheben, setzen Sie einfach Ihre Seitenanzahl auf 50 in my.clerk.io > System Status > Data Sync und führen Sie eine neue Daten-Synchronisierung durch.

522 Serverfehler: Verbindung zeitüberschreitung #

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

  1. Warten Sie ein paar Minuten und versuchen Sie erneut zu synchronisieren, um zu sehen, ob der Server beschäftigt war.
  2. Wenn es immer noch nicht funktioniert, stellen Sie sicher, dass Sie die IP des Importers in Ihrer Serverkonfiguration auf die Whitelist gesetzt haben. Die neueste IP-Adresse finden Sie hier.

Ungültige Antwort von der WooCommerce API zurückgegeben #

Dieser Fehler tritt normalerweise auf, wenn WooCommerce’s Debugging aktiviert wurde. Dies ist niemals eine gute Idee, um es in einem Live-Setup aktiviert zu haben, da es Seiten verlangsamt und potenziell Fehlermeldungen im Frontend anzeigt.

Das Synchronisierungsproblem tritt auf, wenn WooCommerce auf einen Fehler stößt, während es die Produktdaten für den Import generiert.

Dies kann gelöst werden, indem Debugging in wp-config.php deaktiviert wird, indem define(WP_DEBUG’, false) gesetzt wird.

Diese Anleitung erklärt es detaillierter:

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

Und diese Anleitung erklärt eine alternative Lösung:

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

Fehler werden auch weiterhin protokolliert, selbst wenn der Debug-Modus nicht aktiviert ist, aber sie werden stattdessen in einer Datei protokolliert.

Upgrade auf Clerk.js 2 #

Clerk.js 2 ist eine schnellere und viel flexiblere Version unserer JavaScript-Bibliothek, die die Installation von Clerk.io auf jedem Webshop zum Kinderspiel macht.

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

Die beiden Hauptunterschiede in Clerk.js 2 sind:

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

  • Das Skript muss direkt vor dem -Tag in der Vorlage Ihres Webshops eingefügt werden.

Designs erstellen #

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

Sie können Ihre Clerk.js 2 Designs entweder durch Neugestaltung im Design-Editor erstellen oder indem Sie Ihren alten Code-Designs in Liquid konvertieren, was die folgende Anleitung erklärt. Unten finden Sie eine Beschreibung, wie Sie Ihre alten Code-Designs in Liquid konvertieren.

Option 1: Designs im Design-Editor #

  1. Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.
  2. Wählen Sie einen Design-Typ aus, der nicht Blank ist, und geben Sie ihm einen Namen. Wir empfehlen, “V2” hinzuzufügen, damit es offensichtlich ist, dass Sie Clerk.js 2-Designs verwenden.
  3. Klicken Sie im Design-Editor auf eines der vorhandenen Elemente wie den Namen, das Bild, die Schaltfläche usw., um es zu bearbeiten, oder fügen Sie neue Elemente zum Design hinzu.
  4. Klicken Sie auf Design veröffentlichen, wenn Sie fertig sind, und gehen Sie zu Schritt 2 in der Anleitung.
  5. Gehen Sie zuletzt zu Recommendations/Search > Content und ändern Sie Ihren Clerk.io-Inhalt, um Ihr neues Design zu verwenden, und klicken Sie dann auf Update Content.
  6. Dies wird vorübergehend dazu führen, dass sie nicht auf Ihrem Webshop angezeigt werden, bis Sie Clerk.js 2 wie weiter unten in dieser Anleitung beschrieben eingefügt haben.

Option 2: Designs konvertieren #

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

  1. Beginnen Sie damit, zu my.clerk.io >Recommendations/Search > Designs > New Design. zu gehen.
  2. Wählen Sie Blank > Code und geben Sie ihm einen Namen. Wir empfehlen, “V2” hinzuzufügen, damit es offensichtlich ist, dass Sie Clerk.js 2-Designs verwenden.
  3. Klicken Sie auf Design erstellen.
  4. Dies gibt Ihnen 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 Design bearbeiten für Ihr Clerk.js 1-Design. Wir empfehlen, dies in einem neuen Tab zu tun, damit Sie den Code leicht kopieren können.
  6. Jetzt müssen Sie das alte Clerk.js 1-Design in Ihr neues Clerk.js 2-Design kopieren.
    • Sie werden feststellen, dass es keinen Container-Code in Ihrem neuen gibt.
    • Dies liegt daran, dass Liquid for-Schleifen verwendet, um alle Produkte darzustellen.
    • Kopieren Sie Ihr altes Produkt-HTML innerhalb der for-Schleife, Ihren alten Container-Code darum herum und kopieren Sie auch das CSS.
  7. Konvertieren Sie das Design in die Liquid-Syntax. Der Hauptunterschied besteht darin, dass die alten Designs die Syntax {{ formatter attribute }} verwendeten, während die Syntax von v2 {{ product.attribute | formatter }} ist.
  8. Gehen Sie alle Ihre Attribute durch und ändern Sie sie in das neue Format.
  9. Wenn Sie {{#if}} oder {{#is}}-Anweisungen verwenden, müssen diese ebenfalls konvertiert werden. Verwenden 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 finden Sie ein Beispiel für ein Clerk.js 1-Design und die vollständig konvertierte Version:
Clerk.js 1 Design #
// Produkt-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>Preis {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Preis {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Preis {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Jetzt kaufen</div>
</li>

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

<!-- Dieser Code erstellt den Slider anhand seiner 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>Preis {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Preis {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Preis {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Jetzt kaufen</div>
        </a>
    </li>
    {% endfor %}
</ul>
  1. Klicken Sie jetzt auf Design aktualisieren, um die Änderungen zu speichern.
  2. Gehen Sie zuletzt zu Recommendations/Search > Content und ändern Sie Ihren Inhaltsblock, um Ihr neues Design zu verwenden.
  3. Klicken Sie auf Inhalt aktualisieren. Dies wird vorübergehend dazu führen, dass sie nicht auf Ihrem Webshop angezeigt werden, bis Sie mit Schritt 2 fertig sind. Wählen Sie das neue Design für alle Inhalte aus, die aktualisiert werden sollen.
  4. Schließlich aktualisieren Sie das Plugin, indem Sie dieser Anleitung folgen.

Mehrsprachigkeit #

Bei der Verwendung von WPML in WooCommerce sollten Sie in der Lage sein, Ihre Sprachen über die URL zu unterscheiden, wie folgt:

Wenn Sie solche einzigartigen URLs haben, können Sie das WooCommerce-Plugin erweitern, um WPML zu unterstützen.

Es ist auch in Ordnung, die Sprache über den lang-Parameter zu definieren. Z.B.

Shop kopieren #

Der einfachste Weg, Clerk.io in mehreren Domains in Standard-Setups zu implementieren, besteht darin, für jede Domain einen separaten Shop in my.clerk.io. zu erstellen. Auf diese Weise können Sie Produkte, Verkäufe, Währungen usw. trennen, um jeden Domain im Auge zu behalten.

Nachdem Sie mit der Ersteinrichtung fertig sind, klicken Sie auf die obere linke Ecke des Seitenmenüs und klicken Sie dann auf "+ Neuen Shop hinzufügen", die letzte Option in der Dropdown-Liste (normalerweise unter Ihren bestehenden Shops und Ihrem Firmennamen).

Auf der Neuen Shop hinzufügen-Seite füllen Sie die Details Ihres Webshops aus und wählen Sie Ihren Hauptshop aus dem Dropdown-Menü Inhalt von bestehendem Shop kopieren, und klicken Sie dann auf Shop hinzufügen:

Dies wird den Inhalt und die Designs von Ihrem Hauptshop übernehmen. Denken Sie daran, auch die Überschriften in die richtige Sprache zu übersetzen.

Installieren und Konfigurieren #

Offizielle Unterstützung für WPML wurde zur Clerk.io WooCommerce-Erweiterung hinzugefügt, was bedeutet, dass solange Sie diese Version oder eine neuere verwenden, WPML unterstützt werden sollte.

Im Einstellungsbereich für WooCommerce sehen Sie die Einstellungen wie gewohnt. Wenn WPML aktiv und auf Ihrer WordPress-Website konfiguriert ist, sehen Sie Mehrsprachiger Umfang mit der aktuellen Sprache ganz oben auf der Einstellungsseite.

Um die Sprache zu wechseln, verwenden Sie einfach den Selector im oberen Bereich. Wählen Sie die Sprache aus, für die Sie Clerk konfigurieren möchten, und geben Sie Ihre gewünschten Einstellungen an. Wiederholen Sie dies für jede Sprache.

Beachten Sie, dass die Auswahl von Alle Sprachen aus diesem Dropdown nicht empfohlen wird, wenn Sie Ihre Konfiguration speichern, da dies Ihre Einstellungen nur als Fallback speichert.

Synchronisieren Sie Ihre Domains #

Sobald Sie das Plugin erweitert haben, können Sie jetzt jeden Ihrer Shops mit ihrer Sprachdomain synchronisieren.

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

Wenn die Synchronisierung abgeschlossen ist, ist Ihre Domain bereit und verwendet dasselbe Setup wie Ihr Hauptshop.

Einfügen mit Shortcodes #

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 syntaktisch ist als in einem normalen HTML-Block.

Wenn Sie Hooks verwenden, können Sie zu Appearance -> Custom Layouts -> Insert gehen und den Shortcode an dem Hook einfügen, der zu Clerk gehört (falls ein Entwickler dies erstellen kann, 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>

Durch:

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

Versuchen Sie zuerst nur mit einfachen Klammern, und wenn das nicht funktioniert, mit doppelten Klammern:

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

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

Manuelle Code-Einfügung #

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

WP Baker Builder #

Theme-Datei-Integration: Hinzufügen eines Produktseiten-Sliders zu allen Seiten

  1. Navigieren Sie zu Appearance > Theme File Editor > WooCommerce > content-single-product.php (oder einer ähnlichen Datei, in der Ihr Layout der Produktseite definiert ist).
  2. Fügen Sie den Span-Code an der gewünschten Stelle innerhalb der Datei ein, um den Slider anzuzeigen. Dieser Prozess ist ähnlich wie Änderungen über FTP-Zugriff vorzunehmen.
<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>

Empfehlungen mit visuellen Hooks hinzufügen #

Innerhalb von WooCommerce werden bestimmte Webseiten mithilfe von Visuellen Hooks erstellt, anstatt aus einer HTML-Datei gerendert zu werden. Um Inhalte zu Seiten hinzuzufügen, die über Visuelle Hooks erstellt wurden, müssen Sie den Clerk.io-Inhalt in die aktive functions.php-Datei des Webshops einfügen.

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

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

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

// CLERK HINZUFÜGEN PRODUKTSEITEN-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, um einen Empfehlungs-Slider zur Warenkorbseite hinzuzufügen:

// CLERK HINZUFÜGEN WARENKORB-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 Empfehlungsslider zu den obigen Seiten hinzuzufügen, denken Sie daran, den Code innerhalb der -Tags mit dem Embed-Code zu ersetzen, der in Ihrem Empfehlungsinhalt in my.clerk.io bereitgestellt wird, wie unten:

Der Wert, der in add_action() gesetzt ist, 5 in diesem Beispiel, gibt WooCommerce die Priorität des hinzugefügten Inhalts an, was wiederum beeinflusst, wie früh der Inhalt in diesem Visuellen Hook angezeigt wird. Hinweis: Bei der Festlegung der Priorität akzeptiert WooCommerce nur Vielfache von 5.

Weitere Informationen zu WooCommerce-Webseiten, die visuelle Hooks verwenden:

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

Powerstep-Probleme #

Powerstep wird doppelt gerendert #

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

  1. Gehen Sie im WooCommerce-Backend zur Powerstep-Seite, die Sie in Seiten erstellt haben.
  2. Wählen Sie Shortcodes in der oberen rechten Ecke und klicken Sie dann auf Row / Columns.
  3. Klicken Sie dann auf “OK” im Popup, das erscheint.
  4. Verschieben Sie schließlich [clerk-powerstep] innerhalb der [row] [col] und [/row] [/col]-Tags und klicken Sie auf Speichern.

Powerstep wird nicht gerendert #

Wenn der Powerstep immer noch nicht angezeigt wird, müssen Sie möglicherweise die Einstellung zur Warenkorb-Weiterleitung von WooCommerce deaktivieren.

Befolgen Sie dazu diese Schritte:

  1. Gehen Sie zu WooCommerce > Einstellungen > Produkte und finden Sie Add to cart behaviour.
  2. Stellen Sie sicher, dass beide Kästchen nicht angekreuzt sind.
  3. Klicken Sie auf Änderungen speichern am Ende der Seite.

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