Hinzufügen benutzerdefinierter Elemente in WooCommerce mit Visual Hooks

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

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

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

Um zum Beispiel einen Recommendations-Slider mit dem Inhalt @product-page-alternatives zu Ihrer Produktseite hinzuzufügen, würden Sie den folgenden Code innerhalb des 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>";
}

Und ein weiteres Beispiel für das Hinzufügen eines Schiebereglers für Empfehlungen auf der Seite “In den Warenkorb”:

// CLERK ADD CART SLIDER
add_action ( 'woocommerce_after_cart_contents', 'clerk_cart_slider',5);

function clerk_cart_slider() {
 $clerk_id = get_queried_object()->term_id;
 echo "<span class="clerk"
data-template="@cart-others-also-bought"
data-products="[<?php $items = WC()->cart->get_cart(); foreach( $items as $cart_item ){ $product_id = $cart_item['product_id']; echo $product_id; if ($cart_item != end($items)) {echo ",";} } ?>]"></span>";
}

Um Ihre eigenen Empfehlungs-Slider zu den oben genannten Seiten hinzuzufügen, müssen Sie den Code innerhalb der -Tags durch den Einbettungscode ersetzen, der in Ihrem Empfehlungsinhalt auf my.clerk.io bereitgestellt wird, wie unten dargestellt:

Der in add_action() festgelegte Wert, in diesem Beispiel 5, teilt WooCommerce die Priorität des hinzugefügten Inhalts mit, die wiederum beeinflusst, wie früh der Inhalt in diesem Visual Hook angezeigt wird. Hinweis: Bei der Festlegung der Priorität akzeptiert WooCommerce nur Vielfache von 5.

Weitere Informationen über WooCommerce-Webseiten, die Visual Hooks verwenden:

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