Cambiar de H2 a H3 los productos relacionados en el producto WooCommerce

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.