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»
|
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).
|
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,
|
Muchas gracias!! funciona perfectamente!