Cómo eliminar las pestañas de producto en WooCommerce (descripción, valoraciones e info)

Cuando tenemos que encargarnos de un proyecto de tienda online, una de las opciones más habituales sigue siendo WordPress junto con su plugin WooCommerce. La combinación funciona bien, es robusta y permite montar un ecommerce sin complicarse demasiado, pero también tiene sus límites.

Uno de ellos es la rigidez en la maquetación de ciertos contenidos, especialmente en la ficha de producto. Si no tienes conocimientos de programación (o alguien que los tenga), enseguida te das cuenta de que WooCommerce decide por ti cómo y dónde se muestra cada cosa. Y uno de los ejemplos más claros son las famosas pestañas que aparecen al final del producto: descripción, valoraciones e información adicional.

En desarrollos de tiendas WooCommerce personalizados, no siempre interesa mostrar todas esas pestañas. A veces sobran, a veces duplican información o directamente rompen la experiencia de usuario. Vamos a ver cómo eliminarlas de forma controlada usando código.

Por defecto, esta herramienta muestra tres pestañas principales en la ficha de producto: descripción para el contenido largo del producto, valoraciones para opiniones y puntuaciones de los clientes e información adicional para atributos como peso, dimensiones, material, etc.

Algunas de ellas dependen de si hay contenido que mostrar, pero otras aparecen aunque no aporten demasiado. Y aquí es donde podemos vernos limitados, porque no contamos con una opción clara desde el panel para desactivarlas todas a tu criterio.

Cuando el diseño y la estructura del producto son importantes (algo muy habitual en proyectos de diseño WooCommerce bien cuidados), la solución pasa casi siempre por tocar código. En este caso es donde entra en acción un filtro que podemos usar personalizar estos aspectos.

El filtro woocommerce_product_tabs

WooCommerce pone a nuestra disposición el filtro woocommerce_product_tabs, que nos permite modificar el array de pestañas antes de que se rendericen en la ficha de producto. Eso posibilita modificar la plantilla del producto antes de que el comprador la vea en la pantalla de su dispositivo:

La idea con la que vamos a trabajar en los siguientes ejemplos en realidad es sencilla, y por eso es importante que tengas claro cómo funciona, así que no está de más especificarlo:

1. WooCommerce genera el listado de pestañas.
2. Interceptamos ese listado con un filtro.
3. Eliminamos las pestañas que no nos interesan usando unset().

Con ello estableceremos además una prioridad (la verás en forma del número 11) para asegurarnos de que nuestro código se ejecute después de que WooCommerce haya añadido todas las pestañas por defecto.

Antes de pasar a lo práctico, aprovecho para comentarte que puedes añadir los siguientes fragmentos de código en el archivo functions.php de tu tema, en un plugin propio o usando un plugin de snippets de código. Personalmente, en proyectos a medida de desarrollo WooCommerce, suelo optar por integrarlo en el código del tema. Pero cuando el tema no lo he hecho yo, entonces opto por hacer un plugin propio si no puedo modificar el tema hijo. No hay solución mala, solo decisiones a medida.

Eliminar la pestaña de descripción

Si quieres eliminar únicamente la pestaña de descripción del producto, puedes hacerlo de este modo:

/*
 * Eliminamos la pestaña "Descripción" del producto
 */
add_filter( 'woocommerce_product_tabs', 'eliminar_pestana_descripcion', 11 );

function eliminar_pestana_descripcion( $pestanas ) {

	unset( $pestanas['description'] );
	return $pestanas;

}

Claro está que esta opción es ideal si no usamos el campo de descripción del artículo. Mejor no mostrar una pestaña que no se usa que mostrarla vacía.

Eliminar la pestaña de valoraciones

Para ocultar la pestaña de valoraciones de los usuarios (reviews), el código es prácticamente idéntico al anterior:

/*
 * Eliminamos la pestaña "Valoraciones" del producto
 */
add_filter( 'woocommerce_product_tabs', 'eliminar_pestana_valoraciones', 11 );

function eliminar_pestana_valoraciones( $pestanas ) {

	unset( $pestanas['reviews'] );
	return $pestanas;

}

Esto es bastante habitual en tiendas que no permiten valoraciones, se quieren mostrar en otro lugar o simplemente no encajan con la estrategia del negocio.

Eliminar la pestaña de información adicional

La tercera pestaña habitual es la de información adicional, que muestra los atributos del producto:

/*
 * Eliminamos la pestaña "Información adicional" del producto
 */
add_filter( 'woocommerce_product_tabs', 'eliminar_pestana_informacion_adicional', 11 );

function eliminar_pestana_informacion_adicional( $pestanas ) {

	unset( $pestanas['additional_information'] );
	return $pestanas;

}

En muchos proyectos de diseño WooCommerce, esta pestaña se elimina porque la información se integra directamente en la descripción o en bloques personalizados.

Eliminar varias pestañas a la vez

Si lo que quieres es eliminar varias pestañas, no tiene sentido crear una función por cada una. Es más limpio y mantenible hacerlo todo desde una única función que sea más versátil que las anteriores:

/*
 * Eliminamos varias pestañas del producto
 */
add_filter( 'woocommerce_product_tabs', 'eliminar_pestanas_producto', 11 );

function eliminar_pestanas_producto( $pestanas ) {

	unset( $pestanas['description'] );
	unset( $pestanas['reviews'] );
	unset( $pestanas['additional_information'] );

	return $pestanas;

}

Este enfoque es el que suelo utilizar a la hora de trabajar creando tiendas online, ya que facilita ajustes futuros y evita código duplicado. Siempre que se pueda, hay que intentar ser eficiente.

Antes de eliminar pestañas

Antes de quitar pestañas porque sí, es importante reflexionar un poco sobre lo que conviene a la plataforma. A veces, que no te guste una cosa, no es motivo para quitarla. En entorno web hay que tener en cuenta algunos puntos importantes que van más allá de una cuestión de meros gustos:

• SEO: la descripción larga suele ser contenido relevante. Si la eliminas, asegúrate de que esa información aparece en otro lugar.
• Temas personalizados: algunos temas sobrescriben las pestañas o las reconstruyen con bloques. Conviene comprobarlo.
• UX: menos pestañas no siempre significa mejor experiencia. Depende del tipo de producto.
• Mantenimiento: agrupar el código en una sola función facilita futuras modificaciones.

He visto muchos casos en los que eliminar una pestaña mejoraba claramente la conversión por parte del cliente al simplificar la experiencia. Sin embargo en otros casos ha sucedido justo al revés. Por desgracia no hay una regla universal y lo ideal es que su eliminación venga desde una decisión meditada.

WooCommerce ofrece una base sólida para montar tiendas online, pero cuando necesitas un control fino sobre el diseño y la estructura de los productos, el código sigue siendo la mejor herramienta.

Si estás personalizando una tienda y necesitas ayuda con este tipo de ajustes (o con un desarrollo más a medida) estaré encantado de ayudarte como desarrollador WooCommerce freelance.

---

Referencias:

• Editando pestañas de datos de producto (inglés) – Documentación oficial de WooCommerce
• Código de ejemplo – Mi repo en GitHub.