Añadir elementos personalizados en WooCommerce usando Visual Hooks

Dentro de WooCommerce, ciertas páginas web se crean utilizando Visual Hooks en lugar de ser renderizadas desde un archivo HTML. Para añadir contenido a las páginas creadas mediante Visual Hooks, deberá insertar el contenido de Clerk.io en el archivo functions.php activo de la tienda web.

El archivo functions.php se encuentra normalmente en la siguiente ruta:

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

Por ejemplo, para añadir un control deslizante de recomendaciones con el contenido @product-page-alternatives a su página de productos, deberá incluir el siguiente código dentro de las etiquetas principales <php? ?> en 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>";
}

Y, otro ejemplo para añadir un slider de Recomendaciones a la Página de Añadir al Carrito:

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

Para añadir sus propios deslizadores de Recomendaciones a las páginas anteriores, recuerde sustituir el código dentro de las etiquetas por el código de incrustación proporcionado en su Contenido de Recomendaciones en my.clerk.io, como se muestra a continuación:

El valor establecido en add_action(), 5 en este ejemplo, indica a WooCommerce la prioridad del Contenido que se está añadiendo, que a su vez influye en la antelación con la que se mostrará el Contenido en ese Gancho Visual. Nota: Al establecer la prioridad, WooCommerce sólo acepta múltiplos de 5.

Más información sobre páginas web de WooCommerce que usan Visual Hooks:

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