En Estudio Alfa nos encontramos a menudo con clientes que quieren usar WooCommerce como simple catálogo digital, sin mostrar precios. Un caso típico son los catálogos B2B, donde los precios dependen de cada cliente. En Estudio Alfa hemos visto distribuidores de alimentación que solo quieren mostrar sus referencias, pero no precios públicos..

En Estudio Alfa nos encontramos con frecuencia con este tipo de necesidades cuando un cliente desea que su web funcione como un catálogo online, sin ventas directas. En este artículo te mostramos cómo hacerlo de forma profesional.

¿Por qué ocultar el precio o el botón de compra?

Existen varias razones por las que una empresa puede querer ocultar estos elementos:

• Catálogos B2B: donde los precios varían según el cliente o se muestran solo a usuarios registrados.
• Webs de presupuesto bajo demanda: en lugar de vender online, se invita al usuario a solicitar una cotización.
• Productos en desarrollo o próximos lanzamientos: se presentan como “coming soon” sin permitir la compra inmediata.
• Restricciones legales o comerciales: en algunos sectores no es posible mostrar precios públicos.

Métodos disponibles

Existen dos formas principales de ocultar precios y botones en WooCommerce:

1. Usar CSS (ocultar visualmente)

Con CSS podemos esconder los elementos, aunque seguirán existiendo en el código. Esto es rápido pero no es lo más seguro, ya que un usuario avanzado puede inspeccionar la página y ver el precio.

.woocommerce a.button.add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
    display: none !important;
}

2. Usar funciones de WordPress (el método recomendado)

La forma más limpia es eliminar los hooks de WooCommerce desde functions.php de tu tema hijo. Así no solo se ocultan visualmente, sino que WooCommerce deja de cargarlos.

Ocultar precios en toda la tienda

// Quitar precio en el catálogo 
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

// También lo quitamos en la ficha individual
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

Ocultar botón “Añadir al carrito”

// Quitar botón en catálogo
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

// Quitar botón en ficha de producto
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Inyectar CSS desde functions.php

Si prefieres centralizar tu personalización, también puedes añadir CSS directamente desde functions.php:

function alfa_css_personalizado() {
    wp_add_inline_style(
        'woocommerce-general',
        '.woocommerce a.button.add_to_cart_button,
         .woocommerce button.single_add_to_cart_button {
            display: none !important;
         }'
    );
}
add_action( 'wp_enqueue_scripts', 'alfa_css_personalizado' );

Esto asegura que tus estilos se carguen junto con WooCommerce sin necesidad de modificar archivos manualmente.

Conclusión

Ocultar precios y botones de “Añadir al carrito” en WooCommerce es una práctica común cuando se quiere transformar una tienda online en un catálogo o limitar la compra a ciertos usuarios.

Desde Estudio Alfa recomendamos usar hooks en lugar de CSS siempre que sea posible, ya que es más seguro y profesional.

? ¿Quieres que tu WooCommerce funcione como un catálogo o que solo muestre precios a usuarios registrados? En Estudio Alfa te ayudamos a personalizar tu tienda online para que se adapte exactamente a tu modelo de negocio.