Mostrar porcentaje de descuento en productos de WooCommerce

En esta época de rebajas y descuentos es común querer mostrar de forma destacada en la tienda online, no sólo el precio anterior y el nuevo, sino a veces también el porcentaje de descuento al que corresponde la oferta.


por

Woo precio oferta

Para conseguirlo, podemos utilizar el siguiente código que calcula ese porcentaje y lo muestra, en este caso, justo antes de la foto de producto, aunque también podríamos añadirlo en otro espacio modificando el hook utilizado, en este caso woocommerce_before_shop_loop_item

Una vez calculamos y mostramos el porcentaje, deberemos añadir algo de CSS para que se muestre a nuestro gusto:

.descuento-por {
    background-color: red;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    border-radius: .15em;
    position: absolute;
    right: -10px;
    top: -10px;
}

El código original de este artículo está sacado de: https://www.businessbloomer.com/woocommerce-display-discount-shop-loop-pages/

Comentarios

3 respuestas a «Mostrar porcentaje de descuento en productos de WooCommerce»

  1. Avatar de José A

    |

    Hola Esther,
    Me encanta la ayuda que ofreces a los desarrolladores principiantes como yo.
    Aprovechando este post, me gustaría preguntarte si conoces un snippet actualizado para poder mostrar un texto personalizado cuando llega al Umbral de pocas existencias establecido previamente (aviso de stock).
    Me explico, el snippet que tengo configurado y que no funciona bien es este: https://gist.github.com/navalon/3f5dba3b34d8fa9ba8d340665b65e541
    Mientras el producto se encuentra en el umbral configurado como bajo de existencias funciona perfectamente el snippet mostrando el texto personalizado pero el problema viene cuando llega agotarse el producto, que en lugar de mostrarse simplemente «agotado» sale el texto que se haya personalizado en el snippet. Por ejemplo: «¡Date prisa! Solo nos quedan 0 unidades»
    Y como es lógico no queda bien eso de date prisa que tenemos cero unidades… lo ideal es que se muestre «AGOTADO» (lo que muestra woocommerce sin personalizar nada).

    1. Avatar de esther

      |

      Hola José!
      Mira, he adaptado el script que comentabas para poder controlar si está agotado o no, y también si es una unidad, para ponerlo en singular.
      Lo tienes aquí: https://www.esthersola.com/personalizar-el-mensaje-de-stock-en-woocommerce/
      Cualquier duda me dices!

      Saludos,

      1. Avatar de José A.

        |

        Muchas gracias!! funciona perfectamente!