Imaxel Editor – plugin para Woocommerce

¿Cómo funciona nuestra solución?

¿Cómo funciona el plugin?

Nuestro plugin  de Woocomerce permite la personalización de productos por parte del consumidor y se integra en el flujo de compra natural de Woocomerce aprovechando al máximo sus funcionalidades.

El plugin, sustituye el botón Añadir al Carrito nativo de Woocomerce:

Una vez el consumidor hace clic en el botón, accede a la personalización del producto, que previamente el comercio ha configurado según sus necesidades:

En la misma pantalla de edición, el consumidor realiza su personalización y, una vez finalizada, tiene dos opciones:

• Guardar
  Este botón almacena el diseño almacenado por el cliente.
  • Si el cliente se ha registrado previamente y esta autenticado en Woocomerce, el diseño se vinculará en su sección Mi Cuenta
    
    
  • Si el cliente no esta autenticado, el editor le informa que debe autenticarse/registrarse:
    
    En caso de desearlo se le conducirá a la página de registro de Woocommerce
    
    
    
• Añadir a la cesta
  Este botón devuelve al usuario a la cesta de la compra de Woocommerce (y también guarda una versión del diseño que se vincula en la sección Mi Cuenta del consumidor en caso que éste este previamente autenticado)

Una vez en la cesta de la compra, el resto del proceso sigue en el flujo de compra natural de Woocommerce.

Instalación del plugin

Antes de proceder a la instalación, cabe recordar las recomendaciones generales en la instalación de un nuevo plugin en WordPress de forma segura, sigue estas recomendaciones clave:

• Realiza una copia de seguridad completa. Antes de hacer cualquier cambio, asegúrate de tener una copia de seguridad reciente de tu sitio web (archivos y base de datos).

• Comprueba la compatibilidad. Verifica que el plugin sea compatible con tu versión de WordPress y con la versión de PHP de tu servidor.
  El plugin de Imaxel es compatible con las últimas versiones tanto de WordPress como de PHP.

• Usa un entorno de pruebas. Si tienes un sitio en producción, prueba el plugin primero en un entorno de desarrollo o staging para evitar conflictos o errores en vivo.

• Desactiva el caché temporalmente. Antes de instalar, desactiva plugins de caché para asegurarte de que los cambios se reflejen de inmediato y puedas detectar cualquier problema.

Para instalar el plugin debes descargarlo del siguiente enlace:

Descargar plugin Imaxel Editors para Woocommerce

Y subirlo a tu site desde el WP-Admin

Una vez instalado, nos aparecerá lo siguiente:

Configuración del plugin

El siguiente paso es configurar el plugin con la clave de licencia que nos ha proporcionado Imaxel.

Para ello, accederemos al la sección Imaxel-Dashboard del menú lateral e ingresaremos la clave de licencia.

A continuación, debemos importar las plantillas de productos al entorno del Woocommerce pulsando el siguiente botón:

Una vez hecho se nos informará del número de plantillas importadas:

¿Cómo se crean nuevas plantillas?

Con la instalación te viene un listado de plantillas de productos predeterminados, pero tienes la posibilidad de crear tantos como desees. Para tener más información sobre qué es y como crear plantillas de productos, consulta este articulo.

¡IMPORTANTE! Cada vez que registramos nuevas plantillas en nuestro gestor de plantillas, debemos volver a esta sección y actualizar la lista de plantillas de productos mediante este botón. Solo asi estas nuevas plantillas de productos estarán disponibles en el plugin y podrán vincularse en Woocommerce.

Vincular productos de Woocommerce

El primer paso es crear los productos en Woocommerce. Este es un proceso nativo de Woocommerce .
A continuación, vincularemos el producto que nos interese a las plantillas de productos de Imaxel.

Accedemos a la edición del producto y vamos a la sección Datos del producto donde veremos una nueva pestaña llamada Imaxel.

Esta pestaña, tiene una casilla de verificación que activa o desactiva la vinculación de este producto de woocomerce con una plantilla de producto de Imaxel:

Y debajo presenta una cajita para Filtrar la plantilla deseada o bien podemos usar el desplegable para buscarla.
El último paso tan solo será guardar los cambios y el producto quedará vinculado.

Una vez hecho esto, en el frontal se observará que ya no aparece el botón «Añadir al carrito» del woocommerce si no el «Crear ahora«, que es el que enlaza con nuestro editor:

Cuando el cliente selecciona pulsa el botón, se lanza una llamada para cargar el formulario con los pasos previamente definidos que permite al cliente personalizar el producto y enviarlo al carrito para finalizar su pedido.

Para más información sobre la gestión de precios entre Woocommerce y el editor, consulta este artículo.

Precio de producto

El precio del producto tiene que estar dado de alta en el Backoffice de productos de Imaxel y es el propio plugin quien calcula el precio en el pedido del cliente.

Sin embargo, para que en nuestra página Web este producto aparezca con un precio visible para el cliente deberemos de asignar un precio a nuestro producto en el woocommerce, ya que si no este lo mostrará por defecto como gratuito.

Como crear un producto con variaciones

Las plantillas de producto de Imaxel permiten ser creados con distintas variantes del producto, al dar de alta un nuevo producto en Woocommerce podemos mostrar estas variantes para que el cliente seleccione una de ellas en la página Web, y en el momento editar solo le aparezca la variante seleccionada.

Para crear estas variaciones en un producto de Woocommerce, el primer paso es vincular esta plantilla con una plantilla de producto de Imaxel tal como hemos visto anteriormente, y a continuación seguir los siguientes pasos:

1. Crear atributos

En el apartado atributos de los datos del producto daremos de alta un atributo al que pondremos un nombre, añadiremos los distintos atributos (estos valores tienen que estar separados con el carácter “|” ), marcaremos la casilla Usado para variaciones y clicamos en Guardar atributos.

2. Crear Variaciones

En el apartado variaciones de los datos del producto tendremos que añadir una variación seleccionando la opción “Crear variaciones para todos los atributos” y clicamos en Ir.

En el momento de crear las variaciones nos mostrará un mensaje de las variaciones de los atributos que se van a generar, aceptamos y aparecerán las variaciones creadas.

Una vez se han añadidas variaciones, tendremos que editar cada una de ellas para poner un precio base, vincularlas a cada variante de la plantilla y guardar los cambios.

El último paso es Actualizar el producto para que todos estos cambios se reflejen en nuestra Web.

En el frontal de la web aparecerán las variaciones de woocomerce y cada una de ella enlazará con la variación de la plantilla de producto que hayamos seleccionado:

Opciones para el administrador de la página

En el WPadmin tenemos las distintas pantallas de administración del plugin:

Dashboard

De esta sección destacaremos estos apartados:

Licencia

Aquí introduciremos la clave de la licencia del plugin (API key)

Configuración

• • Modo invitado
    Activando esta opción se permitirá hacer pedidos a aquellos usuarios que no tengan una cuenta previamente creada en Woocomerce. Se recomienda que este siempre activada.
    
    
  • Establecer el número de copias como la cantidad del artículo para paquetes de impresión o productos tipo polaroid
    Cuando tenemos una plantilla de copias o polaroid, el total de la cantidad de la linea del carrito puede ser de unidad (contabilizando todas las copias como una de sola) o bien indicando en el carrito el total de copias solicitadas. Se recomienda que este siempre activada.
    Por ejemplo, teniendo la casilla activada:
    

    

    

    
    Teniendo la casilla desactivada

    

    

    Esta opción únicamente aplica con los editores Packs de copias y Polaroid y en ningún caso modifica el precio de los artículos, tan solo la visualización del mismo
  • Los precios del editor incluyen impuestos.
    Activa esta opción si los precios del editor de Imaxel ya incluyen los impuestos. El plugin calculará el precio base para que WooCommerce pueda añadir los impuestos correctamente.
    
    Ejemplo: Woocomerce configurado para aplicar un 21% de impuestos sobre la base:
    En la sección Woocommerce ¹ – Settings ² – Tax ³ – Tax Options ⁴
    Configuraremos que introduciremos el precio en la ficha del producto de woocommerce ⁵ sin incluir los impuestos
    
    
    En la sección Woocommerce ¹ – Settings ² – Tax ³ – Tax Options ⁴  configuraremos el nombre (IVA) y el valor del impuesto (21%)
    
    
    Con lo cual, para un producto cuyo precio en la ficha e producto sea de 0’60 € ¹ y hayamos marcados que se le apliquen impuestos ² y qué tipo ³ (definido anteriormente)
    
    Será visible en la ficha de producto con los impuestos aplicados:
    
    Al acceder al editor vemos el mismo precio que en woocommerce:
    
    
    ya que en nuestra plantilla hemos indicado el precio con los impuestos incluidos:
    
    
    
    y pasada la edición aparecerá igual en la cesta de la compra:
    
    
    
    
  • Activar módulo cross-selling en la página de carrito
    Habilita o deshabilita el cross-selling, consulta los detalles aquí.
  • ¿Eliminar todos los datos al desinstalar??
    Elimina todos los datos del plugin en caso de reinstalaciones.
  • ¿Activar logs?
    Habilita la creación de logs. Un log de WordPress es como la «caja negra» de tu sitio web. Es un archivo de texto donde se registran cronológicamente todos los errores, advertencias y avisos técnicos que ocurren en tu página. Es la herramienta más importante para un desarrollador o administrador cuando algo va mal y su única y principal función es diagnosticar y solucionar problemas
    Nuestra recomendación es por seguridad y rendimiento: tener esta casilla desactivada por defecto y solo se debe activar cuando se necesita resolver un problema.

Sincronizar

Cuando creamos una nueva plantilla o variante de plantilla es imperativo pulsar este botón para sincronizar las plantillas del Gestor de Plantillas con las almacenadas en Woocomerce.

Comprueba y repara la base de datos

En caso se detecte alguna anomalía en el funcionamiento del plugin, esta funcionalidad comprueba su correcto comportamiento.

Cross-selling

En el siguiente enlace podrás descargarte la última versión:

Descargar plugin Imaxel Editors para Woocommerce

Desde el Panel de WordPress

• Ve a Plugins > Añadir nuevo.
• Haz clic en el botón superior Subir plugin.
• Selecciona el archivo imaxeleditors-for-woocommerce.zip de tu ordenador y pulsa Instalar ahora.

WordPress detectará que el plugin ya existe y te mostrará una comparativa de versiones. Haz clic en el botón azul: «Reemplazar el actual con el subido».

Buenas prácticas:

• Backup: Realiza una copia de seguridad de tu base de datos antes de actualizar cualquier plugin
• Caché: Si tras actualizar no ves los cambios, limpia la caché de tu WordPress y de tu navegador.

Una vez actualizado, en la sección Imaxel – Dashboard, dispondrás de esta opción: 

Una vez activado, cuando el clienta personalice un producto de Imaxel con sus fotos:

Le aparecerá en la cesta de la compra sugerencias de más productos ya listos y editados con las fotos que ha usado en la personalización:

Nuestro cross-selling puede coexistir sin problemas con el cross-selling nativo de woocomerce, abriendo la posibilidad de mostrar al cliente más variedad de producto:

Opciones disponibles Cross-selling

1. Button color
   El valor hexadecimal (ej. #FF5733) del color en el que deseamos luzcan los botones del cross-selling.
2. Google Tag Manager ID
   Es el identificador único (con formato GTM-XXXX) que conecta tu sitio web con tu panel de control de Google Tag Manager. Permite gestionar todas tus etiquetas de marketing y analítica desde una sola interfaz sin volver a tocar el código de la web.
3. Google Analytics Measurement ID
   Es el identificador único (con formato G-XXXXXX) que indica a Google Analytics hacia qué propiedad específica debe enviar los datos de tráfico de tu web. Se inserta en el código o en Tag Manager para medir visitas, clics y conversiones de forma automática.

Imaxel 3D Product Placeholder

Al activar esta funcionalidad se crea un producto en el listado de productos, que no es visible en la web, que es necesario para el funcionamiento del cross-selling.

No hay que realizar ninguna acción sobre este producto, ni eliminarlo.

Productos

Sección donde se listan todas las plantillas y variantes del Gestor de Plantillas

Pedidos

Sección donde se listaran todos los pedidos realizados a través del editor:

Se presentan las siguientes columnas:

• Número de pedido / Order ID
  El número de pedido generado por Woocommerce
• Imaxel Order ID
  El número de pedido generado por Imaxel – solo necesario para seguimiento en caso de incidencias
• Customer / Cliente
  Enlace a la ficha del cliente de Woocommerce
• Date / Fecha
  Fecha del pedido
• Download / Descarga
  Enlace para descargar los archivos del pedido, separado en líneas de pedido
  Esta descarga estará únicamente disponible si se ha configurado la descarga a través del frontal, esta configuración la realiza Imaxel a petición vuestra en base a vuestro flujo de producción
  
  

  

• Acciones / Actions
  Tenemos dos posibilidades:
  
  • Ver
    Para consultar los datos del pedido de Woocommerce
  • Re-procesar pedido
    En caso que se quiera volver a generar los archivos del pedido de nuevo. Esta acción solo esta disponible una vez y solo en caso que los archivos del pedido original ya se hayan descargado.

¿Cómo funciona la descarga de los archivos de los pedidos?

Recordemos que tenemos dos opciones para descargar los pedidos: a través del mismo plugin o mediante el Print Center

En el caso se haya configurado para la descarga desde plugin (frontal de venta), hay que acceder a la sección Imaxel – Pedidos

Proyectos

¿Qué es un proyecto?

Cada ve que un usuario, independientemente si esta autenticado o no en woocomerce, se crea un proyecto.

El proyecto, contiene la información del diseño del cliente, es decir, sus fotos, los textos que haya introducido, las opciones que haya seleccionado, en resumen, la personalización del producto.

Podemos ver todos los proyectos creados y sus propietarios en la sección Proyectos junto con una columna ¹ con las acciones posibles:

• Editar
  Se puede acceder a la edición del proyecto y modificarlo. Muy útil para ayudar a los clientes en caso que tengan dudas previas a la confirmación del pedido.
• Duplicar
  Genera una copia del proyecto
• Procesar
  Genera un nuevo pedido en base al Proyecto. Este nuevo pedido generará tanto en el entorno de Imaxel como en el de Woocomerce. Cuando un proyecto esta asociado a un pedido se indica el número de pedido de woocomerce en la columna Order Id ²
  
  

Tanto la acción de Duplicar como la de Procesar conservan el propietario del proyecto. El propietario se detalla en la columna Propietario ³ , puede tener tres valores:

• El campo esta vacío
  Esto significa que alguien ha accedido al editor sin estar previamente autenticado en woocommerce, es decir, el proyecto no tiene propietario asignado
• El correo electrónico del administrador de la tienda
  Cuando es el administrador el que ha duplicado un proyecto que no tenía propietario asignado
• El correo electrónico del cliente
  Esto significa que alguien ha accedido al editor estando autenticado en woocommerce, es decir, sabemos qué usuario esta trabajando en ese proyecto

Todos los proyectos tienen un único número, que esta listado en la columna Proyecto ⁴

En la columna Estado ⁵ podemos ver el en que situación se encuentra el proyecto, puede tener 3 valores:

• No comprado
  El proyecto esta almacenado en el Area Clientes del cliente (en caso que este esté autenticado, es decir, tenga un propietario en la columna Propietario)
• Comprado
  El proyecto se ha convertido en pedido (podemos ver el número de pedido asociado en la columna Order Id ² )
• En la cesta de la compra
  El proyecto esta almacenado en el Area Clientes del cliente (en caso que este esté autenticado, es decir, tenga un propietario en la columna Propietario) y además se encuentra en la cesta de la compra

En la columna Fecha de actualización ⁶ sabremos cuándo se accedió por última vez al proyecto y podremos calcular cuánto tiempo seguirá disponible el proyecto.

¿Cuánto tiempo se almacena un proyecto en Imaxel?

Independientemente del estado del proyecto en la sección Imaxel Projects, cada diseño tiene un tiempo de caducidad.
Los proyectos de copias normales se almacenan 15 días y el resto, 90.
Este plazo, se reinicia cada vez que el usuario accede al proyecto y guarda una nueva versión.

FAQ

• ¿Cómo puede el usuario acceder a sus diseños guardados?

  Cada vez que el usuario finaliza un pedido o bien guarda una copia de su diseño se crea un proyecto.
  Es decir, cada diseño es un proyecto.
  Estos proyectos contienen la información del diseño del usuario y son accesibles desde una sección en su Area Privada llamada Imaxel Projects
  

  En esta pantalla, el usuario podrá saber el estado de su proyecto, si lo tiene en la cesta de la compra (in Cart), si lo tiene almacenado (not purchased) o bien si ha realizado una compra (purchased):

  
  Del mismo modo, se pueden realizar diferentes acciones sobre el proyecto, en el caso de un pedido se puede duplicar para generar otro pedido nuevo y en el caso que no este comprado se puede añadir a la cesta de la compra para finalizarlo.
  
  Los almacenamos 90 días a partir de la fecha de la última actualización /edición por parte del consumidor para la mayoría de productos. En el caso de los productos de Copias, los almacenamos 15 dias después de la última actualización/edición del consumidor.

• ¿Cuánto tiempo se guardan los proyectos de los consumidores?

  Independientemente del estado del proyecto en la sección Imaxel Projects, cada diseño tiene un tiempo de caducidad.
  Los proyectos de copias normales se almacenan 15 días y el resto, 90.
  Este plazo, se reinicia cada vez que el usuario accede al proyecto y guarda una nueva versión.
  Pongamos de ejemplo un usuario que hace un proyecto de un Album el 1 de Enero. Pasados 90 dias, el proyecto se borrará, pero si accede al proyecto desde la sección Imaxel Projects de su cuenta de usuario, lo abre y guarda una nueva versión el día 89, el contador se reiniciará y lo tendrá disponible 90 dias más.

• ¿Qué ocurre si un usuario quiere comprar un proyecto que ya no esta disponible?

  Esta acción no es posible y el plugin evitará que se finalice una compra de un proyecto que no esta disponible, avisándole al respecto, de esta manera evitamos que el cliente compre algo que no esta accesible.
  

• He actualizado el theme o algún plugin y el editor ha dejado de funcionar.

  Los plugins de WordPress están escritos por una basta comunidad de programadores que funcionan con unos requisitos mínimos y que carecen de mecanismos para comprobar su compatibilidad con otros plugins o themes, por lo que es importante ceñirse a los requisitos mínimos.

• He instalado el plugin y no funciona

  Nuestro plugin esta testeado en una instalación básica de WordPress/woocomerce, es probable que algún plugin este entrando en conflicto con él, recomendamos realizar la instalación en un entorno de pruebas para poder desactivar plugins y detectar donde esta el conflicto.

• He instalado el plugin, aparentemente funciona pero no veo el botón CREAR AHORA

  El plugin sustituye el botón nativo de woocomerce por el de acceso al editor, es la manera de asegurar la máxima compatibilidad con las instalaciones estándar. Si estas usando un constructor de página (page builders) como Elementor o WP Bakery y has editado la página de producto, asegúrate que este presente el botón mencionado:
  
  

• ¿Con qué versiones es compatible?
  

  Esta construido para ser compatible con las últimas versiones de wordpress y woocomerce y mantenemos una línea de desarrollo activa para que así sea.

• ¿Hay algún tipo de branding o marca añadida?

  No, el plugin se integra en la web y es un componente sin marca (marca blanca)

• ¿Cómo esta hecho?

  El plugin esta escrito usando funciones predeterminadas del lenguaje propio de WordPress, con lo que se asegura la máxima compatibilidad

• ¿Tiene integración con el Local Pick Up Plus?

  El Local Pick Up Plus es otro plugin que permite la creación de puntos de venta físicos en Woocommerce, dando la posibilidad al consumidor de pasar a recoger su pedido por una tienda física. Nuestro plug-in es compatible, añadiendo la información del punto de recogida en el resumen del pedido.

• ¿Quién cobra el pedido? ¿Interviene el plugin en el envío de pedidos?

  La gestión de cobros recae completamente en el Woocommerce así como la gestión de los envíos, nuestro plugin no interviene en nada. Aquí tienes un esquema que ilustra qué gestiona el plugin y qué gestiona el Woocommerce:
  

• ¿Dónde se alojan las fotos de los usuarios? ¿Hay límite de espacio?

  Imaxel aloja su plataforma en AWS (el mayor del mundo) en diferentes regiones para dar el mejor servicio. En este servidor se suben y almacenan todas las imágenes. No es necesario que la web del comerciante sea potente porque el trafico de imágenes y pedidos lo gestiona Imaxel.

• ¿Quien fija los precios de los productos?

  El comerciante, nuestro plugin no marca ni modifica precios