Enchular los precios de WoCommerce

En esta primera entrega del ciclo donde te voy a mostrar como enchular tu web con WordPress, nos metemos de lleno a «enchular los precios de WoCommerce».

Uno de los pilares de WordPress son los temas, y aunque muchos son súper personalizables, a veces no se adaptan al 100% a lo que queremos! O simplemente, queremos que nuestro sitio se vea distinto a los otros 75.842 que usan el mismo tema. Para eso existen los temas hijos!

Con un tema hijo, puedes hacer todas las modificaciones que quieras con total tranquilidad, sin miedo de que la próxima actualización de tu tema base mande al tacho todas tus personalizaciones!

El ejemplo de hoy es un tema hijo de StoreFront, un tema desarrollado por Automatic, que tiene más de 100.000 instalaciones activas; ideal para e-commerce.

El problema a resolver era cómo mostrar los precios, porque la forma original resultaban un poco confusos.

Lulu como son los precios no se entiende nada 😆

Mensaje de WhatsApp de un visitante del sitio

Y claro, parece que es un rango de precios, sin duda es confuso, por lo que propuse como solución, poner encima de cada precio el título de la «variación». El resultado lo podes ver en la siguiente imagen.

Para lograr este efecto, utilice un filtro nativo de WooCommerce (woocommerce_get_price_html), una función callback y algo de estilo. Todo esto dentro el tema hijo.

Ahora la tienda tiene una apariencia única que la distingue de otras tiendas con StoreFront, lo que espero facilite la experiencia de compra de nuestros visitantes.

Conclusión

Los temas están pensados para resolver necesidades comunes, este es un caso marginal donde podemos aplicar este filtro, porque solo se van a mostrar 2 precios, no sirve para un e-commerce donde tenes 5 precios distintos por artículos, no se vería bien y seria mucho más practico dejarlo como viene de fabrica.