Woocommerce

Preguntas frecuentes

Soluciones a preguntas e incidencias comunes al utilizar Clerk con WooCommerce

¿Tienes problemas con tu integración de WooCommerce? Este FAQ cubre los problemas más comunes y sus soluciones, desde errores de sincronización de datos hasta la instalación manual de elementos.

Instalación manual de elementos #

Los temas de WooCommerce a menudo colocan los hooks en posiciones no estándar.

Esto significa que el plugin de Clerk puede no ser capaz de insertar automáticamente los códigos de incrustación.

Sigue estos pasos para insertar manualmente los códigos si es necesario.

Localizar formulario de búsqueda #

Comienza localizando tu formulario de búsqueda.

Inspecciona tu sitio web y encuentra texto único para el campo de búsqueda.

Accede a los archivos del tema #

Abre los archivos FTP de tu tienda y localiza public_html > wp-content > themes.

Arrastra la carpeta themes a tu escritorio para copiarla en tu ordenador.

Esto te permite buscar entre los archivos.

Abrir en el editor #

En tu editor de código preferido, abre la carpeta.

Por ejemplo, en Sublime: Project > Add Folder to Project.

Elige la carpeta themes que guardaste durante el paso anterior.

Buscar archivos #

Ahora puedes buscar entre los archivos.

Puedes optar por buscar solo en archivos .php, que es el tipo de archivo estándar para los temas de WooCommerce.

Corregir enlaces de búsqueda #

Si ya has configurado Search y has creado una página en WooCommerce para los resultados, pero tu campo de búsqueda no enlaza correctamente, sigue estos pasos.

Empieza visualizando tu tienda en el navegador. Recomendamos usar Chrome.

Localiza cualquier HTML que sea único del campo de búsqueda, por ejemplo searchform:

Busca esto en tu editor para encontrar una lista de los archivos que lo contienen:

Encuentra el archivo correspondiente en FTP.

Actualizar configuración del formulario #

Ahora puedes cambiar la configuración para que Clerk enlace a la página correcta.

Debes cambiar tres cosas:

La URL a la que se enlaza a los clientes, que suele encontrarse en el elemento <form>, debe coincidir con el nombre de la página que creaste en WooCommerce. A menudo será "soegeresultater" o "search-results".
El atributo "name" del campo de entrada debe ser searchterm.
El campo oculto con name="post_type" debe estar comentado.

Un formulario de búsqueda puede verse así antes de cambiarlo:

Y debe verse así después del cambio:

Ahora deberías ser dirigido a la página de búsqueda al buscar: www.mywebshop.com/soegeresultater?searchterm=test.

Uso de formatters #

Clerk.js te permite escribir funciones personalizadas de JavaScript que añaden nuevas funcionalidades a tus Designs.

Los formatters pueden añadirse de dos formas:

Vía my.clerk.io > Developers > Formatters, donde cada formatter se crea como una entrada separada.
Como parte de la configuración de Clerk.js, con el tracking-script añadido en todas las páginas, lo que permite definir varios formatters a la vez.

En WooCommerce, el tracking script se encuentra en: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php.

Ejemplo de formatter #

Se puede ver un ejemplo a continuación:

Clerk('config', {
  key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
  formatters: {
    log_price: function(price) {
      console.log(price);
    }
  }
});

Varios formatters #

Puedes escribir cualquier cantidad de Formatters, separados por coma:

formatters: {
  log_price: function(price) {
    console.log(price);
  },
  calculate_discount: function(price, special_price) {
    return price - special_price;
  },
  substring: function(text) {
    var short_string = text.substring(0, 20);
    return short_string;
  }
}

Uso en designs #

Tras crear tus Formatters, puedes usarlos en tus Designs usando esta sintaxis:

{%raw%}{{ price | log_price }} {{ price | calculate_discount | special_price }}{%endraw%}

Esto te permite crear cualquier funcionalidad que necesites en tus Designs.

Autenticación HTTP #

La autenticación HTTP suele usarse en sitios de staging para evitar visitantes no deseados.

Esto bloqueará el importador de Clerk y mostrará un error 401 Unauthorized en el registro de sincronización.

Puedes solucionarlo insertando la información de autenticación en la URL de importación.

En my.clerk.io > Data > Configuration, actualiza tu URL de importación así:

https://USER:PASS@www.ewoksRus.com

Errores comunes de sincronización #

Nota: Recomendamos siempre actualizar el plugin a la última versión para obtener todas las funciones actualizadas de Clerk.

Al importar datos con el Plugin de Clerk para WooCommerce, el servidor de tu tienda es responsable de enviar los datos de productos, categorías y pedidos a Clerk.

Sin embargo, en algunos casos, la configuración del servidor puede bloquear el acceso de la importación a los datos, causando un error en la Data Sync.

A continuación se muestra una lista de los errores más comunes y cómo solucionarlos.

401 Unauthorized #

Este error ocurre si tu tienda o entorno de desarrollo requiere autenticación HTTP para acceder.

Esto se soluciona insertando el Username y Password como parte de la URL de importación:

http://username:password@woocommerce.clerk.io

403 Forbidden #

Este error ocurre si tu servidor bloquea el acceso del importador.

En la mayoría de los casos, solo necesitas whitelistear la dirección IP del importador para darle acceso.

La última dirección IP puede encontrarse aquí.

Además, asegúrate de que la Public Key, Private Key y Import URL sean correctas para la tienda que estás gestionando en my.clerk.io.

¿Qué pasa si ya he añadido la IP a la whitelist pero el error continúa?

Si ya has añadido la dirección IP del importador pero el error persiste, revisa lo siguiente:

Puede que la parte de autenticación del cuerpo se elimine de la petición por el servidor de la tienda.
Límite de tasa para el servidor relacionado con Cloudflare.
Un redireccionamiento de www a non-www (o viceversa) en la tienda. Si el registro de Data Sync muestra un error 403 para una URL sin www, pero tu sitio web realmente lo utiliza, intenta agregar www. a la Store URL en tu configuración de Clerk.io. Por ejemplo, usa https://www.yourdomain.com en lugar de https://yourdomain.com.

404 Not Found #

Este error ocurre si el importador no pudo acceder al enlace que envía los datos desde la tienda.

En la mayoría de los casos, ocurre porque el plugin está:

No instalado
Desactivado tras una actualización
Un caché hace que el enlace no se inicialice
Los permalinks de WooCommerce están configurados en Post name en lugar de Month and name

Sigue estos pasos de depuración para solucionar el error:

Asegúrate de que has instalado el Plugin correctamente y que está activado. Si has actualizado el plugin recientemente de forma automática, WooCommerce a veces desactiva el plugin. Si esto ha ocurrido, ve a Plugins > Clerk y haz clic en Activate.
Vacía la caché de tu tienda antes de intentar una nueva importación.
Si aún no se sincroniza correctamente, ve al backend de WooCommerce, luego a Settings > Permalinks y cambia los Common Settings a Month and name y pulsa Save Changes:

429 Too Many Requests #

Este error ocurre si tu servidor niega el acceso al importador por demasiadas peticiones entrantes.

Puedes solucionarlo:

Aumentando el request limit de tu servidor.
Estableciendo Page Size a un valor mayor en my.clerk.io > Data > Configuration, haciendo que el importador realice menos peticiones, pero más grandes.

Si utilizas el proveedor Byte.nl, el importador suele devolver este error por su limitador de tasa. En este caso, contacta con el soporte de Byte.nl y pídeles que whitelisteen el User-Agent del importador “clerk”.

500 Internal Server Error #

Este error significa que tu servidor encontró un error interno y no pudo especificar cuál fue.

En estos casos, revisa el Server Log para identificar el proceso que falló y por qué.

En la mayoría de los casos, es debido a un producto con un atributo inválido, o una función llamada incorrectamente en la tienda.

Un ejemplo de este error puede ocurrir al actualizar WooCommerce y Klarna. En este caso, el problema lo genera el plugin ‘woocommerce-gateway-klarna’ que no se actualiza.

Si ocurre, ve a woocommerce-gateway-klarna > includes > variables-checkout.php.

Busca:

if ( ! is_admin() && ! empty( $klarna_country )) {

y cámbialo a:

if ( ! is_admin() && ! empty( $klarna_country ) && WC()->session ) {

503 Service Unavailable #

Este error es típicamente temporal y ocurre cuando el servidor está demasiado ocupado para procesar la solicitud.

Por favor, intenta de nuevo más tarde.

Si el problema persiste, podría indicar que el servidor está sobrecargado y cerca de su capacidad máxima.

Para confirmarlo, revisa la carga del servidor y su uso actual.

520 Unknown Error #

Este error usualmente proviene de Cloudflare, y suele suceder por un cuello de botella en WooCommerce que causa problemas con Page Sizes altos.

Para solucionarlo, pon el Page Size en 50 en my.clerk.io > Data > Configuration y ejecuta una nueva Data Sync.

522 Connection Timed Out #

Este error suele ocurrir si el servidor está demasiado ocupado para responder, o si nuestro importador no tiene acceso al servidor.

Espera unos minutos e intenta sincronizar de nuevo, para ver si el servidor estaba ocupado.
Si aún no funciona, asegúrate de incluir la IP del importador en la whitelist de la configuración de tu servidor. La última dirección IP puede encontrarse aquí.

Invalid API response #

Este error suele pasar si la Depuración de WooCommerce está activada.

Nunca es buena idea tenerla activada en un entorno en vivo porque ralentiza las páginas y puede mostrar mensajes de error en el frontend.

El problema de sincronización ocurre si WooCommerce encuentra un error al generar los datos de producto para la importación.

Se puede resolver desactivando la Depuración en wp-config.php estableciendo define('WP_DEBUG', false).

Esta guía lo explica con más detalle:

https://docs.woocommerce.com/document/woocommerce-product-search/api/debugging/

Y esta guía indica una alternativa:

https://aristath.github.io/blog/wp-hide-php-errors

Los errores aún se registran incluso cuando no está en modo Depuración, pero se registran en un archivo.

Actualización a Clerk.js 2 #

Clerk.js 2 es una versión más rápida y flexible de nuestra librería de JavaScript.

Hace más fácil instalar Clerk en cualquier tienda online.

Sin embargo, ya que ambas versiones trabajan de forma algo diferente, necesitas seguir estos pasos para actualizar correctamente.

Las dos diferencias principales en Clerk.js 2 son:

Los Designs en my.clerk.io usan el lenguaje de plantillas Liquid, pero también pueden crearse fácilmente usando el Design Editor.
El script debe insertarse justo antes de la etiqueta </head> en la plantilla de tu tienda.

Crear designs #

Ya que Clerk.js 2 usa un enfoque diferente para los Designs, tienes que crear otros nuevos.

Puedes crear tus Designs de Clerk.js 2 rehaciéndolos en el Design Editor, o convirtiendo tus diseños antiguos a Liquid.

A continuación, se explica cómo convertir tus diseños antiguos a Liquid.

Opción Design Editor #

Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona un tipo de diseño que no sea Blank y ponle un nombre. Recomendamos añadir “V2” para que sea obvio que estás usando Clerk.js 2.
En el Design Editor, haz clic en cualquier elemento como nombre, imagen, botón, etc., para editarlo o para añadir nuevos elementos al diseño.
Haz clic en Publish Design al finalizar, y pasa al Paso 2 de esta guía.
Ve a Recommendations/Search > Elements y cambia tu Elemento de Clerk para usar tu nuevo Design, luego haz clic en Update Element.
Esto causará que temporalmente no aparezcan en tu tienda, hasta que hayas insertado Clerk.js 2 como se describe más adelante en esta guía.

Conversión de designs #

Dado que Clerk.js 2 utiliza el lenguaje de plantillas más flexible Liquid, debes convertir los Designs a este lenguaje.

Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona Blank > Code y ponle un nombre. Recomendamos añadir “V2” para que quede claro que es de Clerk.js 2.
Haz clic en Create Design.
Obtendrás un diseño en blanco con HTML de producto y CSS que puedes usar.
Vuelve a la vista general de designs y haz clic en Edit Design para tu Design de Clerk.js 1. Recomendamos hacerlo en una nueva pestaña para poder copiar fácilmente el código.
Copia el Design antiguo de Clerk.js 1 a tu nuevo Design de Clerk.js 2.
- Notarás que ya no hay Container Code en el nuevo.
- Esto es porque Liquid usa for loops para renderizar los productos.
- Copia tu antiguo Product HTML dentro del for-loop, tu antiguo Container Code alrededor de él y copia también el CSS.
Convierte el Design a la sintaxis de Liquid. La principal diferencia es que los antiguos utilizaban la sintaxis {{ formatter attribute }} mientras la sintaxis de v2 es {{ product.attribute | formatter }}.
Repasa todos tus atributos y cámbialos al nuevo formato.
Si usas sentencias {{#if}} o {{#is}}, también debes convertirlas. Usa la sintaxis {% if product.attribute %} {% else %} {% endif %}.
Borra id="{{ $id }}" y la clase :target del código del contenedor en la versión de Clerk.js 2, ya que ya no se soportan.
A continuación un ejemplo de diseño Clerk.js 1, y la versión completamente convertida:

Clerk.js 1 Design #

// Product HTML
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Price {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Price {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Price {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Buy Now</div>
</li>

// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- This code creates the slider by its ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>

Clerk.js 2 Design #

<h2>{{ headline }}</h2>

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Buy Now</div>
        </a>
    </li>
    {% endfor %}
</ul>

Haz clic en Update Design para guardar los cambios.
Ve a Recommendations/Search > Elements y cambia el bloque Element a tu nuevo Design.
Haz clic en Update Element. Esto causará que temporalmente no aparezcan en tu tienda, hasta que termines el Paso 2. Elige el nuevo Design para todos los elementos que quieras actualizar.
Finalmente, actualiza el plugin siguiendo esta guía.

Configuración multiidioma #

Cuando uses WPML en WooCommerce, deberías ser capaz de diferenciar tus idiomas por URL, así:

Si tienes URLs únicas como estas, puedes ampliar el plugin de WooCommerce para soportar WPML.

También está bien definir el idioma a través del parámetro lang. Por ejemplo:

https://awesomestore.com/?lang=en

Copiar tienda #

La forma más sencilla de implementar Clerk en varios dominios en configuraciones estándar es crear una Store separada para cada dominio en my.clerk.io.

Así puedes separar productos, ventas, monedas, etc. y controlar cada dominio individualmente.

Tras realizar la configuración inicial, haz clic en la esquina superior izquierda del menú lateral y después en "+ Add new store", la última opción de la lista (generalmente bajo las tiendas existentes y el nombre de la empresa).

En la página Add New Store, completa los datos de tu tienda y elige tu Store principal en el desplegable Copy Elements From Existing Store, luego haz clic en Add Store:

Esto copiará los Elements y Designs desde la Store principal. Recuerda traducir los Headlines al idioma correspondiente.

Instala y configura #

El soporte oficial para WPML ha sido añadido a la extensión de WooCommerce de Clerk, lo que significa que, siempre que uses esa versión o una más reciente, WPML debería estar soportado.

En el panel de configuración de WooCommerce verás la configuración habitual.

Si WPML está activo y configurado en tu sitio WordPress, verás Multi Language Scope con el idioma actual en la parte superior de la página de ajustes.

Para cambiar de idioma, basta usar el selector de la parte superior. Selecciona el idioma que deseas configurar con Clerk y elige los ajustes que quieras. Repite para cada idioma.

Nota: No se recomienda seleccionar All Languages en este desplegable al guardar la configuración, pues solo servirá como valor predeterminado.

Sincronizar dominios #

Tras ampliar el plugin, puedes sincronizar cada Store con su dominio de idioma.

Como ya has instalado la extensión, puedes saltarte el primer paso y empezar directamente a configurarla y sincronizar los datos.

Una vez termine la Sync, tu dominio estará listo y usando la misma configuración que tu Store principal.

Integración por Shortcode #

Si utilizas un editor de Shortcodes como Elementor, nuestro snippet de recomendación habitual puede que no se renderice debido a que el ID del producto tiene una sintaxis diferente a la de un bloque HTML normal.

Si utilizas Hooks, ve a Appearance -> Custom Layouts -> Insert e inserta el shortcode en el Hook correspondiente a Clerk (en caso necesario, un desarrollador puede crear dichos Hooks).

Reemplaza el código #

Para insertar el código, reemplaza:

<span class="clerk" 
   data-template="@product-page-alternatives" 
   data-products="[<?php echo $product->get_id(); ?>]">
</span>

Por:

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

Primero prueba con corchetes simples, y si no funciona, prueba con doble corchete:

<span class="clerk" 
   data-template="@category-page-popular" 
   data-category="[ [clerk_category_id] ]">
</span>

Si esto no funciona, prueba estos:

<span class="clerk" 
   data-template="@product-page-alternatives" 
   data-products="[<?php the_ID(); ?>]">
</span>

<span class="clerk" 
   data-template="@product-page-others-also-bought" 
   data-products="[<?php the_ID(); ?>]">
</span>

Inserción manual #

Si no puedes insertar el shortcode o no usas ningún tipo de editor, ve a Appearance > Personalization y haz clic en la página de producto, luego sigue estos pasos Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

Integración en archivos de tema: Añadir un slider de página de producto a todas las páginas

Navega a Appearance > Theme File Editor > WooCommerce > content-single-product.php (o un archivo similar donde se defina el layout de tu página de producto).
Inserta el código del span en la ubicación deseada dentro del archivo para mostrar el slider. Este proceso es similar a hacer cambios por acceso FTP.

<span class="clerk" 
   data-template="@product-page-alternatives" 
   data-products="[<?php the_ID(); ?>]">
</span>

<span class="clerk" 
   data-template="@product-page-others-also-bought" 
   data-products="[<?php the_ID(); ?>]">
</span>

Visual hooks #

En WooCommerce, ciertas páginas del sitio web se crean usando Visual Hooks en lugar de renderizarse desde un archivo HTML.

Para añadir contenido a páginas creadas mediante Visual Hooks, deberás insertar el contenido de Clerk en el archivo functions.php activo de la tienda.

El archivo functions.php suele estar en la siguiente ruta:

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

Ejemplo de página de producto #

Por ejemplo, para añadir un elemento de Recommendations con el Element @product-page-alternatives a tu página de producto, tendrías que incluir este 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>";
}

Ejemplo de página de carrito #

Y, otro ejemplo para añadir un elemento de Recommendations a la página Add-to-Cart:

// 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 tus propios elementos de Recommendation a las páginas anteriores, recuerda reemplazar el código dentro de las etiquetas con el embed code de tus elementos de Recommendations en my.clerk.io, como aquí:

El valor en add_action(), 5 en este ejemplo, indica a WooCommerce la prioridad del elemento añadido, lo que influye en lo pronto que se mostrará en ese Visual Hook.

Nota: Al establecer prioridad, WooCommerce solo acepta múltiplos de 5.

Más info sobre páginas de sitio en WooCommerce que usan Visual Hooks:

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

Problemas con Powerstep #

Se renderiza dos veces #

Si tienes un problema donde Powerstep aparece dos veces, deberás dividir la página para arreglarlo.

En el backend de WooCommerce, ve a la página Powerstep que creaste en Pages.
Elige Shortcodes arriba a la derecha y luego haz clic en Row / Columns.
Haz clic en “OK” en la ventana emergente.
Finalmente, mueve [clerk-powerstep] dentro de [row] [col] y [/row] [/col], y pulsa Save.

No se renderiza #

Si Powerstep aún no aparece, puede que tengas que desactivar la opción Cart Redirect de WooCommerce.

Para ello, sigue estos pasos:

Ve a WooCommerce > Settings > Products y busca Add to cart behaviour.
Asegúrate de que ambas casillas estén desmarcadas.
Haz clic en Save changes al final de la página.

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