Woocommerce

FAQ

Soluciones a preguntas y problemas comunes al usar 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 hooks en posiciones no estándar.

Esto significa que el plugin de Clerk puede que no pueda insertar automáticamente los códigos embed.

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

Localizar formulario de búsqueda #

Comienza localizando tu formulario de búsqueda.

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

Acceder 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 a tu ordenador.

Esto te permitirá 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 a través de los archivos.

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

Solucionar enlaces de búsqueda #

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

Comienza viendo tu tienda en el navegador. Recomendamos usar Chrome.

Localiza cualquier HTML único del campo de búsqueda, como searchform:

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

Ubica el archivo en el FTP.

Actualizar configuración del formulario #

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

Necesitas cambiar tres cosas:

La URL a la que son enviados los clientes, usualmente situada en el elemento <form>, debe coincidir con el nombre de la página que creaste en WooCommerce. Generalmente será "soegeresultater" o "search-results".
El atributo "name" del campo input debe ser searchterm.
El campo input oculto con name="post_type" debe estar comentado.

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

Y debería 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 JavaScript personalizadas que agregan nueva funcionalidad a tus Designs.

Los formatters se pueden agregar 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 agregado a todas las páginas, permitiendo definir múltiples 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 #

Un ejemplo se puede ver abajo:

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

Múltiples 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 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 que requieras en tus Designs.

Autenticación HTTP #

La autenticación HTTP suele usarse en sitios de staging para evitar visitas no deseadas.

Esto bloqueará el importador de Clerk y mostrará un error 401 Unauthorized en el log 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 import URL 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 actualizadas de Clerk.

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

Sin embargo, en algunos casos, la configuración del servidor puede bloquear la importación de acceso 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 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 whitelistear la dirección IP del importador para darle acceso.

La IP más reciente 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 operando dentro de my.clerk.io.

¿Qué pasa si ya he whitelisteado pero el error sigue ocurriendo?

Si ya has whitelisteado la 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 tasa del servidor respecto a Cloudflare.

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 pasa porque el plugin está:

No instalado en absoluto
Desactivado por una actualización
Una caché causa que el enlace no se inicialice
Los permalinks de WooCommerce están configurados como Post name en vez de Month and name

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

Asegúrate de haber instalado el Plugin correctamente y que está activado. Si actualizaste recientemente el plugin automáticamente, WooCommerce a veces desactiva el plugin. Si esto sucedió, ve a Plugins > Clerk y haz clic en Activar.
Vacía la caché de tu tienda antes de intentar una nueva importación.
Si aún no sincroniza, ve al backend de WooCommerce, luego a Settings > Permalinks y cambia la opción de Common Settings a Month and name y presiona Guardar cambios:

429 Too Many Requests #

Este error ocurre si tu servidor deniega el acceso al importador por demasiadas solicitudes entrantes.

Puedes solucionarlo de las siguientes formas:

Aumentando el límite de solicitudes permitido en tu servidor.
Ajustando Page Size a un valor mayor en my.clerk.io > Data > Configuration, haciendo que el importador realice menos solicitudes, pero más grandes.

Si usas el proveedor Byte.nl, el importador suele devolver este error por su limitador de tasa. En este caso, contacta al 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 tu Server Log para identificar qué proceso falló y por qué.

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

Un ejemplo puede ocurrir al actualizar WooCommerce y Klarna. En este caso, el problema es causado por el plugin ‘woocommerce-gateway-klarna’ que no se actualiza.

Si sucede, 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 es típicamente temporal y ocurre cuando el servidor está demasiado ocupado para procesar la solicitud.

Por favor, intenta más tarde.

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

Para confirmar, revisa la carga del servidor y evalúa su uso actual.

520 Unknown Error #

Normalmente este error es devuelto por Cloudflare y suele suceder por un cuello de botella en WooCommerce que genera problemas con Page Sizes altos.

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

522 Connection Timed Out #

Este error suele suceder 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 whitelistear la IP del importador en la configuración del servidor. La IP más reciente puede encontrarse aquí.

Respuesta inválida de API #

Este error suele ocurrir si la Depuración de WooCommerce ha sido activada.

Nunca es recomendable tenerla activada en producción porque desacelera las páginas y puede mostrar mensajes de error en el frontend.

El problema de sincronización se produce si WooCommerce encuentra un error generando los datos del producto para la importación.

Se puede solucionar desactivando la depuración en wp-config.php estableciendo 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 una solución alternativa:

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

Los errores seguirán registrándose incluso cuando no se esté en modo depuración, pero se almacenarán en un archivo.

Actualizar a Clerk.js 2 #

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

Hace más sencilla la instalación de Clerk en cualquier tienda online.

Sin embargo, como las dos versiones funcionan de maneras diferentes, necesitas seguir estos pasos para actualizar con éxito.

Las dos principales diferencias 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 Editor de Diseños.
El script debe insertarse justo antes de la etiqueta </head> en la plantilla de tu tienda.

Crear diseños #

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

Puedes crear tus Designs de Clerk.js 2 rehaciéndolos en el Editor de Diseños, o convirtiendo tus antiguos Designs de código a Liquid.

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

Opción Editor de Diseños #

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 usas diseños Clerk.js 2.
En el Editor de Diseño, haz clic en los elementos existentes como nombre, imagen, botón, etc. para editarlos, o agrega nuevos elementos al Design.
Haz clic en Publish Design cuando termines y ve a Step 2 de la guía.
Ve a Recommendations/Search > Elements y cambia tu Elemento Clerk para que use tu nuevo Design, luego haz clic en Update Element.
Esto hará que temporalmente no se muestren en tu tienda, hasta que insertes Clerk.js 2 como se describe más adelante.

Convertir diseños #

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

Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona Blank > Code y ponle un nombre. Recomendamos agregar “V2” para que sea obvio que usas diseños Clerk.js 2.
Haz clic en Create Design.
Esto te dará un diseño en blanco con HTML y CSS de Producto que puedes usar.
Regresa a la vista general de diseños y haz clic en Edit Design para tu diseño de Clerk.js 1. Recomendamos hacerlo en una nueva pestaña para copiar fácilmente el código.
Copia el antiguo Design Clerk.js 1 en tu nuevo Design Clerk.js 2.
- Notarás que en el nuevo no hay Container Code.
- Esto es porque Liquid utiliza for loops para renderizar todos los productos.
- Copia tu antiguo Product HTML dentro del for-loop, tu antiguo Container Code alrededor y también el CSS.
Convierte el Design a la sintaxis de Liquid. La mayor diferencia es que los designs antiguos usaban la sintaxis {{ formatter attribute }} mientras que la de v2 es {{ product.attribute | formatter }}.
Revisa todos tus atributos y cámbialos al nuevo formato.
Si usas sentencias {{#if}} o {{#is}}, también deben convertirse. Utiliza la sintaxis {% if product.attribute %} {% else %} {% endif %}.
Elimina id="{{ $id }}" y la clase :target del container code en la versión 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 tu bloque Element a tu nuevo Design.
Haz clic en Update Element. Esto hará que temporalmente no se muestren en tu tienda, hasta completar el Step 2. Elige el nuevo Design para todos los Elements que deban actualizarse.
Finalmente, actualiza el plugin siguiendo esta guía.

Configuración multi-idioma #

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

Si tienes URLs únicas así, puedes ampliar el plugin WooCommerce para soportar WPML.

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

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

Copiar tienda #

La forma más simple 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 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 (usualmente bajo la(s) tienda(s) existente(s) y el nombre de tu empresa).

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

Esto copiará los Elements y Designs de tu tienda principal. Recuerda traducir los Headlines al idioma adecuado.

Instalar y configurar #

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

En el panel de configuración de WooCommerce verás las opciones normalmente.

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, usa el selector en el panel superior. Debes seleccionar el idioma para configurar Clerk, y proveer tus ajustes deseados. Repite para cada idioma.

Nota: No se aconseja seleccionar All Languages en este desplegable al guardar la configuración, ya que solo servirá como fortaleza por defecto.

Sincronizar dominios #

Una vez ampliado el plugin, puedes sincronizar cada tienda con su dominio de idioma.

Como ya has instalado la extensión, puedes saltar el primer paso y comenzar a configurarla y sincronizar datos.

Cuando la Sincronización termine, tu dominio estará listo y usará la misma configuración que tu tienda principal.

Integración Shortcode #

Si utilizas un editor de Shortcode como Elementor, nuestro código de recomendación regular puede no estar funcionando porque el ID de producto tiene una sintaxis diferente en Elementor que en un bloque HTML normal.

Si usas Hooks, entonces puedes ir a Appearance -> Custom Layouts -> Insert el shortcode en el Hook que corresponde a Clerk (en cuyo caso, un desarrollador puede crearlo si desea 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 corchetes simples y si no funciona, con dobles corchetes:

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

Si este no funciona, puedes probar 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 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 con archivo 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 define el layout de la página de producto).
Inserta el código span en la ubicación deseada dentro del archivo para mostrar el slider. Este proceso es similar a hacer cambios vía 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 del sitio web son creadas usando Visual Hooks en vez de ser renderizadas desde un archivo HTML.

Para agregar contenido a páginas creadas vía Visual Hooks, deberás insertar el contenido de Clerk dentro del archivo functions.php activo del tema.

El archivo functions.php suele estar en la ruta:

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

Ejemplo en página de producto #

Por ejemplo, para agregar un elemento de Recommendations con el Elemento @product-page-alternatives a tu página de producto, debes incluir 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 en página de carrito #

Y, otro ejemplo para agregar un elemento Recommendations a la página de agregar 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 agregar tus propios elementos de Recommendations a las páginas anteriores, recuerda reemplazar el código dentro de con el código embed proporcionado en tus Recommendations Elements en my.clerk.io, como abajo:

El valor definido en add_action(), 5 en este ejemplo, le indica a WooCommerce la prioridad del Elemento añadido, lo que a su vez influye en lo temprano que se mostrará el Elemento en ese Visual Hook.

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

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

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

Problemas con Powerstep #

Se muestra dos veces #

Si tienes el problema de que Powerstep se muestra dos veces, necesitarás dividir la página para solucionarlo.

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

No se muestra #

Si Powerstep aún no aparece, puede que tengas que desactivar la opción de Redirección de Carrito 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.