Woocommerce

Recommendations

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

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

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

Configuración del Slider #

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

Al seguir los pasos en my.clerk.io > Settings > Setup Guides se crearán automáticamente los Elements para nuestras Mejores Prácticas.

Crear Design #

Las Recommendations se muestran como un slider por defecto. Esto permite a los clientes ver más productos con menos clics. Puedes usar el Design Editor para configurarlo visualmente, o usar diseños de código.

Un design se puede reutilizar en cualquier cantidad de elementos de Recommendations que crees.

Design Editor #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Elige Product Slider
  3. En la lista de plantillas de diseño, selecciona la que quieras usar como punto de partida.
  4. Asigna un nombre y haz clic en Create design.
  5. Realiza los cambios que desees en el design.

Code Design #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Elige Other designs > Blank > Code.
  3. Asigna un nombre y haz clic en Create design.
  4. Crea un diseño de código desde cero usando código Liquid.

Si quieres un diseño inicial, revisa la plantilla Slider más abajo.

Crear Element #

Esto contiene todos los ajustes usados para mostrar las Recommendations y hacerlo embebible en tu sitio web. Sigue estos pasos por cada banner de Recommendations que quieras crear.

  1. Ve a Recommendations > Elements.
  2. Haz clic en New Element.
  3. Asigna un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que quieres usar. Por ejemplo, “Home Page / Visitor Recommendations”.
  4. En Element type, selecciona la lógica de producto que quieras usar del menú desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.
  5. En Design selecciona el diseño que creaste del menú desplegable y elige el número de productos a mostrar.
  6. Haz clic en Save en la parte superior de la pantalla.

Agregar al sitio web #

Para agregar Clerk Recommendations en tu sitio 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 permite insertar el código usando un selector CSS.
    • Usar embedded code permite insertar el código manualmente en tu sitio web.
  3. Elige la opción que sea más fácil para ti.
  4. Para algunas Lógicas verás el menú desplegable Choose your platform. Selecciona WooCommerce en estos 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 del Element que deseas activar.
  4. Haz clic en la casilla etiquetada como Enabled.
  5. Asegúrate de que el campo Element contenga el nombre de tu Recommendation Element (excluyendo “@”). Aparece en el código embed 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 permite insertar el código usando un selector CSS.
    • Usar embedded code permite insertar el código manualmente en tu sitio web.
  5. Elige la opción que sea más fácil para ti.
  6. Para código embebido, agrega cualquier lógica frontend necesaria para insertar, por ejemplo, un ID de producto o categoría. Esto depende de la lógica que elijas.

Aquí tienes un ejemplo completo de embedcode de Recommendations, con un ID de producto de muestra:

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

Páginas #

A continuación se detallan las páginas específicas donde deberías insertar Recommendations y qué tipos deberías usar para seguir nuestras Mejores Prácticas.

Homepage #

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

Si quieres mostrar todos los banners uno encima de otro, inserta todos los embedcodes en el mismo lugar. Si prefieres distribuirlos en la Home Page, realiza el proceso anterior varias veces.

Category Page #

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

Product Page #

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

Add-To-Basket Step #

  1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
  2. Asígnale 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. Asigna un nombre significativo a la página powerstep, como “¡Producto añadido al carrito!”, ya que se mostrará como título en 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 Element los IDs de los Elements que creaste, separados por comas. El ID aparece dentro del embed code del Element como data template name, por ejemplo, data-template=@power-step-others-also-bought.
  10. Selecciona el nombre de la página que creaste bajo Powerstep Page y marca Enabled.
  11. Haz clic en Save Settings.

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

Cart Page #

  1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
  2. En el menú 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 utiliza los ajustes del plugin para habilitarlo.

Exit Intent #

  1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
  2. Puedes activarlo a través del 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 Element en my.clerk.io y asígnale el nombre Exit Intent.

  2. Escoge una lógica para el mismo – 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 Element en my.clerk.io y asígnale el nombre Exit Intent.

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

  3. Elige una lógica para este – Te sugerimos “Visitor Recommendations”.

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

  5. Agrega 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 recomendaciones que contengan data-exit-intent="true" activarán el pop up de exit intent.

Plantillas de inicio #

Si quieres usar diseños en código, estas plantillas pueden servirte de punto de partida.

Código de Slider #

Esta plantilla mostrará un slider estándar con distinta información de producto, que puedes modificar según 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.