Si trabajas con WooCommerce, seguro has visto esos productos variables que muestran algo como “€25 – €60”. Aunque es útil, no siempre se ve bien visualmente ni genera confianza. En este artículo te enseño cómo ocultar el rango de precios en productos variables de WooCommerce y mostrar solo el precio más bajo con un pequeño snippet PHP personalizado. Además, te explico paso a paso el código, cómo implementarlo y cómo hacerlo sin romper tu sitio.
¿Por qué ocultar el rango de precios en productos variables de WooCommerce?
Mostrar un rango de precios (“de €20 a €50”) puede confundir a los clientes o desincentivar la compra. Muchos eCommerce prefieren mostrar solo el precio mínimo o incluso ocultar los precios hasta que se seleccione una variación. Este ajuste mejora la claridad visual, la tasa de conversión y da una apariencia más profesional a tu tienda online.
Cómo ocultar el rango de precios en productos variables (paso a paso)
1. Accede a tu área de snippets o al functions.php
Puedes hacerlo desde el plugin Code Snippets o agregando el código en el archivo functions.php de tu tema hijo.
2. Copia y pega este código
// Ocultar rango de precios en productos variables – SEBASWEB
add_filter( 'woocommerce_variable_sale_price_html', 'sw_variable_product_price', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'sw_variable_product_price', 10, 2 );
function sw_variable_product_price( $v_price, $v_product ) {
$prod_prices = [
$v_product->get_variation_price( 'min', true ),
$v_product->get_variation_price( 'max', true )
];
$prod_price = $prod_prices[0] !== $prod_prices[1]
? wc_price( $prod_prices[0] )
: wc_price( $prod_prices[0] );
$regular_prices = [
$v_product->get_variation_regular_price( 'min', true ),
$v_product->get_variation_regular_price( 'max', true )
];
sort( $regular_prices );
$regular_price = $regular_prices[0] !== $regular_prices[1]
? wc_price( $regular_prices[0] )
: wc_price( $regular_prices[0] );
if ( $prod_price !== $regular_price ) {
$prod_price = '<del>' . $regular_price . '</del> <ins>' . $prod_price . '</ins>';
}
return $prod_price;
}
Explicación del código
add_filter()conecta nuestra función al precio de los productos variables.get_variation_price('min', true)obtiene el precio más bajo entre las variaciones.get_variation_price('max', true)obtiene el precio más alto.- El condicional
iffinal compara el precio regular y el rebajado para mostrar ambos con el formato<del>y<ins>. - El prefijo
sw_identifica el código como parte del branding SEBASWEB.
Dónde colocar el código
Puedes añadirlo fácilmente usando el plugin Code Snippets, que te permite gestionar fragmentos de código sin tocar el tema. Si prefieres, también puedes incluirlo dentro de un plugin personalizado SEBASWEB Custom Tweaks si ya usas uno para tus proyectos.
Consejos y aclaraciones al ocultar el rango de precios en productos variables de WooCommerce
¿Este código funciona con cualquier tema?
Sí, siempre que el tema esté correctamente integrado con WooCommerce. Procura no implementarlo nunca en el archivo functions.php del tema original, sino en un child theme o a través del plugin Code Snippets, para evitar perder los cambios con futuras actualizaciones.
¿Se actualiza con WooCommerce 8+ o PHP 8+?
Sí, es totalmente compatible. No modifica funciones internas de WooCommerce.
¿Afecta al SEO o al schema de productos?
No, el cambio es solo visual. Los datos estructurados de producto permanecen intactos.
¿Puedo mostrar el precio máximo en lugar del mínimo?
Sí, solo cambia get_variation_price('min') por 'max' dentro del código.
Este snippet te permite mostrar un precio más claro y atractivo para tus productos variables en WooCommerce. Es un ajuste sencillo, rápido y efectivo para mejorar la presentación de tu tienda.
💬 ¿Te funcionó este snippet?
Me encantaría saber cómo te fue al aplicarlo o si encontraste algún caso distinto en tu tienda. Déjame tu comentario abajo y lo reviso personalmente 👇
Tu experiencia puede ayudar a otros que también estén buscando cómo ocultar el rango de precios en productos variables de WooCommerce.
