WooCommerce es un sistema de comercio electrónico muy flexible, gracias al hecho de incluir lo básico en su core y contar con, literalmente, miles de plugins que extienden sus capacidades. Eso permite usarlo de formas que, en principio, no son las habituales para un comercio electrónico, pero que en determinados casos pueden ser muy útiles. Una de estas formas es utilizar WooCommerce para crear un catálogo de productos.

WooCommerce como catálogo

Aunque, como decía, no es lo habitual para un comercio electrónico, la realidad es que convertir WooCommerce en un catálogo es bastante más habitual de lo que parece, y hay múltiples casos en los que esta funcionalidad es necesaria, dado que las características de WooCommerce hacen que sea muy cómodo para introducir un catálogo online, estructurarlo gracias a las categorías y las etiquetas, y hacerlo navegable y fácilmente accesible, incluso permitiendo añadirle características específicas recurriendo a plugins adicionales.

Para conseguir convertir WooCommerce en un catálogo de productos tendríamos, simplemente, que eliminar los botones de añadir al carrito («seleccionar opciones», para los productos variables). Adicionalmente, podemos querer ocultar los precios, o incluso añadir un botón para que el usuario solicite una oferta, facilitando así la generación de leads y contactos comerciales.

Ya hay muchos plugins que realizan todas esas funciones, y algunas más. Te hablo de los más recomendables en esta entrada:

Modo catálogo en WooCommerce sin utilizar plugins

Sin embargo, utilizar para esto un plugin no siempre es lo más adecuado, sobre todo si no tenemos necesidades especiales. Se trata de plugins pesados, con muchas funcionalidades que quizá no necesitemos y que pueden sobrecargar el sitio web, con los consiguientes retrasos en las cargas de página. Más aún si la web ya tiene un exceso de plugins.

Por eso, si nuestras necesidades para el catálogo son las básicas, sin requerimientos especiales, podemos hacerlo mediante código y aligerar la carga de la web. Veamos cómo.

Nota: al final de la entrada te explico cómo añadir estos códigos personalizados en tu web, por si aún no sabes hacerlo.

Eliminar el botón añadir al carrito

El primer paso será eliminar el botón Añadir al carrito, tanto en las páginas de archivo (tiendas, categorías, resultados de búsqueda…) como en la página de producto.

En principio el botón se podría ocultar mediante CSS, pero ésa es la solución mala: el botón sigue ahí, y cualquier visitante con mínimos conocimientos puede hacer que se muestre; además, sobrecargamos la web innecesariamente, ya que primero WooCommerce incluye el código para generar el botón y después nosotros añadimos CSS adicional para ocultarlo.

El modo óptimo de hacerlo es anular la función que hace que WooCommerce lo genere. Para ello podemos utilizar la función remove_action, que permite revocar la orden de crearlo. Para eliminar los botones de añadir al carrito en las páginas de archivo sería el siguiente:

add_action('init', function() {remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );}, 10);

Como ves, es un código muy sencillo. Con él ya no se mostrarán los botones añadir al carrito que por defecto aparecen en los bucles de producto: página de tienda, listados de categorías y etiquetas, resultados de búsqueda…

Ahora falta el botón de la página de producto (no sólo hay que quitar el botón, sino también el campo de cantidad). Para ello basta este otro código:

add_action('woocommerce_single_product_summary', function() {remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );}, 10);

Así, juntándolos ambos podemos eliminar los botones añadir al carrito de toda la tienda:

add_action('init', function() {remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );}, 10);
add_action('woocommerce_single_product_summary', function() {remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );}, 10);

Añadir un botón para solicitar oferta o presupuesto

Si queremos ir un paso más allá, podemos poner un botón para que el usuario solicite una oferta o presupuesto en el lugar donde debería estar el botón de añadir al carrito. Esto se puede hacer tan complejo como uno quiera, pero en la versión más sencilla es simplemente un botón que en realidad enlaza a la página de contacto o a un formulario específico para la petición del presupuesto.

Esto lo podemos hacer fácilmente añadiendo el código correspondiente:

add_action('woocommerce_single_product_summary', function() {echo '<a class="single_add_to_cart_button button alt" href="">Solicitar oferta';}, 20);

Sólo debes introducir en href="[aquí]" el enlace al formulario de petición de presupuesto o de contacto de tu sitio web.

Cómo añadir estos códigos a tu web

Añadir códigos personalizados a WordPress es relativamente sencillo, y hay varias formas de hacerlo. La más común es usando el archivo functions.php, aunque quizá no sea la más recomendable. También puedes utilizar algún plugin para ello, como Code Snippets o, incluso, crear tu propio plugin para funciones personalizadas.

En estas entradas te explico cómo hacerlo para cada uno de estos sistemas, y las ventajas y desventajas que tienen: