Después del tutorial de cómo quitar el h2 automático de Descripción o Cambiar el encabezado del catálogo de WooCommerce, me llegaron muchas consultas de cómo modificar el resto de encabezados mal puestos. Así que en este tutorial os voy a enseñar cómo cambiar el encabezado de los productos relacionados en WooCommerce.
Contexto
Por defecto este encabezado viene en H2 en WooCommece, lo que hace que tenga la misma importancia que el resto de encabezados que hemos puesto en la descripción del producto para posicionar.
Esto se repite en todos los productos, así que con el siguiente ajuste le bajaremos la importancia para dársela al contenido que de verdad importa.
Snippet a añadir
Lo primero deberemos tener un Tema hijo o child theme instalado, para que al actualizar la plantilla estos cambios no se vayan. Una vez hecho esto copiamos y pegamos este código en el functions.php de nuestra plantilla:
Para pasar todo a <div> sin encabezados:
// Cambiar los encabezados de los productos relacionados
add_action('woocommerce_after_single_product', 'cambiar_encabezado_productos_relacionados');
function cambiar_encabezado_productos_relacionados() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Título de "Productos relacionados"
const relatedTitle = document.querySelector('.related h2');
if (relatedTitle) {
const newDiv = document.createElement('div');
newDiv.innerHTML = relatedTitle.innerHTML;
newDiv.className = relatedTitle.className;
relatedTitle.parentNode.replaceChild(newDiv, relatedTitle);
}
// Títulos de cada producto en productos relacionados
const relatedProductTitles = document.querySelectorAll('.related .woocommerce-loop-product__title');
relatedProductTitles.forEach(title => {
const newDiv = document.createElement('div');
newDiv.innerHTML = title.innerHTML;
newDiv.className = title.className;
title.parentNode.replaceChild(newDiv, title);
});
});
</script>
<?php
}
Mantener el encabezado de productos relacionados pero pasar a h3
// Cambiar el encabezado principal de "Productos relacionados" a h3
add_action('woocommerce_after_single_product', 'cambiar_encabezado_productos_relacionados');
function cambiar_encabezado_productos_relacionados() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Seleccionar el encabezado principal "Productos relacionados"
const relatedTitle = document.querySelector('.related h2');
if (relatedTitle) {
const newH3 = document.createElement('h3'); // Crear un nuevo elemento h3
newH3.innerHTML = relatedTitle.innerHTML; // Copiar el contenido del h2
newH3.className = relatedTitle.className; // Copiar las clases del h2
relatedTitle.parentNode.replaceChild(newH3, relatedTitle); // Reemplazar h2 con h3
}
// Mantener los títulos de los productos individuales como están
const relatedProductTitles = document.querySelectorAll('.related .woocommerce-loop-product__title');
relatedProductTitles.forEach(title => {
const newDiv = document.createElement('div'); // Mantener como div
newDiv.innerHTML = title.innerHTML;
newDiv.className = title.className;
title.parentNode.replaceChild(newDiv, title);
});
});
</script>
<?php
}
Con esto si usamos el inspector o una extensión para ver los encabezados podemos comprobar que pasa a H3:

Si lo queréis pasar a otro encabezado o un div, tan fácil como modificar la etiqueta dentro del código.
Se podría hacer también modificando las plantillas de WooCommerce, pero creo que esto es mucho mejor tanto de tiempo como optimización.
Quitar H2 de las ventas Dirigidas
// Modificar encabezados de las ventas dirigidas (upsells) en WooCommerce
add_action('wp_footer', 'cambiar_encabezado_upsells_wc');
function cambiar_encabezado_upsells_wc() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Seleccionar el título de "También te recomendamos..."
const upsellsTitle = document.querySelector('.up-sells.upsells.products h2');
if (upsellsTitle) {
const newDiv = document.createElement('div');
newDiv.innerHTML = upsellsTitle.innerHTML;
newDiv.className = upsellsTitle.className; // Mantener la clase original
upsellsTitle.parentNode.replaceChild(newDiv, upsellsTitle);
}
// Títulos de cada producto en la sección upsells
const upsellProductTitles = document.querySelectorAll('.up-sells .woocommerce-loop-product__title');
upsellProductTitles.forEach(title => {
const newDiv = document.createElement('div');
newDiv.innerHTML = title.innerHTML;
newDiv.className = title.className;
title.parentNode.replaceChild(newDiv, title);
});
});
</script>
<?php
}
Si te gustan este tipo de tutoriales con miniajustes de WooCommerce te recomiendo ver el resto.
Cualquier duda como siempre dejarla en comentarios.
Al añadir ese snippet me aparece el siguiente mensaje:
El fragmento de código ha sido desactivado debido a un error en la línea 4:
No se puede redeclarar la función woocommerce_product_loop_start.
Hola Gema,
Es un código que suelo usar y sigue funcionando. ¿Lo has introducido en el functions.php del Child? En el code snippets no funciona.
Si has hecho esto entonces la plantilla que tengas te da la incompatibilidad.
Un saludo!