Woocommerce

Recommendations

Automatiza y personaliza productos en cualquier página de WooCommerce.
Recommendations WooCommerce

Clerk.io ofrece más de 23 tipos diferentes de lógicas de productos, lo que hace posible mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar con Recommendations utilizando el plugin de WooCommerce.

Para conocer todas nuestras mejores prácticas sobre qué Recommendations utilizar, lee este artículo.

Configuración del slider #

Recommendations se crean con Elements que hacen referencia a un Design. A continuación, encontrarás la guía básica para configurar un Element.

Seguir los pasos en my.clerk.io > Settings > Setup Guides creará automáticamente los Elements para nuestras mejores prácticas.

Crear Design #

Por defecto, Recommendations se muestran como un slider. Esto permite a los clientes ver más productos con menos clics. Puedes usar el Design Editor para configurarlo visualmente, o usar code designs.

Un design puede ser reutilizado para cualquier número de elements de Recommendations que crees.

Design Editor #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Elige Product Slider
  3. De la lista de plantillas de diseño, elige la que deseas usar como inicio.
  4. Ponle un nombre y haz clic en Create design.
  5. Realiza los cambios que desees en el diseño.

Code Design #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Elige Other designs > Blank > Code.
  3. Ponle un nombre y haz clic en Create design.
  4. Crea un code design desde cero usando Liquid code.

Si quieres un design de inicio, consulta la plantilla de Slider más abajo.

Crear contenido #

Esto contiene todos los ajustes usados para mostrar las Recommendations y hacerlas embebibles en tu web. Sigue estos pasos para cada banner de Recommendations que desees crear.

  1. Ve a Recommendations > Elements.
  2. Haz clic en New Content.
  3. Ponle un nombre descriptivo. Recomendamos nombrarlo basándose en la página y la lógica que deseas usar. Ejemplo: “Home Page / Visitor Recommendations”.
  4. En Content type, selecciona la lógica de producto que deseas usar del menú desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.
  5. En Design selecciona el design que creaste del desplegable y elige el número de productos que mostrar.
  6. Haz clic en Save en la parte superior de la pantalla.

Añadir a la web #

Para añadir Clerk Recommendations en tu web, tienes tres opciones diferentes: Injection, Embedded code y a través del Plugin.

  1. Abre la pestaña Insert into website.
  2. Aquí tienes dos opciones:
    • Usar injection te permite insertar el código usando un selector CSS.
    • Usar embedded code te permite insertar el código manualmente en tu sitio web.
  3. Elige la opción que te sea más fácil de usar.
  4. Para algunas lógicas verás el desplegable Choose your platform. Selecciona WooCommerce en esos casos. Esto rellenará automáticamente el embedcode con los shortcodes correctos de WooCommerce.

Configuración del plugin #

Esta opción está disponible para páginas de categoría, carrito, producto, Exit Intent y Powerstep.

  1. Ve al backend de WooCommerce.
  2. Selecciona Clerk en el menú lateral izquierdo.
  3. Busca la configuración de Element que quieras activar.
  4. Haz clic en el checkbox marcado Enabled.
  5. Asegúrate de que el campo Content contiene el nombre de tu Recommendation Element (excluyendo “@”). Se muestra dentro del embed code del Element como tu data template name, por ejemplo, data-template=@product-page-alternatives.

Configuración en my.clerk.io #

  1. Ve a Recommendations > Elements.
  2. Selecciona el contenido elegido.
  3. Abre la pestaña Insert into website.
  4. Aquí tienes dos opciones:
    • Usar injection te permite insertar el código usando un selector CSS.
    • Usar embedded code te permite insertar el código manualmente en tu web.
  5. Elige la opción que te sea más fácil de usar.
  6. En el caso de embedded code, añade cualquier lógica frontend necesaria para insertar, por ejemplo, un ID de producto o categoría. Esto dependerá de la lógica que elijas.

Aquí tienes un ejemplo completo de embed code para Recommendations, con un ID de producto de ejemplo:

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

Páginas #

A continuación están las páginas específicas donde deberías insertar Recommendations y qué tipos deberías usar para seguir nuestras mejores prácticas.

Página de inicio #

  1. En my.clerk.io, crea 3 Elements con las siguientes lógicas:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserta los embedcodes en la plantilla/bloque de tu página de inicio.

Si quieres mostrar todos los banners uno encima del otro, inserta todos los embedcodes en el mismo lugar. Si prefieres dividirlos por la Home Page, simplemente sigue el proceso anterior varias veces.

Página de categoría #

  1. En my.clerk.io, crea un Element con la lógica Bestsellers In Category.
  2. En el desplegable Insert into website > Choose your platform, selecciona WooCommerce y copia el embedcode.
  3. Inserta el embedcode en la plantilla de tu página de categoría o usa los ajustes del plugin para activarlo.

Página de producto #

  1. En my.clerk.io, crea 2 Elements con las siguientes lógicas:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. En el desplegable Insert into website > Choose your platform selecciona WooCommerce para cada uno y copia los embedcodes.
  3. Inserta los embedcodes en la plantilla de tu página de producto o utiliza los ajustes del plugin para activarlos.

Paso añadir al carrito #

  1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
  2. Ponle el nombre “Add-To-Basket / Others Also Bought”. Esto es importante para que el embedcode funcione correctamente.
  3. Haz clic en Save en la parte superior de la página.
  4. En el backend de WooCommerce, en el menú lateral izquierdo, ve a Pages.
  5. En la parte superior de la página, haz clic en Add New.
  6. Ponle un nombre significativo a la página powerstep, como “¡Producto añadido a la cesta!”, ya que este será el título de tu powerstep.
  7. En el campo de texto grande, escribe [clerk-powerstep] y haz clic en Publish.
  8. Ve a Clerk > Clerk Settings en el menú lateral y busca Powerstep Settings.
  9. Inserta en el campo Content los IDs de los Elements que creaste, separados por comas. El ID se muestra en el embed code del Element como tu data template name, por ejemplo, data-template=@power-step-others-also-bought.
  10. Selecciona el nombre de la página que creaste en Powerstep Page y marca Enabled.
  11. Haz clic en Save Settings.

Si tienes algún problema relacionado con powerstep, consulta esta guía.

Carrito de compras #

  1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
  2. En el desplegable Insert into website > Choose your platform selecciona WooCommerce y copia el embedcode.
  3. Inserta el embedcode en la plantilla de tu página de carrito o usa los ajustes del plugin para activarlo.

Exit Intent #

  1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
  2. Puedes activarlo mediante el plugin o manualmente. A continuación se muestran los pasos para ambas opciones.

Configuración del plugin #

Para configurar Exit Intent mediante el plugin, sigue estos 5 pasos:

  1. Crea un nuevo Content en my.clerk.io y ponle el nombre Exit Intent.

  2. Elige una lógica para él — Sugerimos “Visitor Recommendations”.

  3. En el backend de WooCommerce, ve a Clerk en el menú lateral y busca Exit-Intent Settings.

  4. Marca Enabled y asegúrate de que el campo Template contenga “exit-intent”.

  5. Haz clic en Save Settings para activarlo.

Configuración manual #

Si deseas configurar Exit-Intent manualmente, sigue estos pasos:

  1. Crea un nuevo Content en my.clerk.io y ponle el nombre Exit Intent.

  2. Estiliza tu Element en Designs en my.clerk.io

  3. Elige una lógica para él — Sugerimos “Visitor Recommendations”.

  4. Desde Insert Into Website, copia el embed code proporcionado a este archivo de WooCommerce, justo encima del tracking-script de Clerk.io: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Añade data-exit-intent="true" al embed code que acabas de colocar en class-clerk-visitor-tracking.php. Así:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'YOUR_STORE_PUBLIC_KEY'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Nota: Todas las recommendations que contengan data-exit-intent="true" activarán el pop-up de exit intent.

Plantillas de inicio #

Si deseas utilizar code designs, estas plantillas pueden ayudarte a empezar.

Código de slider #

Esta plantilla renderizará un slider estándar con diversa información de producto, que puedes adaptar a tus necesidades.

HTML #

<div class="clerk-recommendations">
    <h2 class="section-title" style="text-align:center; text-transform: uppercase;"><span>{{ headline }}</span></h2>

    <div class="clerk-slider">
         {% for product in products %}
            <div class="clerk-slider-item">
                <div class="clerk-slider-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-slider-badge">On Sale</div>
                        {% endif %}
                        <div class="clerk-slider-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-slider-brand">{{ product.brand }}</div>
                        <div class="clerk-slider-name">{{ product.name }}</div>
                        
                        <div class="clerk-slider-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-slider-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-slider-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 0 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button-not-in-stock">Out of Stock</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

CSS #

.clerk-recommendations {
    margin: 1em 0;
}

.clerk-recommendations-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-slider-item {
    margin: auto;
}

.clerk-slider-product {
    position: relative;
    overflow: hidden;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-slider-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-slider-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-slider-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-slider-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-slider-brand {
    font-size: 0.9em;
    color: #757575;
}

.clerk-slider-name {
    height: 3em;
    overflow: hidden;
    color: #4a3b40;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 1em;
}

.clerk-slider-pricing {
    display: flex;

    margin-bottom: 1em;
}

.clerk-slider-price {
    flex: 1;
    color: #757575;
    font-weight: bold;
}

.clerk-slider-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-add-to-cart, .clerk-add-to-cart:hover {
    color: white;
}

.clerk-not-in-stock, .clerk-not-in-stock:hover {
    color: #4a3b40;
}

.clerk-slider-button-not-in-stock {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: white;
    color: #4a3b40;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}

.clerk-slider-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}


.clerk-load-more-button {
    display: block;
    
    width: 20em;

    margin: 1em auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: 1.2em;

    cursor: pointer;
}

@media screen and (min-width: 1100px){
    .clerk-slider-item {
        width: 20%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1100px){
    .clerk-slider-item {
        width: 25%;
    }
}

@media screen and (min-width: 414px) and (max-width: 900px) {
    .clerk-slider-item {
        width: 50%;
    }
    .clerk-slider-button, .clerk-slider-button-not-in-stock {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 413px) {
    .clerk-slider-item {
        width: 100%;
    }
}

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.