Woocommerce

FAQ

Soluciones a preguntas e incidencias comunes al usar Clerk con WooCommerce

¿Tienes problemas con tu integración 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 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.

Ubicar el formulario de búsqueda #

Comienza ubicando tu formulario de búsqueda.

Inspecciona tu sitio web y encuentra 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 en tu ordenador.

Esto te permitirá realizar búsquedas dentro de los archivos.

Abrir en el editor #

En tu editor de código favorito, 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 temas de WooCommerce.

Arreglar 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 en el navegador. Recomendamos usar Chrome.

Localiza cualquier HTML que parezca único al 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 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 los clientes son redirigidos, normalmente encontrada 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 podría verse así antes de modificarlo:

Y debería verse así tras el cambio:

Ahora deberías estar enlazado 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 en JavaScript que agregan nuevas funcionalidades a tus Designs.

Los formatters pueden agregarse de dos maneras:

Vía my.clerk.io > Developers > Formatters, donde cada formatter se crea como una entrada aparte.
Como parte de la configuración de Clerk.js, con el tracking-script añadido en todas las páginas, lo que permite 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 a continuación:

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 necesites en tus Designs.

Autenticación HTTP #

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

Esto bloqueará el importador 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 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, generando un error en Data Sync.

A continuación tienes 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 Usuario y Contraseña 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 al importador.

En la mayoría de los casos, simplemente debes permitir la IP del importador para concederle 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 con la que estás trabajando en my.clerk.io.

¿Qué pasa si ya permitiste la IP pero el error persiste?

Si ya permitiste la IP del importador pero el error continúa, revisa lo siguiente:

La parte de autenticación del body puede ser eliminada de la solicitud por el servidor de la tienda.
Límite de velocidad del servidor en relación a Cloudflare.

404 Not Found #

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

Por lo general, sucede porque el plugin está:

No está instalado en absoluto
Desactivado debido a una actualización
Una caché impide que el enlace se inicie
Los enlaces permanentes de WooCommerce están ajustados a Post name en vez de Month and name

Sigue estos pasos de debug para solucionar el error:

Asegúrate de que tienes el Plugin instalado correctamente y que está activado. Si actualizaste el plugin recientemente, WooCommerce a veces lo desactiva. Si esto sucede, ve a Plugins > Clerk y haz clic en Activate.
Vacía la caché de tu tienda antes de intentar una nueva importación.
Si sigue sin sincronizar correctamente, ve al backend de WooCommerce, luego Settings > Permalinks y cambia la opción Common Settings a Month and name y presiona Save Changes:

429 Too Many Requests #

Este error ocurre si tu servidor bloquea el acceso al importador debido a demasiadas solicitudes entrantes.

Puedes solucionarlo de las siguientes formas:

Estableciendo un request limit más alto para tu servidor.
Estableciendo Page Size a un valor mayor en my.clerk.io > Data > Configuration, lo que hace que el importador haga menos solicitudes más grandes.

Si usas el proveedor Byte.nl, normalmente este error se produce por el limitador de velocidad. En este caso, contacta con el soporte de Byte.nl y pídeles que permitan 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 no válido, o una función que se llama de forma incorrecta 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 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 es normalmente temporal y ocurre cuando el servidor está muy ocupado para procesar la solicitud.

Por favor, intenta de nuevo más tarde.

Si el problema persiste, puede 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 #

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

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 ocurrir si el servidor está demasiado ocupado para responder, o si nuestro importador no tiene acceso permitido al servidor.

Espera unos minutos y prueba a sincronizar de nuevo, por si el servidor estaba ocupado.
Si aún no funciona, asegúrate de permitir la IP del importador en la configuración de tu servidor. La IP más reciente puede encontrarse aquí.

Invalid API response #

Este error suele ocurrir si Debugging de WooCommerce ha sido activado.

Nunca es buena idea tenerlo activado en una configuración en vivo, ya que ralentiza las páginas y podría mostrar mensajes de error en el frontend.

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

Esto puede solucionarse desactivando Debugging en wp-config.php configurando 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 otra guía explica una alternativa:

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

Los errores seguirán registrándose aunque no esté activado Debug Mode, pero quedarán guardados en un archivo.

Actualizar a Clerk.js 2 #

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

Facilita la instalación de Clerk en cualquier tienda.

Sin embargo, como las dos versiones funcionan de forma ligeramente diferente, debes 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 pueden fácilmente crearse 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 diferente para los Designs, necesitarás crear nuevos.

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

A continuación se describe cómo convertir tus diseños de código a Liquid.

Opción Design Editor #

Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona un tipo de diseño diferente de Blank y ponle un nombre. Recomendamos añadir “V2” para que quede claro que estás usando diseños de Clerk.js 2.
En el Design Editor, haz clic en cualquiera de los elementos existentes como nombre, imagen, botón, etc. para editarlo, o añade nuevos elementos al diseño.
Haz clic en Publish Design cuando termines y ve a Paso 2 de la guía.
Ve a Recommendations/Search > Elements y cambia tu Clerk Content para que use tu nuevo diseño, luego haz clic en Update Content.
Esto hará que temporalmente no se muestren en tu tienda, hasta que hayas insertado Clerk.js 2 como se describe más abajo en esta guía.

Conversión de diseños #

Como Clerk.js 2 utiliza el 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 añadir “V2” para que quede claro que estás usando diseños Clerk.js 2.
Haz clic en Create Design.
Esto te dará un diseño en blanco con el HTML y CSS del producto que puedes usar.
Vuelve 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 el código fácilmente.
Copia el antiguo diseño Clerk.js 1 a tu nuevo diseño Clerk.js 2.
- Notarás que no hay código de container en el nuevo diseño.
- Esto se debe a que Liquid usa bucles for para mostrar todos los productos.
- Copia tu antiguo HTML de producto dentro del bucle for, tu viejo código de container alrededor y el CSS también.
Convierte el diseño a la sintaxis de Liquid. La principal diferencia es que en los diseños antiguos se usaba la sintaxis {{ formatter attribute }} mientras que en la v2 es {{ product.attribute | formatter }}.
Revisa todos tus atributos y cámbialos al nuevo formato.
Si estás usando sentencias {{#if}} o {{#is}}, estas también deben ser convertidas. Usa la sintaxis {% if product.attribute %} {% else %} {% endif %}.
Elimina id="{{ $id }}" y la clase :target del código container en la versión Clerk.js 2, ya que ya no tienen soporte.
A continuación tienes un ejemplo de un diseño Clerk.js 1 y la versión totalmente convertida:

Diseño Clerk.js 1 #

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

<!-- Este código crea el slider por su ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>

Diseño Clerk.js 2 #

<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 de contenido para que use tu nuevo diseño.
Haz clic en Update Content. Esto hará que temporalmente no se muestre en tu tienda, hasta que termines el Paso 2. Elige el nuevo diseño para todo el contenido que deba ser actualizado.
Finalmente, actualiza el plugin siguiendo esta guía.

Configuración multidioma #

Cuando uses WPML en WooCommerce, deberías poder diferenciar tus idiomas por URL, así:

Si tienes URLs únicas como estas, puedes ampliar el plugin 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 manera más fácil de implementar Clerk en múltiples dominios en configuraciones estándar es creando una Store separada para cada dominio en my.clerk.io.

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

Cuando termines el setup inicial, haz clic en la esquina superior izquierda del menú lateral y luego haz clic en "+ Add new store", la última opción de la lista desplegable (generalmente debajo de la(s) tienda(s) existente(s) y el nombre de tu empresa).

En la página Add New Store, rellena los datos de tu tienda, y elige tu Store principal en Copy Content From Existing Store, después haz clic en Add Store:

Esto copiará el Content y los Designs de tu Store principal. Recuerda traducir los Headlines al idioma correcto.

Instalar y configurar #

El soporte oficial para WPML se ha añadido a la WooCommerce Extension de Clerk, lo que significa que mientras uses esa versión o una más nueva, WPML debe estar soportado.

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

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

Para cambiar de idioma, simplemente utiliza el selector en el panel superior. Debes seleccionar el idioma que deseas configurar para Clerk y determinar tus ajustes. Repite esto para cada idioma.

Ten en cuenta que seleccionar All Languages de este menú desplegable no es recomendable a la hora de guardar tu configuración, ya que solo guardará tus ajustes como valores predeterminados.

Sincronizar dominios #

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

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

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

Integración con Shortcode #

Si utilizas un editor de Shortcodes como Elementor, entonces nuestro snippet de código de recomendación estándar puede que no se muestre debido a que el ID de producto está formateado de manera diferente en Elementor que en un bloque HTML normal.

Si usas Hooks, puedes ir a Appearance -> Custom Layouts -> Insert el shortcode en el Hook correspondiente de Clerk (si lo desea, un desarrollador puede crear estos hooks para 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 solo con corchetes simples y, si 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 estos otros:

<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 después sigue los pasos Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

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

Ve a Appearance > Theme File Editor > WooCommerce > content-single-product.php (o a un archivo similar donde se define el layout de tu página de producto).
Inserta el span de código en la ubicación deseada dentro del archivo para mostrar el slider. Este proceso es similar a realizar 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 lugar de ser renderizadas desde un archivo HTML.

Para añadir contenido a páginas generadas mediante Visual Hooks, deberás insertar el contenido Clerk dentro del archivo functions.php activo del tema de tu tienda.

El archivo functions.php normalmente se encuentra en la siguiente ruta:

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

Ejemplo de página de producto #

Por ejemplo, para añadir un elemento de Recommendations con el Elemento @product-page-alternatives a tu Product Page, deberías incluir el siguiente código dentro de las etiquetas principales <?php ?> en functions.php:

// CLERK AÑADIR SLIDER DE PÁGINA DE PRODUCTO

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 en la página Añadir al carrito:

// CLERK AÑADIR SLIDER AL CARRITO
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 por el código embed que te genera tus Recommendations Elements en my.clerk.io, por ejemplo:

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

Nota: Cuando fijes 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 #

Renderizado doble #

Si encuentras que Powerstep se muestra dos veces, tendrás que dividir la página para solucionarlo.

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

No se renderiza #

Si Powerstep aun así no aparece, es posible que debas desactivar el ajuste de WooCommerce Cart Redirect.

Para hacerlo, sigue estos pasos:

Ve a WooCommerce > Settings > Products y localiza Add to cart behaviour.
Asegúrate de que ambas casillas estén desmarcadas.
Haz clic en Save changes en la parte inferior 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.