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 no ser capaz de insertar automáticamente los códigos de embed.

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

Localizar el 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 en tu computadora.

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 temas de WooCommerce.

Corregir los enlaces de búsqueda #

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

Comienza visualizando tu tienda en tu navegador. Recomendamos usar Chrome.

Localiza el HTML que identifica el campo de búsqueda, como searchform.

Busca ese identificador en tu editor para encontrar los archivos que lo contienen.

Encuentra el archivo correspondiente en FTP.

Actualizar la configuración del formulario #

Ahora puedes cambiar los ajustes para que Clerk enlace a la página correcta.

Necesitas cambiar tres cosas:

  • La URL a la que se enlaza a los clientes, que a menudo se encuentra en el elemento <form>, debe coincidir con el nombre de la página que creaste en WooCommerce. Esto será comúnmente "soegeresultater" o "search-results".

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

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

Actualiza el formulario de búsqueda usando los tres cambios anteriores.

Ahora deberías estar enlazando a la página de resultados al buscar: www.mywebshop.com/soegeresultater?searchterm=test.

Uso de formatters #

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

Los formatters se pueden añadir de dos maneras:

  • A través de my.clerk.io > Developers > Formatters, donde cada formatter se crea como una entrada por separado.

  • Como parte de la configuración de Clerk.js, con el tracking-script agregado a todas las páginas, permitiendo definir varios formatters a la vez.

En WooCommerce, el script de seguimiento está ubicado 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);
    }
  }
});

Formatters múltiples #

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

Autenticación HTTP #

La autenticación HTTP se utiliza a menudo en entornos de pruebas 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 siempre actualizar el plugin a la última versión para obtener todas las funcionalidades más recientes 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 podría bloquear el acceso de la importación a los datos, provocando un error en Data Sync.

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

401 Unauthorized #

Este error sucede 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 permitir la IP del importador para darle acceso.

La última dirección IP se puede encontrar aquí.

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

¿Qué pasa si ya he permitido la IP pero sigue ocurriendo el error?

Si ya has permitido la IP del importador pero el error persiste, verifica lo siguiente:

  • Es posible que la parte de autenticación del body se elimine de la solicitud desde el servidor de la tienda.

  • Límite de solicitudes del servidor respecto a 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 la web realmente lo usa, intenta agregar www. a la Store URL en tu configuración de Clerk.io. Por ejemplo, usa https://www.yourdomain.com en vez de https://yourdomain.com.

404 Not Found #

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

En la mayoría de los casos, sucede porque el plugin:

  • No está instalado

  • Está desactivado por una actualización

  • Un caché hace que el enlace no se inicialice

  • Los permalinks de WooCommerce están configurados como Post name en lugar de Month and name

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

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

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

  3. Si aún no sincroniza correctamente, abre Settings > Permalinks en WooCommerce, configura Common Settings a Month and name, y haz clic en Save Changes.

429 Too Many Requests #

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

Puedes resolverlo ya sea:

  • Aumentando el límite de solicitudes en tu servidor.

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

Si usas el proveedor Byte.nl, el importador generalmente devuelve este error debido a su limitador de tasa. En este caso, contacta 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 casos, simplemente es por un producto con un atributo inválido o una función que se llama incorrectamente en la tienda.

Un ejemplo de este error 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 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, 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 #

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

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

522 Connection Timed Out #

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

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

  2. Si aún no funciona, asegúrate de permitir la IP del importador en tu configuración del servidor. La dirección IP más reciente se puede encontrar aquí.

Invalid API response #

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

Esto nunca es recomendable 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 productos para la importación.

Esto puede resolverse desactivando el Debugging 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 explica una solución alternativa:

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

Los errores seguirán registrándose incluso si no está en modo Debug, pero se guardará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 de JavaScript.

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

Sin embargo, como las dos versiones funcionan de manera algo 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 también se pueden crear fácilmente utilizando 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 con los Designs, debes crear nuevos.

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

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

Opción Editor de Diseños #

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

  2. Selecciona un tipo de diseño distinto de Blank y asígnale un nombre. Recomendamos agregar “V2” para dejar claro que usas diseños Clerk.js 2.

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

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

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

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

Conversión de diseños #

Como Clerk.js 2 usa el lenguaje de plantillas más flexible Liquid, debes convertir los diseños a este lenguaje.

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

  2. Selecciona Blank > Code y asígnale un nombre. Recomendamos agregar “V2” para indicar que es para Clerk.js 2.

  3. Haz clic en Create Design.

  4. Esto te dará un diseño en blanco con HTML del producto y CSS listo para usar.

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

  6. Copia el diseño antiguo de Clerk.js 1 a tu nuevo diseño de Clerk.js 2.

    • Notarás que no hay Container Code en el nuevo.

    • 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.

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

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

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

  10. Elimina id="{{ $id }}" y la clase :target del container code en Clerk.js 2, ya que ya no se soportan.

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

<!-- This code creates the slider by its 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>

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

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

  3. Haz clic en Update Element. Esto hará que no se muestre temporalmente en tu tienda, hasta que completes el Paso 2. Elige el nuevo Design para todos los Elements que debas actualizar.

  4. Por último, actualiza el plugin siguiendo esta guía.

Configuración multilenguaje #

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

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

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

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. y mantener el control de cada dominio.

Después de terminar la configuración inicial, haz clic en la esquina superior izquierda del menú lateral y luego en "+ Add new store" (opción al final de la lista desplegable, generalmente debajo de la(s) tienda(s) existente(s) y tu nombre de empresa).

En la página Add New Store, introduce los detalles de tu tienda, selecciona la tienda principal en Copy Elements From Existing Store, y haz clic en Add Store.

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

Instalar y configurar #

El soporte oficial para WPML se ha añadido a la extensión WooCommerce de Clerk, lo que implica 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 los ajustes normalmente.

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 usa el selector en el panel superior. Selecciona el idioma para el que deseas configurar Clerk y provee los ajustes deseados. Repite para cada idioma.

Ten en cuenta que seleccionar All Languages del menú desplegable no se recomienda al guardar la configuración, ya que solo sirve como respaldo.

Sincronizar dominios #

Una vez que hayas extendido el plugin, ya puedes sincronizar cada tienda con su dominio de idioma.

Como ya has instalado la extensión, puedes saltarte el primer paso y empezar directamente a configurarla 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 Shortcode #

Si usas un editor de Shortcode como Elementor, nuestro fragmento de código de recomendación regular puede no mostrarse debido a que el ID del producto tiene una sintaxis 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 a Clerk (en caso de que un desarrollador pueda crear estos si quiere 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 luego, si no funciona, con doble corchete:

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

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

WP Bakery Builder #

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

  1. Ve 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).

  2. Inserta el código de span en el sitio deseado dentro del archivo para mostrar el slider. Es similar a hacer cambios vía 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, algunas páginas se crean usando Visual Hooks en vez de renderizarse desde un archivo HTML.

Para añadir contenido a páginas creadas mediante Visual Hooks, necesitas insertar el contenido de Clerk dentro del archivo functions.php activo 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 Element @product-page-alternatives a tu página de producto, deberías 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 de página de carrito #

Y otro ejemplo para añadir 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 usar tus propios Recommendation Elements en estas páginas, reemplaza los bloques <span> de ejemplo con los códigos de embed de tus Elements en my.clerk.io.

El valor establecido en add_action(), 5 en este ejemplo, indica a WooCommerce la prioridad del Element agregado, lo que influye en lo temprano que se mostrará el Element en ese Visual Hook.

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

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

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

Problemas con Powerstep #

Renderizado doble #

Si tienes el problema de que Powerstep se muestra dos veces, tendrás que 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 haz clic en Row / Columns.

  3. Luego haz clic en “OK” en el pop-up que aparecerá.

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

No se renderiza #

Si Powerstep aún no se muestra, quizás debas desactivar el ajuste de Redirección del Carrito de WooCommerce.

Para ello, 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 abajo 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.