Cómo quitar los encabezados repetidos de las pestañas de producto en WooCommerce

No sé si te habrás fijado pero, por defecto, las pestañas de producto de WooCommerce tienen una muy mala costumbre, y es repetir el nombre de la pestaña cuando está abierta con un encabezado con etiquetado H2.

Aunque también es cierto que esto no pasa con otros temas como Proteo, Astra o Divi, sí te lo vas a encontrar en todos los temas por defecto de WordPress, en Storefront y muchos otros.

Es una redundancia incluir repetido el nombre de la pestaña dentro de la misma, además de que añade un etiquetado para SEO en muchas ocasiones totalmente innecesario, a veces incluso perjudicial.

Por estos motivos, si quieres quitar esos encabezados repetidos del nombre de las pestañas hay varias maneras de hacerlo.

Cómo quitar el encabezado de la pestaña de descripción

Para mucha gente es más que suficiente con quitar el encabezado repetido de la pestaña de descripción, pues es la que sale abierta por defecto.

Si es tu caso el siguiente código es tu salvación:

/* Quitar encabezado de pestaña descripción de producto */
add_filter( 'woocommerce_product_description_heading', '__return_null' );

Añádelo al final del archivo functions.php del tema hijo activo y ya está.

Cómo ocultar todos los encabezados repetidos de las pestañas de producto

En este caso la solución más sencilla es con un poco de CSS, este:

/* Ocultar encabezados de pestañas de producto */
.woocommerce-tabs h2 {
display: none;
}

De un plumazo los ocultas todos, el resultado es completo…

Ahora bien, si prefieres ocultar solo alguna de las pestañas, no todas, el código CSS cambiará.

/* Ocultar encabezado de pestaña Descripción */
.woocommerce-tabs #tab-description h2 {
display: none;
}

/* Ocultar encabezado de pestaña Valoraciones */
.woocommerce-tabs #tab-reviews h2 {
display: none;
}

/* Ocultar encabezado de pestaña Información adicional */
.woocommerce-tabs #tab-additional_information h2 {
display: none;
}

Cómo ocultar el encabezado de pestañas personalizadas

¿Y si uso un plugin para personalizar pestañas?

Bien pensado.

No sé cómo se hace con cada plugin de pestañas personalizadas para WooCommerce, pero si usas el que suelo recomendar, Custom Product Tabs for WooCommerce, tienes una función con la que quitar todos los encabezados de tus pestañas personalizadas, este:

/* Quitar encabezados de pestañas personalizadas de productos */
add_filter( 'yikes_woocommerce_custom_repeatable_product_tabs_heading', '__return_false' );

Solo tienes que añadir el código al archivo functions.php del tema, como siempre.

El resultado es inmediato:

¡Ya está!

Me lo pedíais el otro día en los comentarios y aquí lo tenéis 🙂

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