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

LucusHost, el mejor hosting

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:

productos relacionados h2 a h3 woocommerce

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.

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 3.7)
mailerlite diegol

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

mailerlite diegol

Reader Interactions

comentarios

  1. Gema says

    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.

    • Diegol says

      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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *