Woocommerce

Recommendations

Automatiza y personaliza productos en cualquier página de WooCommerce.
Recomendaciones 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 Recomendaciones utilizando el plugin de WooCommerce.

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

Crear Diseño #

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

Un diseño puede reutilizarse para cualquier número de Contenido de Recomendaciones que crees.

Editor de Diseño #

  1. Ve a Recomendaciones > Diseños y haz clic en Nuevo Diseño.
  2. Elige Carrusel de Productos
  3. De la lista de plantillas de diseño, elige la que deseas usar como base.
  4. Dale un nombre y haz clic en Crear diseño.
  5. Realiza cualquier cambio que desees en el diseño.

Diseño de Código #

  1. Ve a Recomendaciones > Diseños y haz clic en Nuevo Diseño.
  2. Elige Otros diseños > En blanco > Código.
  3. Dale un nombre y haz clic en Crear diseño.
  4. Crea un diseño de código desde cero utilizando código Liquid.

Si deseas un diseño inicial, revisa la plantilla de Carrusel más abajo.

Crear Contenido #

Esto contiene todas las configuraciones utilizadas para mostrar el carrusel de Recomendaciones y hacerlo embebible en tu sitio web. Sigue estos pasos para cada banner de Recomendaciones que desees crear.

  1. Ve a Recomendaciones > Contenido.
  2. Haz clic en Nuevo Contenido.
  3. Dale un nombre descriptivo. Te recomendamos nombrarlo según la página y la lógica que deseas usar. Ejemplo: “Página de Inicio / Recomendaciones para Visitantes”.
  4. En Tipo de contenido, selecciona la lógica de producto que deseas usar del menú desplegable. Puedes ver un resumen de todas las lógicas de productos aquí.
  5. En Diseño selecciona el diseño que creaste del menú desplegable y elige el número de productos que deseas mostrar.
  6. Haz clic en Guardar en la parte superior de la pantalla.

Agregar al Sitio Web #

Para agregar Recomendaciones de Clerk en tu sitio web, tienes tres opciones diferentes: Inyección, Código embebido, y a través del Plugin.

Configuración del Plugin #

Esta opción está disponible para páginas de Categoría, Carrito, Producto, Intención de Salida y Powerstep.

  1. Ve al backend de WooCommerce.
  2. Selecciona Clerk en el menú lateral izquierdo.
  3. Encuentra la configuración de Contenido que deseas activar.
  4. Marca la casilla etiquetada como Habilitado.
  5. Asegúrate de que el campo Contenido contenga el nombre de tu Contenido de Recomendación (excluyendo “@”). Se lista dentro del código de embebido de Contenido como el nombre de tu plantilla de datos, por ejemplo, data-template=@product-page-alternatives.

Aquí tienes un ejemplo completo de código de embebido de Recomendaciones, con un ID de producto de muestra:

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

Configuración de My.Clerk #

  1. Ve a Recomendaciones > Contenido.
  2. Selecciona el contenido elegido.
  3. Abre la pestaña Insertar en el sitio web.
  4. Aquí tienes dos opciones:
    • Usar inyección te permite insertar el código usando un selector CSS.
    • Usar código embebido te permite insertar el código en tu sitio web manualmente.
  5. Elige la opción que te resulte más fácil de usar.
  6. Para el código embebido, agrega cualquier lógica de frontend necesaria para insertar, por ejemplo, un ID de producto o categoría. Esto depende de la lógica que elijas.

Powerstep #

Para activar el añadir al carrito Powerstep, sigue estos pasos:

  1. Si aún no lo has hecho, crea el Contenido que deseas usar en tu Powerstep de Añadir al Carrito.
  2. En el backend de WooCommerce, en el menú lateral izquierdo, ve a Páginas.
  3. En la parte superior de la página, haz clic en Agregar Nuevo.
  4. Dale a la página de powerstep un nombre significativo, como “¡Producto añadido al carrito!”, ya que esto se mostrará como el título en tu powerstep.
  5. En el campo de texto grande, escribe [clerk-powerstep], y haz clic en Publicar.
  6. Ve a Clerk > Configuración de Clerk en el menú lateral y encuentra Configuración de Powerstep.
  7. Inserta en el campo Contenido los IDs de los bloques de Contenido que creaste, separados por comas. El ID se lista dentro del código de embebido de Contenido como el nombre de tu plantilla de datos, por ejemplo, data-template=@power-step-others-also-bought.
  8. Selecciona el nombre de la página que creaste bajo Página de Powerstep y marca Habilitado.
  9. Haz clic en Guardar Configuración.

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

Intención de Salida #

El popup de Intención de Salida reacciona cuando un visitante intenta abandonar tu tienda en línea. Muestra productos interesantes, convirtiendo potencialmente a un visitante saliente en un cliente comprador.

Puedes activarlo a través del plugin o manualmente. A continuación se presentan los pasos para ambas opciones.

Configuración del Plugin #

Para configurar la Intención de Salida a través del plugin, sigue estos 5 pasos:

  1. Crea un nuevo Contenido en my.clerk.io y nómbralo Intención de Salida.

  2. Elige una lógica para ello - Sugerimos “Recomendaciones para Visitantes”.

  3. En el backend de WooCommerce, ve a Clerk en el menú lateral y encuentra Configuración de Intención de Salida.

  4. Marca Habilitado, y asegúrate de que el campo Plantilla contenga “exit-intent”.

  5. Haz clic en Guardar Configuración para activarlo.

Configuración de Clerk #

Si deseas configurar manualmente la Intención de Salida, sigue estos pasos:

  1. Crea un nuevo Contenido en my.clerk.io y nómbralo Intención de Salida.

  2. Estila tu Contenido en Diseños en my.clerk.io

  3. Elige una lógica para ello - Sugerimos “Recomendaciones para Visitantes”.

  4. Desde Insertar en el sitio web, copia el código de embebido proporcionado a este archivo de WooCommerce, justo encima del script de seguimiento de Clerk.io: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Agrega data-exit-intent="true" al código embebido que acabas de colocar en class-clerk-visitor-tracking.php. Así:

<!-- Inicio de la herramienta de personalización de comercio electrónico de Clerk.io - 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>
<!-- Fin de la herramienta de personalización de comercio electrónico de Clerk.io - www.clerk.io -->

Nota: Todas las recomendaciones que contengan data-exit-intent="true" activarán el popup de intención de salida.

Plantilla Inicial #

Si deseas usar diseños de código, esta plantilla puede ayudarte a comenzar. Renderizará un carrusel estándar con varias informaciones de productos, 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">En Oferta</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">Agotado</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">Añadir al Carrito</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.