Skip to content

Instalación de EC Store en WordPress ​

Siga estos pasos para instalar EC Store en su sitio de WordPress.

Instale un plugin de inserción de scripts ​

Para agregar scripts personalizados a su sitio de WordPress, le recomendamos usar el plugin gratuito WPCode - Insert Headers & Footers.

Agregue el script ​

En la barra lateral izquierda de su panel de WordPress:

  1. Vaya a Code Snippets → Header and Footer.
  2. Pegue el siguiente script en la sección Scripts in Body:
html
<script src="https://d1vc0si56f5gt.cloudfront.net/ff-plugin.umd.min.js"></script>

Advertencia

⚠️ No coloque el script en la sección Header. Debe ir en la sección Body para garantizar una carga correcta.

¿Cómo se ve?

Sección Header and Footer de WPCode

Ver más información

Al usar el plugin Insert Headers and Footers, el script se agregará de forma global, es decir, se cargará en todas las páginas de su sitio.

Si prefiere cargar el script solo en páginas específicas, puede usar su propio método de inserción de scripts. De hecho, lo recomendamos cuando sea posible para reducir la carga innecesaria de recursos en las páginas donde no se necesita el plugin.

Cree la página de su tienda ​

  1. Desde su panel de WordPress, vaya a Pages -> Add New (Páginas -> Añadir nueva).
  2. Cree una nueva página en blanco. La mayoría de los temas ofrecen una plantilla "Full Width" (ancho completo) o "Blank Canvas" (lienzo en blanco); elija una que evite barras laterales, formularios o elementos de navegación que puedan interferir con el plugin.
  3. Asigne a la página el nombre que desee. Algunas opciones comunes son:
  • Shop
  • Shop Filters
  • Buy Filters
  • Order Air Filters

Esta página funcionará como la tienda donde los clientes interactúan con EC Store.

Agregue el plugin a la página ​

Una vez creada la página:

  1. Haga clic para editar la página.
  2. Agregue un bloque de HTML personalizado (Custom HTML).
  3. Pegue el siguiente código:
html
<ff-plugin></ff-plugin>

Consejo

💡 Puede agregar relleno (padding) o estilos adicionales alrededor del elemento personalizado mediante CSS en línea o la configuración de bloques de WordPress, según su tema.

Paso final: publique sus cambios ​

Una vez que todo esté listo, verá una alerta titulada Your Almost There! (¡Ya casi termina!).

¿Cómo se ve la alerta?

Ya casi termina

Asegúrese de publicar o actualizar la página para que esté en línea y sea de acceso público.

Advertencia

⚠️ Asegúrese de que la página esté en línea antes de seleccionar el botón Let Us Know (Avísenos), ya que nuestro equipo necesitará poder acceder a la página.

Una vez publicada, haga clic en el botón Let Us Know. ¡Nuestro equipo pondrá su EC Store en funcionamiento lo antes posible!

Consejo

🚀 Una vez instalada y publicada, ¡ya puede empezar a atraer tráfico a la página de su tienda y comenzar a vender!

Solución de problemas ​

Un problema muy común en este proceso de instalación es la interferencia de varios plugins de caché populares de WordPress, como:

Estas herramientas pueden modificar la etiqueta script, aplazar la ejecución de JavaScript, mostrar versiones en caché del HTML de su página o aplicar optimizaciones que impiden que el plugin se inicialice correctamente.

Algunos síntomas que podría observar: ​

  • El plugin no aparece hasta que se interactúa con la página (tocar o desplazarse).
  • El plugin muestra un mensaje de error y los productos no se cargan.
  • La página se ve vacía o dañada cuando se abre mediante un código QR o un enlace externo, por ejemplo, desde un correo de confirmación.
  • Los estilos o la interactividad se sienten "retrasados" o no aparecen.

Solución recomendada ​

Le recomendamos encarecidamente excluir su página "Shop" de eContractor de todas las reglas de caché y optimización de su plugin de caché.

Consulte la documentación de cada plugin para obtener información sobre cómo hacerlo.

En W3 Total Cache, vaya a Performance -> Page Cache -> Advanced y luego agregue la ruta de su página Shop en Never Cache the Following Pages (No almacenar nunca en caché las siguientes páginas).

Por ejemplo, si su página Shop se abre en:

txt
https://example.com/filter-store/#/products

debería agregar esta ruta:

txt
/filter-store/

No incluya #/products. Esa parte pertenece al plugin de EC Store después de que se carga la página de WordPress. La página de WordPress que debe excluirse de la caché corresponde a la ruta antes del #.

Si utiliza otras funciones de optimización de W3 Total Cache, excluya también la misma página de esas optimizaciones. Esto incluye la configuración de JavaScript, CSS, minificación, aplazamiento (defer), retraso (delay) u otras optimizaciones similares.

¿Aún necesita ayuda? ​

Algunos temas de WordPress, especialmente los muy personalizados o las versiones más antiguas, pueden comportarse de forma impredecible al agregar HTML o scripts personalizados.

Si tiene dudas sobre alguno de los pasos anteriores, no dude en comunicarse con nuestro equipo de soporte.

Con gusto le ayudaremos con la integración o responderemos cualquier pregunta que no esté cubierta en la documentación.