Cómo poner una tienda online WooCommerce en modo catálogo sin necesidad de plugins (actualizado)

Si alguna vez has querido poner tu tienda en línea en modo catálogo, pero no quieres instalar plugins gratuitos, no pagar por caros plugins premium, aquí tienes la solución, fácil y gratis, sin plugins.

Pero antes…

Qué es el modo catálogo

El modo de catálogo en una tienda online es una configuración específica de la misma por la que no se pueden realizar pedidos, sino que simplemente sirve para ver los productos, sin compra directa, y en ocasiones también sin mostrar siquiera los precios.

Normalmente, en el modo catálogo, no funciona el carrito, ni hay botones para añadir productos al carrito, y en ocasiones tampoco se muestran los precios de los productos. Además, para que no parezca un flujo de ventas totalmente cerrado, se suelen sustituir los botones de compra por otros desde los que solicitar información y/o precios.

¿En qué situaciones es interesante el modo catálogo?

El modo de catálogo es un tipo de configuración bastante utilizado por muchas tiendas en línea, por ejemplo por empresas que quieren tener online su catálogo de productos pero no están preparadas o no quieren realizar venta directa en línea, y prefieren venta directa en tienda física.

Otro ejemplo de uso es para fabricantes que quieren tener su catálogo en línea como servicio a sus vendedores y distribuidores.

También es interesante disponer de una tienda en línea en modo catálogo cuando no quieres vender (aún) online pero sí quieres ofrecer información sobre tus productos, medir el interés por los mismos, posicionarlos en buscadores, etc.

También puede ser útil cuando tienes la tienda en periodo de mantenimiento o cambios, y quieres evitar que se realicen pedidos.

¿Cómo se activa el modo catálogo sin plugins?

Pues sencillo, solo tienes que añadir unas pocas líneas de código:

/**
* Tienda WooCommerce en modo catálogo completo
* Funciona con productos simples, variables, agrupados y externos
*/

/**
* Eliminamos todos los botones de añadir al carrito
*/
add_action( 'init', 'ayudawp_eliminar_botones_carrito' );
function ayudawp_eliminar_botones_carrito() {
// Método 1: Remove actions estándar
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
remove_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
remove_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
remove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
}

/**
* Método adicional con prioridad alta para temas que cargan tarde los hooks
*/
add_action( 'wp', 'ayudawp_eliminar_botones_carrito_tardio', 99 );
function ayudawp_eliminar_botones_carrito_tardio() {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 15 );
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );
}

/**
* Filtro para interceptar y vaciar cualquier botón que se escape
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'ayudawp_eliminar_enlace_carrito', 10, 3 );
function ayudawp_eliminar_enlace_carrito( $link, $product, $args ) {
return '';
}

/**
* CSS específico para ocultar solo botones de carrito
* Preserva nuestros botones personalizados
*/
add_action( 'wp_head', 'ayudawp_ocultar_botones_css', 999 );
function ayudawp_ocultar_botones_css() {
?>
<style>
/* Oculta SOLO los botones de añadir al carrito, no nuestros botones personalizados */
.add_to_cart_button:not(.ayudawp-boton-contacto .button),
.product_type_simple,
.product_type_variable,
.product_type_grouped,
.product_type_external,
.single_add_to_cart_button,
.wc-forward,
a[href*="add-to-cart"]:not(.ayudawp-boton-contacto .button),
button[name="add-to-cart"],
input[name="add-to-cart"],
.woocommerce .products .product .button:not(.ayudawp-boton-contacto .button),
.woocommerce ul.products li.product .button:not(.ayudawp-boton-contacto .button),
.woocommerce-page .products .product .button:not(.ayudawp-boton-contacto .button),
.woocommerce-page ul.products li.product .button:not(.ayudawp-boton-contacto .button) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
overflow: hidden !important;
}

/* Asegura que nuestros botones personalizados sean visibles */
.ayudawp-boton-contacto,
.ayudawp-boton-contacto .button {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
}
</style>
<?php
}

/**
* Oculta todos los precios de productos
* Funciona con productos simples, variables y agrupados
*/
add_filter( 'woocommerce_get_price_html', 'ayudawp_ocultar_precios', 10, 2 );
function ayudawp_ocultar_precios( $price, $product ) {
return '';
}

/**
* Oculta precios de variaciones específicamente
* Necesario para productos variables
*/
add_filter( 'woocommerce_variation_price_html', 'ayudawp_ocultar_precios_variaciones', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'ayudawp_ocultar_precios_variaciones', 10, 2 );
function ayudawp_ocultar_precios_variaciones( $price, $product ) {
return '';
}

/**
* Elimina el formulario de variaciones pero mantiene la información visible
* Permite ver las opciones sin poder comprar
*/
add_action( 'woocommerce_single_product_summary', 'ayudawp_mostrar_variaciones_sin_compra', 25 );
function ayudawp_mostrar_variaciones_sin_compra() {
global $product;

if ( $product->is_type( 'variable' ) ) {
$variations = $product->get_available_variations();
$attributes = $product->get_variation_attributes();

if ( ! empty( $attributes ) ) {
echo '<div class="ayudawp-variaciones-info">';
echo '<h4>' . __( 'Opciones disponibles:', 'textdomain' ) . '</h4>';

foreach ( $attributes as $attribute_name => $options ) {
$attribute_label = wc_attribute_label( $attribute_name );
echo '<p><strong>' . $attribute_label . ':</strong> ';

$formatted_options = array();
foreach ( $options as $option ) {
if ( $option ) {
$formatted_options[] = $option;
}
}
echo implode( ', ', $formatted_options );
echo '</p>';
}
echo '</div>';
}
}
}

/**
* Añade botón de contacto en páginas de tienda y producto individual
*/
add_action( 'woocommerce_after_shop_loop_item', 'ayudawp_boton_contacto', 10 );
add_action( 'woocommerce_single_product_summary', 'ayudawp_boton_contacto', 35 );
function ayudawp_boton_contacto() {
global $product;

// URL de contacto - personalizable
$url_contacto = home_url( '/contacto/' ); // Cambia esta URL por la tuya

// Mensaje personalizable según el tipo de producto
if ( $product->is_type( 'variable' ) ) {
$texto_boton = __( 'Consultar opciones y precio', 'textdomain' ); // Puedes cambiar este texto
} else {
$texto_boton = __( 'Solicitar precio', 'textdomain' ); //Puedes cambiar este texto
}

echo '<div class="ayudawp-boton-contacto">';
echo '<a href="' . esc_url( $url_contacto ) . '" class="button alt">' . esc_html( $texto_boton ) . '</a>';
echo '</div>';
}

/**
* Elimina el selector de cantidad en productos variables
*/
add_filter( 'woocommerce_is_sold_individually', 'ayudawp_eliminar_cantidad', 10, 2 );
function ayudawp_eliminar_cantidad( $return, $product ) {
return true;
}

/**
* Oculta el mensaje "Selecciona las opciones" en productos variables
*/
add_filter( 'woocommerce_get_stock_html', 'ayudawp_ocultar_mensaje_seleccion', 10, 2 );
function ayudawp_ocultar_mensaje_seleccion( $html, $product ) {
if ( $product->is_type( 'variable' ) ) {
return '';
}
return $html;
}

/**
* CSS personalizado para estilos del catálogo
* Preserva nuestros botones personalizados
*/
add_action( 'wp_head', 'ayudawp_estilos_catalogo' );
function ayudawp_estilos_catalogo() {
?>
<style>
/* Estilos para la información de variaciones */
.ayudawp-variaciones-info {
background: #f8f8f8;
padding: 15px;
margin: 20px 0;
border-left: 4px solid #0073aa;
border-radius: 3px;
}
.ayudawp-variaciones-info h4 {
margin-top: 0;
color: #333;
}
.ayudawp-variaciones-info p {
margin-bottom: 10px;
}

/* Estilos para el botón de contacto - MUY ESPECÍFICOS */
.ayudawp-boton-contacto {
margin: 15px 0 !important;
display: block !important;
clear: both !important;
}
.ayudawp-boton-contacto .button {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
text-align: center;
padding: 12px 24px;
font-weight: 600;
background-color: #0073aa;
color: white;
text-decoration: none;
border-radius: 3px;
transition: background-color 0.3s ease;
position: relative !important;
left: auto !important;
height: auto !important;
width: auto !important;
overflow: visible !important;
}
.ayudawp-boton-contacto .button:hover {
background-color: #005a87;
}

/* Oculta elementos relacionados con compra en páginas individuales */
.single_variation_wrap,
.woocommerce-variation-price,
.woocommerce-variation-availability,
.quantity,
.ayudawp-oculto {
display: none !important;
}
</style>
<?php
}

/**
* Elimina enlaces relacionados con el carrito en el menú
* Opcional: comenta o borra el siguiente código si no quieres ocultar completamente el carrito
*/
add_filter( 'woocommerce_add_to_cart_fragments', '__return_empty_array' );
remove_action( 'woocommerce_widget_shopping_cart_total', 'woocommerce_widget_shopping_cart_subtotal', 10 );

/**
* Redirecciona la página del carrito a la tienda
* Opcional: comenta o borra el siguiente código si no quieres redirigir usuarios que accedan al carrito
*/
/*
add_action( 'template_redirect', 'ayudawp_redirigir_carrito' );
function ayudawp_redirigir_carrito() {
if ( is_cart() ) {
wp_redirect( wc_get_page_permalink( 'tienda' ) ); // Cambia esta URL por la tuya
exit;
}
}
*/

Con este fragmento de código hacemos lo siguiente:

1. Quitamos todos los botones de añadir al carrito en todas partes.
2. Quitamos los precios de los productos de todas partes.
3. Añadimos un botón desde los que contactar, pedir precio o lo que quieras.
4. Quitamos el carrito de los menús
5. Redireccionamos de la página de carrito a la de tienda

Elementos personalizables:

• URL de contacto en la función ayudawp_boton_contacto()
• URL de tienda (tienda) en la función ayudawp_redirigir_carrito
• Textos de botones
• Estilos CSS adaptables a tu tema

El resultado, pues el esperado, en la página de tienda…

Y en las páginas de producto individual, da igual si es simple, variable, agrupado, etc. …

Ahora ya solo te queda hacer lo siguiente:

• Guardar como borrador o borrar la página de carrito. si no activaste la redirección mediante código.
• Guardar como borrador o borrar la página de finalizar compra.

Además, puedes ocultar el mini carrito de los menús, con un poco de CSS:

.cart-contents.shopping-cart { display:none; }

¿Cómo añado los códigos?

En este enlace tienes un tutorial de cómo añadir códigos a WordPress, donde encontrarás opciones de todo tipo, desde las que requieren crear un archivo hasta las más sencillas, usando plugins.

¿Y no se puede hacer con plugins?

Pues claro, se puede, pero en esta ocasión la idea es que lo hagas sin necesidad de instalar ningún plugin. Pero vaya, si te asusta esto de los códigos, que no debiera, porque funcionan sí o sí, aquí tienes plugins de hacer el modo de catálogo:

• Yith Catalog Mode (gratis)
• WooCommerce Catalog Mode (Premium) – Como el anterior pero totalmente personalizable

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!