Biblioteca de ayuda - Integración con WooCommerce

Encuentra la documentación completa y detallada de todas las funcionalidades de Omniwallet.

  1. Home
  2. »
  3. Biblioteca de ayuda
  4. »
  5. Integraciones
  6. »
  7. Integración con WooCommerce

Integración de Omniwallet con WooCommerce

La integración entre Omniwallet y WooCommerce te permite automatizar la asignación y redención de puntos en tu tienda online, sin necesidad de acciones manuales. En esta guía te explicamos cómo configurar el plugin de Omniwallet desde el panel de administración de WordPress.

1. Instalación del Plugin de WooCommerce: Asegúrate de que WooCommerce esté instalado en tu sitio WordPress. Luego descarga e instala el plugin de Omniwallet.

2. Crea un API token: deberás crear un API Token, copiarlo, y colocarlo luego en la configuración del plugin. Si no sabes como crear un API Token haz clic aquí.

3. Configura el plugin de Omniwallet: deberás completar la configuración del plugin con los siguientes campos.

Campos de configuración

A continuación te detallamos el significado y la función de cada campo disponible en el panel:

CampoDescripción
API TokenCopiá el token desde tu cuenta de Omniwallet. Es obligatorio para autenticar la integración.
API SubdomainEscribí el subdominio de tu cuenta Omniwallet. Si tu URL es https://example.omniwallet.tools, debés ingresar solo example.
Point valueValor en tu moneda que representa un punto cuando es canjeado. Ej.: 1 punto = 1€.
Minimum valueValor mínimo de compra a partir del cual se permite redimir puntos. Ej.: 5€.
Maximum pointsLímite máximo de puntos que un cliente puede aplicar por compra.
Program name (Required)Nombre comercial que se mostrará en las tarjetas y comunicaciones del programa.
Status to confirm pointsEstado del pedido en WooCommerce que confirma la asignación de puntos. Lo recomendado es “Completado”.
Status to cancel transactionEstado que, al activarse, revoca los puntos otorgados. Normalmente es “Cancelado”.
Test API connectionBotón para verificar si la conexión con Omniwallet funciona correctamente.
Show points per productSi se activa, se mostrará en la ficha de producto cuántos puntos se obtienen con la compra.
Link to terms and conditionsURL a los términos del programa. Ideal para cumplir con RGPD y dar claridad al usuario.
Link to the catalog URLURL pública de tu catálogo de regalos en Omniwallet. Podés redirigir a los usuarios desde su tarjeta digital.

Como Modificar Estilo de Caja de Productos Omniwallet en Woocommerce

Esta documentación te enseñará como cambiar o ajustar los estilos del texto que indica la cantidad que ganará el cliente en la ficha de producto y grid de productos dentro de WooCommerce.

1. Accede al administrador de WordPress: entra al administrador de WordPress. Una vez dentro en el apartado ‘Apariencia -> Personalizar’ encontraremos otro menú, y al final de este el apartado ‘CSS adicional’. Es aquí donde añadiremos un nuevo estilo CSS que nos permitirá cambiar el diseño.

2. Añade el código: luego añade el siguiente código. Explicamos a continuación linea por linea para que sirve cada cosa:

Cambio de estilo en la ficha de producto

Para cambiar el estilo en la ficha de producto tendremos que añadir el siguiente código:

body.single-product .omwall-product-points {
      font-size: 22px; /*Tamaño de letra*/
     color: #000; /*Color del texto*/
     font-weight: 100; /*Tamaño del grosor o negrita*/
}

Pudiendo variar el tamaño de letra, color y grosor o negrita. Con conocimientos de CSS se podrían añadir otros estilos más personalizados.

Cambio de estilo en listado de productos

Por otro lado, para cambiar el estilo en el listado de productos tanto de la home como de categorías de producto sería el siguiente código:

.products .product .omwall-product-points {
     font-size: 22px; /*Tamaño de letra*/
     color: #000; /*Color del texto*/
   font-weight: 100; /*Tamaño del grosor o negrita*/
}

3. Publica los cambios: Una vez editado lo que se requiera, hay que clicar en el botón azul ‘Publicar’ para que se apliquen los cambios.

Como Modificar Estilo de Caja Puntos Omniwallet en Woocommerce

Esta documentación te enseñará como cambiar o ajustar los estilos de la caja de canjeo de puntos de Omniwallet que se encuentra en el resumen del carrito de compra dentro de WooCommerce.

1. Accede al administrador de WordPress: entra al administrador de WordPress. Una vez dentro en el apartado ‘Apariencia -> Personalizar’ encontraremos otro menú, y al final de este el apartado ‘CSS adicional’. Es aquí donde añadiremos un nuevo estilo CSS que nos permitirá cambiar el diseño de la caja de canjeo de puntos.

2. Añade el código: luego añade el siguiente código. Explicamos a continuación linea por linea para que sirve cada cosa:


body.woocommerce-cart .omwall-points-container {
background-color: #f8f8f8; /* Cambia el color de fondo de la caja. */
border-color: #cecece; /* Cambia el color del borde exterior de la caja. */
border-radius: 5px; /* Para añadir un redondeo en el borde exterior de la caja. */
}
body.woocommerce-cart .omwall-points-container .omwall-text,
body.woocommerce-cart .omwall-points-container .omwall-button {
color: #000000; /* Cambia el color del texto. */
font-size: 16px; /* Cambia el tamaño de letra del texto. */
font-weight: 300; /* Para cambiar el grosor o negrito del texto. */
}

3. Publica los cambios: Una vez editado lo que se requiera, hay que clicar en el botón azul ‘Publicar’ para que se apliquen los cambios.

Como Personalizar la Página de "Mi Cuenta" Omniwallet en Woocommerce

Esta documentación te enseñará las funciones de los shortcodes que deberás añadir a la página de “Mi Cuenta” para mostrar datos del programa de fidelización dentro de WooCommerce.

Muestra el código QR del cliente
        [omniwallet_qr]

Muestra el código de barras del cliente
        [omniwallet_barcode]

Muestra la cantidad de puntos disponibles
        [omniwallet_points]

Muestra botón para solicitar pkpass
        [omniwallet_pkpass]