Preguntas frecuentes

¿Tienes problemas con tu integración de WooCommerce? Esta 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 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 inserción.

Sigue estos pasos para insertar manualmente los códigos cuando sea necesario.

Localizar el formulario de búsqueda #

Empieza localizando tu formulario de búsqueda.

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

Acceder a los archivos del tema #

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

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

Esto te permite buscar dentro de 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 en el paso anterior.

Buscar archivos #

Ahora puedes buscar dentro de los archivos.

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

Corregir enlaces de búsqueda #

Si ya configuraste la búsqueda y creaste una página en WooCommerce para los resultados de búsqueda, pero tu campo de búsqueda no enlaza correctamente, sigue estos pasos.

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

Localiza cualquier HTML que parezca único para el campo de búsqueda, por ejemplo searchform:

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

Encuentra el archivo correspondiente en FTP.

Actualizar configuraciones 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, normalmente en el elemento <form>, debe coincidir con el nombre de la página que creaste en WooCommerce. Esto suele ser "soegeresultater" o "search-results".

• El atributo "name" del campo de entrada debe ser searchterm.

• El campo de entrada oculto con name="post_type" debe estar comentado.

Un formulario de búsqueda podría 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.

Usando formatters #

Clerk.js te permite escribir funciones JavaScript personalizadas que agregan nueva funcionalidad a tus Designs.

Los formatters se pueden agregar de dos maneras:

• 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 a todas las páginas, permitiendo definir múltiples formatters a la vez.

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

Ejemplo de formatter #

Un ejemplo puede verse a continuación:

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

Múltiples formatters #

Puedes escribir cualquier número 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 diseños #

Después de 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 en tus Designs que necesites.

Autenticación HTTP #

La autenticación HTTP se utiliza a menudo 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 solucionar esto 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 actualizar siempre el plugin a la última versión para obtener todas las funciones más actualizadas de Clerk.

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

Sin embargo, en algunos casos, la configuración del servidor podría bloquear la importación para acceder a los datos, causando un error en Data Sync.

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

401 Unauthorized #

Este error ocurre si tu tienda online 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, simplemente necesitas whitelist 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 las correctas para la tienda en la que estás operando dentro de my.clerk.io.

¿Qué pasa si ya hice whitelist pero el mismo error continúa ocurriendo?

Si has hecho whitelist de la dirección IP del importador pero el error persiste, revisa lo siguiente:

• La parte de autenticación del body puede estar siendo removida de la solicitud desde el servidor de la tienda.

• Límite de peticiones del servidor en relación a Cloudflare.

404 Not Found #

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

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

• No instalado en absoluto

• Desactivado debido a una actualización

• Un caché causa 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:

1. Asegúrate de haber instalado correctamente el Plugin y que está activado. Si actualizaste recientemente el plugin automáticamente, WooCommerce a veces desactiva el plugin. Si esto ha sucedido, ve a Plugins > Clerk y haz clic en Activate.

2. Vacía la caché de tu tienda online antes de intentar una nueva importación.

3. Si aún no se sincroniza correctamente, ve al backend de WooCommerce, luego a Settings > Permalinks y cambia la 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 debido a demasiadas peticiones entrantes.

Puedes solucionarlo ya sea:

• Configurando el request limit más alto en tu servidor.

• Ajustando Page Size a un valor más alto en my.clerk.io > Data > Configuration, haciendo que el importador haga menos peticiones, pero más grandes.

Si usas el proveedor de hosting Byte.nl, el importador suele devolver este error debido a su limitador de tasa. En este caso, contacta al soporte de Byte.nl y pídeles que whitelist 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 el error.

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

En la mayoría de los casos, se debe simplemente a un producto con un atributo inválido, o una función que se ejecuta incorrectamente en la tienda online.

Un ejemplo de este error podría ocurrir al actualizar WooCommerce y Klarna al mismo tiempo. En este caso, el problema lo causa el plugin ‘woocommerce-gateway-klarna’ que no se actualiza.

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

Busca:

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

y cámbialo por:

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

503 Service Unavailable #

Este error suele ser temporal y aparece cuando el servidor está muy ocupado para procesar la solicitud.

Por favor, inténtalo 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 evalúa su uso actual.

520 Unknown Error #

Usualmente este error es devuelto por Cloudflare, y a menudo ocurre debido a un cuello de botella en WooCommerce que causa problemas con valores altos de Page Size.

Para solucionarlo, configura tu Page Size en 50 en my.clerk.io > Data > Configuration y haz una nueva sincronización de datos.

522 Connection Timed Out #

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

1. Espera unos minutos e intenta sincronizar de nuevo, para ver si el servidor estaba ocupado.

2. Si aún así no funciona, asegúrate de que la IP del importador esté en whitelist en la configuración de tu servidor. La última dirección IP puede encontrarse aquí.

Invalid API response #

Este error normalmente ocurre si el Debugging de WooCommerce ha sido activado.

Nunca es recomendable tenerlo activo en un entorno en vivo porque ralentiza las páginas y potencialmente muestra 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.

Esto puede solucionarse desactivando el Debugging en wp-config.php haciendo que define('WP_DEBUG', false).

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

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

Y esta guía explica otra solución alternativa:

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

Los errores seguirán siendo registrados incluso si no estás en Modo Debug, pero serán registrados en un archivo en su lugar.

Actualizar a Clerk.js 2 #

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

Facilita la instalación de Clerk en cualquier tienda online.

Sin embargo, como ambas versiones funcionan de manera ligeramente diferente, necesitas seguir estos pasos para actualizar correctamente.

Las dos principales diferencias en Clerk.js 2 son:

• Los Designs en my.clerk.io utilizan el lenguaje de plantillas Liquid, pero también pueden crearse fácilmente usando el Design Editor.

• El script se debe insertar justo antes de la etiqueta </head> en la plantilla de tu tienda online.

Crear diseños #

Como Clerk.js 2 tiene un enfoque diferente para los Designs, necesitas crear nuevos.

Puedes crear los Designs de Clerk.js 2 rehaciéndolos en el Design Editor o convirtiendo tus antiguos code Designs a Liquid.

A continuación, una descripción de cómo convertir tus antiguos code Designs a Liquid.

Opción Design Editor #

1. Ve a my.clerk.io > Recommendations/Search > Designs > New Design.

2. Selecciona un tipo de diseño diferente a Blank y ponle un nombre. Recomendamos agregar “V2” para que sea obvio que usas diseños de Clerk.js 2.

3. En el Design Editor, haz clic en cualquiera de los elementos existentes como nombre, imagen, botón, etc. para editarlo, o agrega nuevos elementos al Diseño.

4. Haz clic en Publish Design cuando termines y ve a Step 2 en la guía.

5. Ve a Recommendations/Search > Elements y cambia tu Elemento de Clerk para usar tu nuevo Design, luego haz clic en Update Element.

6. Esto hará que temporalmente no se muestren en tu tienda online, hasta que insertes Clerk.js 2 como se describe más adelante en esta guía.

Conversión de diseños #

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

1. Ve a my.clerk.io > Recommendations/Search > Designs > New Design.

2. Selecciona Blank > Code y ponle un nombre. Se recomienda agregar “V2” para que sea obvio que usas diseños de Clerk.js 2.

3. Haz clic en Create Design.

4. Esto te dará un diseño en blanco con HTML de Producto y CSS que puedes usar.

5. Vuelve a la vista general de diseños y haz clic en Edit Design para tu Design de Clerk.js 1. Recomendamos hacerlo en una nueva pestaña para copiar el código fácilmente.

6. Copia el antiguo Design de Clerk.js 1 a tu nuevo Design de Clerk.js 2.

   • Notarás que no hay Container Code en tu nuevo diseño.

   • Esto es porque Liquid usa for loops para renderizar todos los productos.

   • Copia tu antiguo Product HTML dentro del for-loop, tu antiguo Container Code alrededor de esto y copia también el CSS.

7. Convierte el Design a la sintaxis de Liquid. La principal diferencia es que los diseños antiguos usaban la sintaxis {{ formatter attribute }} mientras que la sintaxis v2 es {{ product.attribute | formatter }}.

8. Revisa todos tus atributos y cámbialos al nuevo formato.

9. Si usas sentencias {{#if}} o {{#is}}, también deben convertirse. Usa la sintaxis {% if product.attribute %} {% else %} {% endif %}.

10. Elimina id="{{ $id }}" y la clase :target del código de contenedor en la versión Clerk.js 2 ya que ya no se soportan.

11. A continuación, un ejemplo de un diseño Clerk.js 1 y la versión totalmente 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>

12. Haz clic en Update Design para guardar los cambios.

13. Ve a Recommendations/Search > Elements y cambia tu bloque de Elemento para usar tu nuevo Design.

14. Haz clic en Update Element. Esto hará que temporalmente no se muestren en tu tienda online, hasta que termines Step 2. Elige el nuevo Design para todos los Elementos que deban actualizarse.

15. Finalmente, actualiza el plugin siguiendo esta guía.

Configuración multilenguaje #

Al usar WPML en WooCommerce, deberías poder diferenciar los idiomas por URL, así:

• https://awesomestore.com/en

• https://awesomestore.com/it

• https://awesomestore.com/de

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

También es válido definir el idioma mediante el parámetro lang. Por ejemplo:

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

Copiar tienda #

La forma más sencilla de implementar Clerk en múltiples dominios en configuraciones estándar es creando una tienda separada para cada dominio en my.clerk.io.

Así puedes separar productos, ventas, monedas, etc. para hacer seguimiento de cada dominio.

Después de completar la configuración inicial, haz clic en la esquina superior izquierda del menú lateral y luego en "+ Add new store", la última opción de la lista desplegable (generalmente debajo de las tiendas existentes y del nombre de tu empresa).

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

Esto trasladará los Elements y Designs de tu tienda principal. Recuerda traducir Headlines al idioma correcto también.

Instalar y configurar #

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

En el panel de configuración de WooCommerce verás las configuraciones como siempre.

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 configuración.

Para cambiar el idioma, utiliza el selector en el panel superior. Debes seleccionar el idioma para el que deseas configurar Clerk y proporcionar la configuración deseada. Repite esto para cada idioma.

Ten en cuenta que seleccionar All Languages en este desplegable no se recomienda al guardar tu configuración, ya que solo guardará tu configuración como fallback.

Sincronizar dominios #

Una vez hayas extendido el plugin, ahora puedes sincronizar cada una de tus tiendas con su dominio de idioma.

Como ya has instalado la extensión, puedes saltar el primer paso y empezar directamente con la configuración y sincronización de datos.

Cuando la sincronización haya terminado, tu dominio estará listo y usando la misma configuración que tu tienda principal.

Integración de shortcodes #

Si usas un editor de Shortcodes como Elementor, nuestro snippet de recomendación estándar puede no renderizarse debido a que el ID del producto se utiliza de forma diferente en Elementor que en un bloque HTML normal.

Si usas Hooks, puedes ir a Appearance -> Custom Layouts -> Insert el shortcode en el Hook que corresponda a Clerk (en caso de que un desarrollador pueda crear estos si quieren que Clerk sea un Hook).

Reemplazar 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>

Prueba primero con solo corchetes simples, y luego, si eso no funciona, con doble corchete:

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

Si este tampoco funciona, puedes probar con 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 utilizas ningún tipo de Editor, ve a Appearance > Personalization luego haz clic en la página de producto y sigue estos pasos Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

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

1. Dirígete a Appearance > Theme File Editor > WooCommerce > content-single-product.php (o un archivo similar donde se define la estructura de tu página de producto).

2. Inserta el código span en la ubicación deseada dentro del archivo para mostrar el slider. Este proceso es similar a hacer cambios mediante 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 #

Dentro de WooCommerce, ciertas páginas web se crean usando Visual Hooks en vez de renderizarse desde un archivo HTML.

Para añadir contenido a páginas creadas vía Visual Hooks, debes insertar el contenido de Clerk dentro del archivo functions.php activo del tema de la tienda online.

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

/wp-content/themes/NOMBRE-DE-TU-TEMA-child-theme/functions.php

Ejemplo de página de producto #

Por ejemplo, para agregar un elemento de Recommendations con el Element @product-page-alternatives a tu página de producto, incluye el siguiente 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 agregar un elemento de Recommendations a la página de añadir al carrito:

// 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 en las páginas anteriores, recuerda reemplazar el código dentro de las etiquetas con el código de inserción proporcionado en tus Recommendations Elements en my.clerk.io, como se muestra a continuación:

El valor colocado en add_action(), 5 en este ejemplo, le indica a WooCommerce la prioridad del Elemento que se añade, lo cual influye en qué tan temprano se mostrará el Element en ese Visual Hook.

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

Más información sobre las páginas de WooCommerce que usan Visual Hooks:

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

Problemas en Powerstep #

Se renderiza dos veces #

Si tienes un problema donde Powerstep se muestra dos veces, necesitarás dividir la página para solucionarlo.

1. En el backend de WooCommerce, ve a la página de Powerstep que creaste en Pages.

2. Elige Shortcodes en la esquina superior derecha, y luego haz clic en Row / Columns.

3. Luego, haz clic en “OK” en el pop-up que aparece.

4. Finalmente, mueve [clerk-powerstep] dentro de los tags [row] [col] y [/row] [/col], y haz clic en Save.

No se renderiza #

Si Powerstep aún no aparece, tal vez tengas que desactivar la configuración de Cart Redirect en WooCommerce.

Para hacerlo, sigue estos pasos:

1. Ve a WooCommerce > Settings > Products y encuentra Add to cart behaviour.

2. Asegúrate de que ambas casillas estén desmarcadas.

3. Haz clic en Save changes en la parte inferior de la página.