Guía de integración 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.
A continuación, descarga e instala el plugin de Omniwallet.

2. Crear un API Token

Deberás crear un API Token, copiarlo y colocarlo posteriormente en la configuración del plugin.

Si no sabes cómo crear un API Token, haz clic aquí.

3. Configuración del plugin de Omniwallet

Una vez instalado el plugin, deberás completar los siguientes campos de configuración.

Campos de configuración

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

Cómo modificar el estilo de los puntos en productos (WooCommerce)

Esta sección explica cómo cambiar el estilo del texto que indica los puntos que ganará el cliente en la ficha de producto y en los listados.

1. Accede al administrador de WordPress

Ve a: Apariencia → Personalizar → CSS adicional

Aquí podrás añadir estilos personalizados sin tocar el código del tema.

2. Cambio de estilo en la ficha de producto

Añade 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; /* Grosor o negrita */
}

Puedes modificar el tamaño, color o grosor según tus necesidades.
Con conocimientos de CSS, es posible aplicar estilos más avanzados.

3. Cambio de estilo en el listado de productos

Para cambiar el estilo en el grid de productos (home, categorías, etc.):

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

4. Publicar los cambios

Una vez realizados los ajustes, haz clic en Publicar para aplicar los cambios.

Cómo modificar el estilo de la caja de canjeo de puntos (carrito)

Esta sección explica cómo personalizar la caja de canjeo de puntos que aparece en el resumen del carrito.

1. Accede a CSS adicional

Ruta: Apariencia → Personalizar → CSS adicional

2. Añade el siguiente código CSS

body.woocommerce-cart .omwall-points-container {
  background-color: #f8f8f8; /* Color de fondo */
  border-color: #cecece; /* Color del borde */
  border-radius: 5px; /* Redondeo del borde */
}

body.woocommerce-cart .omwall-points-container .omwall-text,
body.woocommerce-cart .omwall-points-container .omwall-button {
  color: #000000; /* Color del texto */
  font-size: 16px; /* Tamaño de letra */
  font-weight: 300; /* Grosor del texto */
}

3. Publica los cambios

Haz clic en Publicar para que los estilos se apliquen correctamente.

Personalizar la página “Mi Cuenta” con Omniwallet

Esta sección explica cómo mostrar información del programa de fidelización dentro de la página Mi Cuenta de WooCommerce utilizando shortcodes.

Shortcodes disponibles

Mostrar el código QR del cliente

[omniwallet_qr]

Mostrar el código de barras del cliente

[omniwallet_barcode]

Mostrar la cantidad de puntos disponibles

[omniwallet_points]

Mostrar el botón para solicitar la tarjeta digital (pkpass)

[omniwallet_pkpass]