Hi Xtemos team,
I’m using the Woodmart theme in combination with WooCommerce and Elementor, and I’ve encountered a challenge I hope you can assist with.
What I’m trying to achieve:
I want the product titles in archive views (such as the shop page, carousels, and category blocks) to use a <span> instead of a <h3> element. In other words, I’d like to change:
html
Kopiëren
Bewerken
<h3 class=”wd-entities-title”>…</h3>
to:
html
Kopiëren
Bewerken
<span class=”wd-entities-title”>…</span>
This change is important for us because the product titles should not be semantic headings for SEO and structural reasons. The heading hierarchy is managed elsewhere on the page.
What I’ve done so far:
I’ve overridden the woocommerce_template_loop_product_title() function in inc/integrations/woocommerce/template-tags.php as follows:
php
Kopiëren
Bewerken
if ( ! function_exists( ‘woocommerce_template_loop_product_title’ ) ) {
function woocommerce_template_loop_product_title() {
echo ‘<span class=”wd-entities-title”>‘ . get_the_title() . ‘</span>’;
}
}
This change works in certain areas, but I still see <h3 class=”wd-entities-title”> being rendered in other components, especially within Elementor product grids, Woodmart carousels, and AJAX-loaded product blocks.
To ensure the change is applied across the frontend, I also added a JavaScript fallback in the Custom JS section of the Woodmart theme settings:
js
Kopiëren
Bewerken
jQuery(document).ready(function($) {
function convertH3ToSpan() {
$(‘.wd-entities-title’).each(function() {
const $h3 = $(this);
const htmlContent = $h3.html();
const $span = $(‘<span class=”wd-entities-title”>’ + htmlContent + ‘</span>’);
$h3.replaceWith($span);
});
}
convertH3ToSpan();
$(document).on(‘wdShopPageInit wdProductsLoadMoreLoaded wdProductsTabsLoaded’, function() {
convertH3ToSpan();
});
});
document.addEventListener(“DOMContentLoaded”, function () {
const successContent = document.querySelector(“.ml-form-successContent h4”);
if (successContent) {
const span = document.createElement(“span”);
span.innerHTML = successContent.innerHTML;
successContent.replaceWith(span);
}
});
The issue:
Although the DOM now shows <span> instead of <h3>, heading checkers and SEO tools still detect the original <h3> tags. This suggests the tags are still being output server-side in some components that do not rely on the modified template function.
What I need:
Could you please advise on the following:
Which files or templates are responsible for rendering product titles in the Woodmart product blocks, carousels, and Elementor widgets?
Is there a recommended way to override these templates so that the product titles consistently use a <span> instead of <h3> across the entire site?
Thank you in advance for your assistance.
Best regards,
Gian
.
