Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WooCommerce

Personalizar el Comportamiento de las Ofertas Flash en WooCommerce

by
Length:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product image
What You'll Be Creating

Aquellos que ya están familiarizados con WooCommerce, seguro que son conscientes de la utilidad y función de las ofertas flash. Se usa principalmente para mostrar cuando un artículo está en oferta.

En este tutorial, vamos ver cómo podemos personalizar y mejorar como se muestran las ofertas flash de WooCommerce en la pantalla para exhibir el porcentaje de descuento y cambiar el color de la etiqueta basándonos en dicho porcentaje.

Las ofertas flash en WooCommerce se visualizan en las páginas de archivo y en las páginas que muestran sólo el producto de venta en cuestión, es decir, aquellos productos que tienen un Precio de Venta inferior al Precio Normal.

Woocommerce discounted product in Back-end
Default sale-flash behavior It display a simple Sale message

En el actual sistema, los usuarios no perciben la Dimensión — o calidad — del descuento.

Por ejemplo, un 70% de descuento es más atractivo que uno de 15%, pero ambos aparecen WooCommerce con una sencilla etiqueta de oferta junto a la imagen del producto. Para resolver este problema, vamos a modificar el algoritmo que controla las venta de ofertas de modo que su contenido (Oferta) sea sustituido por el porcentaje de descuento real.

Modificar las Ofertas Flash

El archivo que genera las ofertas flash se encuentra en la siguiente carpeta:

your-site/wp-content/plugns/woocommerce/templates/loop/sale-flash.php

Por lo general, no es buena idea cambiar los archivos del plugin ya que todos los cambios que hagamos se perderán con la primera actualización del mismo, y desactivar las actualizaciones tampoco es una buena opción.

Afortunadamente, podemos hacer tantos cambios como nos apetezca en las plantillas de WooCommerce sin comprometer la integridad del plugin, simplemente copia el archivo modificado en una subcarpeta dentro de nuestro tema que llamaremos woocommerce. En nuestro caso, copiamos el archivo sale-flash.php, que se encuentra en:

your-site/wp-content/yourtheme/woocommerce/loop/sale-flash.php

Todos los archivos que se encuentren dentro de esta carpeta "woocommerce" tendrán prioridad sobre los archivos de plantilla originales del plugin. De este modo podemos estar seguros de que al actualizar WooCommerce no perderemos ninguno de nuestros cambios.

Ten en cuenta que si usas un tema hijo o "child theme", el archivo debe copiarse en la carpeta del tema hijo.

Recuerda también que si el tema ya tiene un archivo yourtheme/woocommerce/loop/sale-flash.php es muy probable que esta plantilla ya modifique el comportamiento original de la venta flash de WooCommerce. En este caso existen dos soluciones:

  • Sobrescribe este archivo con el archivo original que encuentres en la carpeta del plugin y continúa las modificaciones siguiendo este tutorial.
  • Intenta adaptar este tutorial a tus necesidades.

Veamos el archivo sale-flash.php:

El código es muy simple: genera una etiqueta span con el texto "OFERTA" cada vez que un objeto tiene un descuento respecto al precio habitual. Todo lo que tenemos que hacer es realizar los cambios siguientes en el código:

Resumen del Código 

Lo primero que tenemos que hacer es calcular el descuento, y para ello necesitaremos el Precio Normal y el Precio de Oferta. Para productos simples y agrupados, podemos obtener esta información utilizando simplemente dos campos meta: _price y _regular_price (ver filas 5 y 6).

Si el valor obtenido para Precio Normal está vacío, es que estamos hablando de un producto variable, y en este caso vamos a tener que hacer lo siguiente:

  • Obtener el ID de la primera variación disponible (filas 8 y 9).
  • Cargar la variación (fila 10).
  • Extraer la información que necesitamos, el Precio Normal y el Precio de Oferta (filas 11 y 12).

Ahora, lo único que tenemos que hacer es aplicar una sencilla fórmula para calcular el descuento, con el Precio Normal y el Precio de Oferta. Para hacerlo más simple podríamos evitar el empleo de decimales redondeando el número al entero más cercano, usando la función ceil(num), como en el ejemplo que te acabo de mostrar, o truncando el número menor más cercano mediante la función floor(num).

The sale-flash show the effective percentage now

Cambiar el Color de la Oferta Flash

Podemos añadir color a nuestra solución mediante el uso de una escala cromática que represente los porcentajes de descuento. El verde es 0% y el rojo se corresponde con un 100%.

Estos colores tienen los siguientes códigos RGB:

  • Rojo: 255, 0, 0
  • Verde: 0, 255, 0

Con estas simples fórmulas podemos añadir el canal rojo y eliminarlo del canal verde.

El canal azul se mantiene sin cambios; siempre será igual cero.

  • R = (255 * oferta) / 100
  • G = (255 * (100 - oferta)) / 100
  • B = 0

Una vez que tengamos los valores rojos y verdes, podemos modificar el fondo para sale-flash  mediante la adición directa de la regla a la etiqueta span.

El código completo es el siguiente:

Y el resultado:

Sale-flash background color depending by percentage discount

Notas Finales

Establecer el Fondo

Para aquellos que me hayan seguido a hasta aquí, podríais preguntaros ¿por qué hemos creado el background:none antes de ajustar el background-color?

En este caso concreto, la hoja de estilo tenía una regla la propiedad background que siempre tenía prioridad sobre background-color. La forma correcta de hacerlo habría sido cambiar la hoja de estilos y sobrescribir o anular la regla que establece el fondo de sale-flash.

En términos generales, deberías seleccionar las propiedades y las reglas de estilo que desees reemplazar o cambiar con herramientas como Firebug. Una vez entiendas en dónde y qué cambiar, debes intentar no utilizar estilos en línea. En su lugar, intenta usar una hoja de estilos externa.

¿Qué Pasa con el Color de Fondo?

En este caso, tenemos una excepción a la regla. El código RGB se calcula a través de un algoritmo muy simple y siempre podrás cambiar el algoritmo modificando unas pocas líneas de código PHP en vez de cambiar cientos de clases CSS.

Conclusión

En este punto, la personalización de las ofertas flash está hecha. Hemos modificado la plantilla que genera la visualización de la etiqueta correspondiente.

En lugar de modificar el archivo original que se encuentra en la carpeta del plugin, utilizamos una copia en la carpeta del tema para salvaguardar los cambios que acabas de hacer de futuras actualizaciones del plugin.

Generalmente se trata de una regla válida para todos los archivos incluidos en la carpeta "templates" del plugin WooCommerce. Espero que hayas encontrado este tutorial útil no sólo para mejorar el comportamiento de las ofertas flash sino también para comprender mejor cómo funcionan algunos mecanismos de WooCommerce.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.