Aquellos que ya están familiarizados con WooCommerce, seguro que son conscientes de la función y utilidad de las ofertas flash. Se usan principalmente para mostrar cuando un artículo está en oferta.
En este tutorial, vamos ver cómo podemos personalizar y mejorar la forma en la que se muestran las ofertas flash de WooCommerce en pantalla para exhibir el porcentaje de descuento y cambiar el color de la etiqueta basándonos en el valor de 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 a la venta en cuestión, es decir, aquellos productos que tienen un precio de venta inferior a su precio habitual.
En el sistema actual, los usuarios no perciben la valor, o la calidad, del descuento.
Por ejemplo, un 70% de descuento es más atractivo que un 15%, pero ambos aparecen en 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 ventas de ofertas de modo que tu contenido (Oferta) sea sustituido por el porcentaje real del descuento.
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 en cuanto lo actualicemos, 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 con las modificaciones siguiendo este tutorial.
- Intenta adaptar este tutorial a tus necesidades.
Deja una respuesta