Personalice la vista del rango de precios en Woocommerce 3.2.x

Muchas veces al personalizar un producto variable nos hemos topado que Woocommerce pinta el rango de precios desde el menor valor hasta el mayor valor de una forma no tan bonita.

En este ejemplo vamos a personalizar el precio de este modo: “Desde $12” o “Inicia en $45” o las miles de alternativas que se nos pueda ocurrir.

Existen muchos hooks que podemos usar para estos casos, ya que si vemos la función get_price_html() notamos que tenemos para elegir, sin embargo vamos a tomar el más común de todos, el hook woocommerce_get_price_html  .

Explicación

El producto trae 2 parámetro, el primero es el clásico rango de precios con todo HTML y el segundo es el objeto global $product , recuerda que debe llamarse de este modo sino te va a salir error.

Hacemos una condicional if( !$product->is_type( ‘variable’ ) )  pues esta función sólo aplica a productos variables

Obtenemos las variaciones activas y traemos el mínimo y el máximo precio que se encuentran al inicio y final del array $prices respectivamente.

Si en caso el mínimo y máximo son iguales entonces no se trata de un producto variable, así que retornamos el mismo valor que nos fue enviado.

Y finalmente retornamos lo que queremos. Quiero tomar énfasis en que la función wc_price() lo envuelve en etiquetas HTML para que se vea más cool.

Result.