Por defecto, WooCommerce muestra el precio original tachado y el precio de oferta, pero no muestra cuánto porcentaje se está ahorrando. Mostrar ese valor puede tener un gran impacto psicológico para motivar la compra. En este artículo verás cómo agregar ese porcentaje de ahorro, tanto en la ficha de producto como en el catálogo, sin necesidad de plugins adicionales.
¿Por qué mostrar el porcentaje de descuento?
Mostrar “—20 %” o “ahorras $X (20 %)” le da al cliente una percepción más clara del beneficio que obtiene. Grandes tiendas lo usan porque refuerza la decisión de compra al mostrar de forma explícita lo que están ganando al aprovechar la oferta.
Método: agregar código al tema (functions.php) o plugin propio
Antes de hacer esto, siempre trabaja en un tema hijo o en un plugin de funciones personalizado, así no perderás los cambios al actualizar el tema.
1. Mostrar ahorro en valor + porcentaje
Este filtro modifica el HTML del precio en productos que están en rebaja:
Luego puedes añadir un poco de CSS para mejorar la visibilidad:
Este código mostrará algo como:
Precio de oferta
Ahorras: $X (Y %)
El tamaño, color o estilo los puedes ajustar con CSS según tu tema.
2. Mostrar solo el porcentaje junto al precio
Si prefieres algo más compacto —mostrar solamente “(-X %)” junto al precio— puedes usar esta variante:
Y vuelves a aplicar el CSS que definimos arriba para darle estilo.
3. Mostrar porcentaje de descuento como etiqueta sobre la imagen
Para destacar aún más el descuento, puedes agregar una etiqueta encima de la imagen del producto:
Con esto, en el catálogo o listado de productos verás una etiqueta tipo “Ahorras un 20 %” sobre la imagen.
Consideraciones y limitaciones
- El primer método funciona bien para productos simples, pero no siempre para productos variables, especialmente si todas las variaciones tienen precios iguales.
- Si un producto tiene muchas variaciones con distintos precios, el algoritmo escoge el porcentaje de ahorro más alto entre las variaciones.
- Si el precio habitual y el precio con descuento son iguales en todas las variaciones, puede que no se muestre ningún porcentaje.
- Si tu tema ya cambia la forma en que WooCommerce muestra precios, este código podría entrar en conflicto.
Siempre prueba en un entorno de pruebas antes de activarlo en el sitio en producción
