Woocommerce

FAQ

Instalación manual de elementos #

WooCommerce se basa en temas, lo que a menudo significa que el plugin Clerk.io no puede insertar nuestros códigos de inserción, porque los ganchos no están colocados en posiciones estándar.

Sigue estos pasos para insertar códigos manualmente si ese es el caso.

  1. Comienza localizando tu formulario de búsqueda. Puedes hacer esto inspeccionando tu sitio web y encontrando un texto único para el campo.

  1. Abre los archivos FTP de tu tienda web y localiza public\_html > wp-content > themes

  2. Arrastra la carpeta de temas a tu escritorio para copiarla a tu computadora. Esto te permitirá buscar en el archivo.

  3. En tu software de edición de código preferido, abre la carpeta, por ejemplo, en Sublime: Project > Add Folder to Project.

  4. Elige la carpeta de temas que guardaste en tu computadora durante el paso 3.

  5. Ahora puedes buscar en los archivos. Incluso puedes optar por buscar solo en archivos .php, que es normalmente el tipo de archivo utilizado para archivos de temas en WooCommerce.

2. Hacer que el enlace a la página de búsqueda funcione #

Si ya has seguido la guía para configurar la búsqueda y has creado una página en WooCommerce para los Resultados de Búsqueda, pero tu campo de búsqueda no está vinculando correctamente, esto es lo que necesitas hacer.

1. Comienza mirando la tienda web en tu navegador. Recomendamos usar Chrome.

2. Localiza cualquier HTML que parezca ser único para el campo de búsqueda. Por ejemplo, searchform:

3. Busca esto en Sublime, para encontrar una lista de archivos en los que está:

4. Encuentra el archivo correspondiente en FTP.

5. Ahora puedes cambiar la configuración necesaria para que Clerk.io enlace a la página correcta. Las 3 cosas que necesitas cambiar son:

  • La URL a la que el cliente está vinculado, que a menudo se encuentra en el elemento

    , necesita ser cambiada para coincidir con el nombre de la página que creaste en WooCommerce. Esto será a menudo “soegeresultater” o “search-results”

  • El atributo “name” del campo de entrada, que necesita ser searchterm

  • El campo de entrada oculto con name=“post_type” necesita ser comentado.

6. Un formulario de búsqueda podría verse así antes de cambiarlo:

7. Y debería verse así después del cambio:

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

Usando formateadores en diseños #

Clerk.js te permite escribir funciones de javascript personalizadas, que añaden nueva funcionalidad a los Diseños.

Los formateadores se pueden añadir de dos maneras:

  • A través de my.clerk.io > Settings > Formatters, donde cada formateador se crea como una entrada separada.
  • Como parte de la configuración de Clerk.js, con el script de seguimiento añadido a todas las páginas, permitiendo que se definan múltiples formateadores a la vez.

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

Un ejemplo se puede ver a continuación:

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

Puedes escribir cualquier número de Formateadores, separados por comas:

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;
   }
}

Después de crear tus Formateadores, puedes usarlos en tus Diseños usando esta sintaxis:

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

Esto te permite crear cualquier funcionalidad en tus Diseños que necesites.

Sincronización con HTTP Auth #

A menudo se utiliza la autenticación HTTP en sitios de staging para evitar visitantes no invitados.

Esto bloqueará el importador de Clerk también y mostrará un error de 401 No autorizado en el registro de sincronización.

Puedes verificar fácilmente el importador insertando la información de autenticación en la URL de importación como a continuación, en Sincronización de Datos en my.clerk.io:

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

Problemas comunes de sincronización #

Nota: Te aconsejamos que siempre actualices el plugin a la última versión para obtener todas las funciones actualizadas de Clerk.

Al importar datos con el Plugin de Clerk.io para WooCommerce, el servidor de la tienda web es responsable de enviar los datos de producto, categoría y pedido a Clerk.io.

Sin embargo, en algunos casos, la configuración del servidor puede detener la importación de obtener acceso, causando un error en Sincronización de Datos.

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

Error 401 del servidor: No autorizado #

Este error ocurre si tu entorno de tienda web/desarrollo requiere autenticación HTTP para acceder a él.

Esto se soluciona simplemente insertando el Nombre de usuario y Contraseña como parte de la URL de importación:

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

Error 403 del servidor: Prohibido #

Este error ocurre si tu servidor bloquea al importador de acceder a él. En la mayoría de los casos, simplemente necesitas agregar a la lista blanca la dirección IP del importador para darle acceso.

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

Además, asegúrate de que la Clave pública, Clave privada y URL de importación sean correctas para la tienda en la que estás operando en my.clerk.io.

¿Qué pasa si ya he agregado a la lista blanca pero el mismo error sigue ocurriendo?

Si has agregado a la lista blanca la dirección IP del importador pero el error persiste, te recomendamos verificar lo siguiente:

  • La parte de autenticación del cuerpo puede ser eliminada de la solicitud del servidor de la tienda.
  • Límite de tasa para el servidor en relación con cloudflares.

Error 404 del servidor: No encontrado #

Este error ocurre si el importador no pudo acceder al enlace que nos envía datos de la tienda web. 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 enlaces permanentes de WooCommerce están configurados como Nombre de publicación en lugar de Mes y nombre

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

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

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

  3. Si aún no se sincroniza correctamente, ve a tu backend de WooCommerce, luego Settings > Permalinks y cambia la Configuración común a Mes y nombre y presiona Guardar cambios:

Error 429 del servidor: Demasiadas solicitudes #

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

Puedes solucionar esto de dos maneras:

  • Aumentando el límite de solicitudes para tu servidor.
  • Estableciendo el Tamaño de página a un valor más alto en my.clerk.io > System Status > Data Sync, haciendo que el importador realice menos solicitudes, pero más grandes.

Si estás utilizando el proveedor de hosting Byte.nl, el importador generalmente devuelve este error debido a su limitador de tasa. En este caso, simplemente contacta al soporte de Byte.nl y pídeles que agreguen a la lista blanca el User-Agent del importador “clerk”.

Error 500 del servidor: Error interno del servidor #

Este error significa que tu servidor encontró un error interno y no pudo especificar qué error ocurrió.

En estos casos, puedes verificar tu Registro del servidor para identificar qué proceso falló y por qué. En la mayoría de los casos, es simplemente debido a un producto con un atributo no válido, o una función que se llama incorrectamente en la tienda web.

Un ejemplo de tal error podría ocurrir una vez que actualices tanto WooCommerce como Klarna. En este caso, el problema es creado por el plugin ‘woocommerce-gateway-klarna’ que no se actualiza.

Si esto 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 ) {

Error 503 del servidor: Servicio no disponible #

Este error es típicamente temporal y ocurre cuando el servidor está demasiado ocupado para procesar la solicitud. Por favor, intenta nuevamente más tarde.

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

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

Error 520 El servidor web devolvió un error desconocido #

Generalmente, este error es devuelto por CloudFlare, y a menudo ocurre debido a un cuello de botella en WooCommerce que causa problemas con tamaños de página más altos.

Para solucionarlo, simplemente establece tu Tamaño de página en 50 en my.clerk.io > System Status > Data Sync y ejecuta una nueva Sincronización de Datos.

Error 522 del servidor: Tiempo de conexión agotado #

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

  1. Espera unos minutos y vuelve a intentar la sincronización, para ver si el servidor estaba ocupado.
  2. Si aún no funciona, asegúrate de agregar a la lista blanca la IP del importador en la configuración de tu servidor. La última dirección IP se puede encontrar aquí.

Respuesta inválida devuelta de la API de WooCommerce #

Este error generalmente ocurre si se ha activado la Depuración de WooCommerce. Esto nunca es una buena idea tener activado en una configuración 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 del producto para la importación.

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

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

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

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

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

Los errores seguirán siendo registrados incluso cuando no esté en Modo de Depuración, pero se registrarán en un archivo en su lugar.

Actualiza a Clerk.js 2 #

Clerk.js 2 es una versión más rápida y flexible de nuestra biblioteca JavaScript que facilita la instalación de Clerk.io en cualquier tienda web.

Sin embargo, dado que las dos versiones funcionan de manera ligeramente diferente, debes seguir estos pasos para actualizar con éxito.

Las dos principales diferencias en Clerk.js 2 son:

  • Los Diseños en my.clerk.io utilizan el Liquid, pero también se pueden crear fácilmente utilizando el Editor de Diseño.

  • El script debe insertarse justo antes de la etiqueta en la plantilla de tu tienda web.

Crear Diseños #

Dado que Clerk.js 2 tiene un enfoque diferente para los Diseños, necesitas crear nuevos.

Puedes crear tus Diseños de Clerk.js 2 ya sea rehaciendo en el Editor de Diseño, o convirtiendo tus antiguos códigos de Diseños a Liquid, lo cual la guía a continuación explica cómo hacerlo. A continuación se describe cómo convertir tus antiguos códigos de Diseños a Liquid.

Opción 1: Diseños del Editor de Diseño #

  1. Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
  2. Selecciona un tipo de diseño diferente a Blank y dale un nombre. Recomendamos agregar “V2” para que sea obvio que estás utilizando diseños de Clerk.js 2 para esto.
  3. En el Editor de Diseño, haz clic en cualquiera de los elementos existentes como el nombre, imagen, botón, etc. para editarlo, o agrega nuevos elementos al Diseño.
  4. Haz clic en Publicar Diseño cuando hayas terminado, y ve al Paso 2 en la guía.
  5. Por último, ve a Recommendations/Search > Content y cambia tu contenido de Clerk.io para usar tu nuevo Diseño, luego haz clic en Update Content.
  6. Esto hará que temporalmente no se muestren en tu tienda web, hasta que hayas insertado Clerk.js 2 como se describe más adelante en esta guía.

Opción 2: Convertir Diseños #

Dado que Clerk.js 2 utiliza el más flexible lenguaje de plantillas Liquid, necesitas convertir los Diseños a este lenguaje.

  1. Comienza yendo a my.clerk.io >Recommendations/Search > Designs > New Design.
  2. Selecciona Blank > Code y dale un nombre. Recomendamos agregar “V2” para que sea obvio que estás utilizando diseños de Clerk.js 2 para esto.
  3. Haz clic en Crear Diseño.
  4. Esto te dará un diseño en blanco con HTML y CSS de Producto que puedes usar.
  5. Regresa a la vista general del diseño y haz clic en Editar Diseño para tu Diseño de Clerk.js 1. Recomendamos hacer esto en una nueva pestaña para que puedas copiar fácilmente el código.
  6. Ahora necesitas copiar el antiguo Diseño de Clerk.js 1 a tu nuevo Diseño de Clerk.js 2.
    • Notarás que no hay Código de Contenedor en tu nuevo.
    • Esto se debe a que Liquid utiliza bucles for para renderizar todos los productos.
    • Copia tu antiguo HTML de Producto dentro del bucle for, tu antiguo Código de Contenedor alrededor de él y copia también el CSS.
  7. Convierte el Diseño a la sintaxis de Liquid. La principal diferencia es que los antiguos Diseños utilizaban la sintaxis {{ formatter attribute }} mientras que la sintaxis de v2 es {{ product.attribute | formatter }}.
  8. Revisa todos tus atributos y cámbialos al nuevo formato.
  9. Si estás utilizando declaraciones {{#if}} o {{#is}}, estas también deben ser convertidas. Usa la sintaxis {% if product.attribute %} {% else %} {% endif %}.
  10. Elimina id="{{ $id }}" y la clase :target del código del contenedor en la versión de Clerk.js 2 ya que ya no son compatibles.
  11. A continuación se muestra un ejemplo de un diseño de Clerk.js 1, y la versión completamente convertida:
Diseño de Clerk.js 1 #
// HTML del Producto
<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>Precio {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Precio {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Precio {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Comprar ahora</div>
</li>

// Código de Contenedor
<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 de 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>Precio {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Precio {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Precio {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Comprar ahora</div>
        </a>
    </li>
    {% endfor %}
</ul>
  1. Ahora haz clic en Actualizar Diseño para guardar los cambios.
  2. Por último, ve a Recommendations/Search > Content y cambia tu bloque de Contenido para usar tu nuevo Diseño.
  3. Haz clic en Actualizar Contenido. Esto hará que temporalmente no se muestren en tu tienda web, hasta que termines con Paso 2. Elige el nuevo Diseño para todo el Contenido que deba ser actualizado.
  4. Finalmente, actualiza el plugin, siguiendo esta guía.

Multi-idioma #

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

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

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

Copiar tienda #

La forma más fácil de implementar Clerk.io en múltiples dominios en configuraciones estándar es creando una tienda separada para cada dominio en my.clerk.io. De esta manera, puedes separar productos, ventas, monedas, etc., para hacer un seguimiento de cada dominio.

Después de que hayas terminado con la configuración inicial, haz clic en la esquina superior izquierda del menú lateral y luego haz clic en "+ Agregar nueva tienda" la última opción de la lista desplegable (generalmente debajo de las tiendas existentes y tu nombre de empresa).

En la página Agregar Nueva Tienda, completa los detalles de tu tienda web y elige tu Tienda principal del menú desplegable Copiar contenido de la tienda existente, luego haz clic en Agregar tienda:

Esto trasladará el Contenido y los Diseños de tu Tienda principal. Recuerda traducir Titulares al idioma correcto también.

Instalar y configurar #

Se ha añadido soporte oficial para WPML a la Extensión de WooCommerce de Clerk.io, lo que significa que mientras uses esa versión o una más nueva, WPML debería ser compatible.

En el panel de configuración de WooCommerce verás los ajustes como de costumbre. Si WPML está activo y configurado en tu sitio de WordPress, verás Alcance de múltiples idiomas con el idioma actual hacia la parte superior de la página de configuración.

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

Ten en cuenta que seleccionar Todos los idiomas de este menú desplegable no se recomienda, al guardar tu configuración, ya que solo guardará tus ajustes como una opción de respaldo.

Sincroniza tus dominios #

Una vez que 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 omitir el primer paso y comenzar a configurarlo y sincronizar datos.

Cuando la Sincronización haya terminado, tu dominio estará listo y utilizando la misma configuración que tu Tienda principal.

Insertar usando shortcodes #

Integración de Shortcode #

Si estás utilizando un editor de Shortcode como Elementor, entonces nuestro fragmento de código de recomendación regular puede no estar renderizándose debido a que el ID del producto se está sintaxis de manera diferente en Elementor que en un bloque HTML normal.

Si estás utilizando Hooks, entonces puedes ir a Appearance -> Custom Layouts -> Insert el shortcode en el Hook que pertenece a Clerk (en caso de que, un desarrollador puede crear estos si quiere que Clerk sea un Hook).

Para insertar el código, reemplaza:

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

Con:

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

Intenta primero con solo corchetes simples, y luego, si eso no funciona, con corchetes dobles:

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

Si este no funciona, puedes intentar 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 de código #

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

Constructor WP Baker #

Integración de archivo de tema: Agregar un slider de página de producto a todas las páginas

  1. Navega a Appearance > Theme File Editor > WooCommerce > content-single-product.php (o un archivo similar donde se define el diseño 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 a través de 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>

Agregar recomendaciones con Hooks visuales #

Dentro de WooCommerce, ciertas páginas web se crean utilizando Hooks Visuales en lugar de ser renderizadas desde un archivo HTML. Para agregar contenido a páginas creadas a través de Hooks Visuales, necesitarás insertar el contenido de Clerk.io dentro del archivo functions.php activo de la tienda web.

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

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

Por ejemplo, para agregar un slider de Recomendaciones con el Contenido @product-page-alternatives a tu Página de Producto, incluirías el siguiente código dentro de las etiquetas principales <php? ?> en functions.php:

// CLERK AGREGAR 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>";
}

Y, otro ejemplo para agregar un slider de Recomendaciones a la Página de Agregar al Carrito:

// CLERK AGREGAR SLIDER DE 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 agregar tus propios sliders de Recomendaciones a las páginas anteriores, recuerda reemplazar el código dentro de las etiquetas con el código de inserción proporcionado en tu Contenido de Recomendaciones en my.clerk.io, como a continuación:

El valor establecido en add_action(), 5 en este ejemplo, le dice a WooCommerce la prioridad del Contenido que se está agregando, lo que a su vez influye en qué tan temprano se mostrará el Contenido en ese Hook Visual. Nota: Al establecer la prioridad, WooCommerce solo acepta múltiplos de 5.

Más información sobre las páginas web de WooCommerce que utilizan Hooks Visuales:

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

Problemas de Powerstep #

Powerstep se renderiza dos veces #

Si te encuentras con un problema donde el 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 Páginas.
  2. Elige Shortcodes en la esquina superior derecha, y luego haz clic en Row / Columns.
  3. A continuación, haz clic en “OK” en el pop-up que aparece.
  4. Finalmente, mueve [clerk-powerstep] dentro de las etiquetas [row] [col] y [/row] [/col], y haz clic en Save.

Powerstep no se renderiza #

Si el Powerstep aún no se muestra, es posible que debas desactivar la configuración de Redirección del Carrito de WooCommerce.

Para hacer esto, 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.

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