Como poner el precio arriba en las variaciones de WooCommerce
Actualizado julio 2026: Para poner el precio de las variaciones arriba en WooCommerce podemos utilizar un pequeño fragmento de código que actualiza automáticamente el precio situado debajo del título cuando el cliente selecciona una opción. De esta forma, el importe no aparece separado en la parte inferior de la ficha y conseguimos que el producto se vea más limpio, claro y profesional.
Cómo mostrar el precio seleccionado arriba en los productos variables
WooCommerce muestra normalmente un precio o un rango de precios debajo del título del producto. Sin embargo, cuando el cliente selecciona una variación concreta, el precio definitivo aparece más abajo, cerca del botón de añadir al carrito. Con este código podemos hacer que el precio superior cambie automáticamente y muestre el importe real de la variación seleccionada.
Los productos variables son muy útiles cuando vendemos un mismo artículo con diferentes tamaños, colores, medidas, acabados o capacidades. El problema es que la forma en la que WooCommerce presenta los precios por defecto no siempre encaja con el diseño que queremos para nuestra tienda online.
Cuando las variaciones tienen importes diferentes, WooCommerce puede mostrar inicialmente un rango de precios. Después, al seleccionar una combinación concreta, genera un segundo precio debajo de los atributos del producto. Aunque este funcionamiento es correcto, visualmente puede resultar algo confuso y hacer que el cliente tenga que buscar cuál es el precio definitivo.
En este tutorial vamos a poner el precio arriba en las variaciones de WooCommerce para que se actualice siempre en la misma zona de la ficha. Además, ocultaremos el precio inferior para evitar que el importe aparezca duplicado.
Por qué cambiar la posición del precio en WooCommerce
El precio es uno de los elementos más importantes de cualquier ficha de producto. Por eso, lo más lógico es que se mantenga siempre en un lugar visible y fácil de localizar, normalmente justo debajo del título y de la descripción corta.
Si el cliente selecciona una variación y el precio aparece de repente mucho más abajo, puede tardar unos segundos en encontrarlo o incluso pensar que el importe de la parte superior sigue siendo el precio definitivo. Esto ocurre especialmente en fichas con muchas opciones, textos largos, tablas de medidas o complementos adicionales.
Al actualizar el precio superior conseguimos que la información permanezca siempre en el mismo sitio. El usuario podrá cambiar entre las distintas variaciones y comprobar rápidamente cómo cambia el importe, sin tener que desplazar la vista de una zona a otra del producto.
No estamos modificando el precio real ni el funcionamiento interno de WooCommerce. Simplemente estamos cambiando la forma en la que se muestra dentro de la página del producto.
Dónde añadir el código para modificar el precio
Podemos añadir este código en el archivo functions.php de un tema hijo o utilizar un plugin como Code Snippets. Las dos opciones son válidas, aunque nosotros recomendamos utilizar siempre un tema hijo cuando estamos realizando modificaciones relacionadas con el diseño o el funcionamiento de la plantilla.
No debemos pegar el código directamente en el functions.php del tema principal. Si lo hacemos, los cambios podrían desaparecer cuando actualicemos el tema y tendríamos que volver a añadirlos manualmente.
Un tema hijo hereda el diseño y las funciones del tema principal, pero nos permite añadir nuestros propios cambios sin que se borren durante las actualizaciones. Si todavía no tienes uno, puedes consultar nuestro tutorial sobre cómo crear un tema hijo en WordPress, donde explicamos todo el proceso paso a paso.
También podemos utilizar Code Snippets si preferimos gestionar las funciones desde el propio escritorio de WordPress. En ese caso, creamos un nuevo fragmento, pegamos el código y lo activamos para que se ejecute en la parte pública de la web.
Antes de añadir cualquier código en una tienda online activa, recomendamos realizar una copia de seguridad o probar primero el cambio en un entorno de desarrollo.
Código para poner el precio arriba en las variaciones de WooCommerce
Añadimos el siguiente código al archivo functions.php del tema hijo o dentro de un nuevo fragmento de Code Snippets:
/**
* Actualiza el precio superior al seleccionar
* una variación de WooCommerce.
*/
add_action( 'wp_footer', function () {
if ( ! is_product() ) {
return;
}
?>
<script>
jQuery(function ($) {
const $form = $('form.variations_form');
if (!$form.length) {
return;
}
/*
* Precio situado debajo del título.
* Usamos first() para no seleccionar el precio
* que WooCommerce genera dentro de las variaciones.
*/
const $topPrice = $('.summary .price').first();
if (!$topPrice.length) {
return;
}
const originalPrice = $topPrice.html();
/*
* Cuando se encuentra una variación válida,
* sustituye el precio superior por su precio real.
*/
$form.on('found_variation', function (event, variation) {
if (variation && variation.price_html) {
$topPrice.html(variation.price_html);
}
});
/*
* Al pulsar "Limpiar", recupera el precio inicial.
*/
$form.on('reset_data hide_variation', function () {
$topPrice.html(originalPrice);
});
});
</script>
<?php
}, 99 );Si añadimos el fragmento mediante Code Snippets, no debemos incluir una etiqueta de apertura <?php. El plugin ya se encarga de interpretar el código PHP correctamente.
Una vez guardados los cambios, podemos entrar en cualquier producto variable de la tienda y seleccionar sus diferentes opciones. Cuando WooCommerce encuentre una combinación válida, el precio situado debajo del título debería cambiar automáticamente y mostrar el importe correspondiente.
Si el cliente pulsa en Limpiar o elimina la selección, volverá a aparecer el precio o rango inicial del producto.
El código utiliza directamente el precio generado por WooCommerce, por lo que también debería mantener el formato de la moneda, los precios rebajados y el importe anterior tachado cuando el producto tenga una oferta activa.
Ocultar el precio duplicado debajo de las variaciones
Después de añadir el código, WooCommerce seguirá generando su bloque de precio habitual debajo de los selectores. Como ahora el importe también aparece actualizado en la parte superior, tendremos que ocultar el precio inferior para evitar que se muestre dos veces.
Para hacerlo añadimos el siguiente CSS:
.single-product .woocommerce-variation-price {
display: none;
}Podemos pegar este código desde el apartado de CSS adicional de nuestro tema o añadirlo directamente en el archivo style.css del tema hijo.
Este CSS únicamente oculta el precio inferior dentro de la ficha del producto. WooCommerce seguirá calculando correctamente el precio de la variación seleccionada y utilizando ese importe cuando el cliente añada el producto al carrito.
Después de guardar los cambios recomendamos limpiar la caché de WordPress, del servidor y del navegador para asegurarnos de que se carga la nueva versión de la página.
Qué sucede con el rango de precios de WooCommerce
Cuando un producto tiene variaciones con distintos importes, WooCommerce puede mostrar inicialmente un rango con el precio más bajo y el más alto. Por ejemplo, si una variación cuesta 25 euros y otra 40 euros, aparecerá un intervalo entre ambas cantidades.
El código no elimina permanentemente ese rango. Lo mantiene mientras el cliente todavía no ha seleccionado ninguna opción y lo sustituye por el precio exacto cuando encuentra una variación válida.
De esta forma, el usuario puede conocer desde el principio los precios aproximados del producto y, después, ver el importe definitivo en el mismo lugar cuando elige un tamaño, color, capacidad o acabado concreto.
Al pulsar en Limpiar, el rango original vuelve a mostrarse automáticamente.
Vídeo para poner el precio de las variaciones arriba
En el siguiente vídeo puedes ver cómo cambiar la posición del precio en los productos variables de WooCommerce y el resultado final dentro de la ficha.
El vídeo fue grabado utilizando una versión anterior del código. Hemos actualizado este artículo en julio de 2026 con un fragmento nuevo que funciona mejor con el sistema actual de variaciones de WooCommerce.
Por ese motivo, recomendamos utilizar el código publicado en esta página, aunque el proceso general y el resultado visual sean similares a los que aparecen en el vídeo. Si quieres ver cómo funcionan estas modificaciones en vivo puedes hacerlo en esta tienda online que realizamos para una tienda de colchones en Fuenlabrada. Hola buenas hasta luego gracias vamos a ver cómo queda esto buenos días cosa más fea bueno a ver a tirar a tomar por culo vamos cuál era el asunto en la gran variedad justo en la que casi hasta ahora más que mierda aquí tío no puedo esperar o menos que tiene no va a quedar bien no sé pero bueno
Mejorar el diseño de los productos variables de WooCommerce
Poner el precio arriba en las variaciones de WooCommerce es un cambio relativamente sencillo, pero puede mejorar bastante la presentación de una tienda online. El cliente encontrará siempre el importe en la misma zona y podrá ver rápidamente cómo cambia al seleccionar las diferentes opciones del producto.
Además, al ocultar el precio inferior evitamos duplicidades y conseguimos que la ficha se vea más ordenada. Esto puede ser especialmente útil en tiendas con productos que tienen muchas medidas, formatos, colores o combinaciones diferentes.
El código debería funcionar con la estructura habitual de WooCommerce y con la mayoría de los temas compatibles. Sin embargo, algunas plantillas o constructores visuales pueden colocar el precio dentro de un contenedor diferente y requerir una pequeña adaptación.
Si después de añadirlo el precio no se actualiza correctamente, puedes contactar con nosotros para que revisemos la estructura de tu producto y adaptemos el código a tu tienda online.
También puedes consultar otros tutoriales de nuestro blog sobre cómo crear un tema hijo en WordPress, cómo colocar un botón de añadir al carrito en cualquier parte de la web o cómo crear un botón para vaciar el carrito de WooCommerce.
Javier Callejo
En Javier Callejo ayudamos a empresas y negocios locales a mejorar su presencia online mediante diseño web en WordPress, SEO, contenidos y campañas de Google Ads orientadas a resultados.
