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 sobre qué Recomendaciones utilizar, lee este artículo.

Crear Diseño #

Las Recomendaciones se muestran como un slider por defecto. Esto permite a los clientes ver más productos con menos clics. Puedes utilizar 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 Slider de Productos
  3. De la lista de plantillas de diseño, elige la que deseas utilizar.
  4. Dale un nombre y haz clic en Crear diseño.
  5. Realiza los cambios 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 > Vacío > 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, consulta la plantilla de Slider más abajo.

Crear Contenido #

Esto contiene todos los ajustes utilizados para mostrar el slider 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. Recomendamos nombrarlo según la página y la lógica que deseas utilizar. Ej. “Página de Inicio / Recomendaciones para Visitantes”.
  4. En Tipo de contenido, selecciona la lógica de producto que deseas utilizar 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 te gustaría activar.
  4. Marca la casilla etiquetada Habilitado.
  5. Asegúrate de que el campo Contenido contenga el nombre de tu Contenido de Recomendación (excluyendo “@”). Se enumera dentro del código de embebido de Contenido como el nombre de tu plantilla de datos, ej. 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 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 utilizando 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 utilizar 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 del 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 gran campo de texto, escribe [clerk-powerstep], y haz clic en Publicar.
  6. Ve a Clerk > Configuraciones de Clerk en el menú lateral y encuentra Configuraciones de Powerstep.
  7. Inserta en el campo Contenido los IDs de los bloques de Contenido que creaste, separados por comas. El ID se enumera dentro del código de embebido de Contenido como el nombre de tu plantilla de datos, ej. 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 Configuraciones.

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 salir de tu tienda en línea. Muestra productos interesantes, convirtiendo potencialmente a un visitante que se va 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 Configuraciones de Intención de Salida.

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

  5. Haz clic en Guardar Configuraciones 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. Estiliza 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 de 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 utilizar diseños de código, esta plantilla puede ayudarte a comenzar. Renderizará un slider 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">Agregar 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.