Product collection Block: remove h3 heading for product name

Hello @lorangeo Can you share a URL please so we can see what blocks you are referring to and which you are using.

It’s a project in development. I have no URL. But it’s an official WooCommerce block whose name is “Product Collection (beta)”.

https://developer.woocommerce.com/2024/02/22/announcing-the-product-collection-block/

It can be found in the Gutemberg block editor (“Product Collection”).

Thanks. Just needed to know which Blocks you were using. There are so many now. Let me see about adding it to my test site and see what I find.

Try added this to a custom js file or something. This is the only method I can think of right now.

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    // You might need to adjust the selector based on how isProductCollectionBlock is used (class, data attribute, etc.)
    const collectionBlocks = document.querySelectorAll('.wc-block-product-template li h3');
    collectionBlocks.forEach(header => {
        const span = document.createElement('span');
        span.innerHTML = header.innerHTML;
        header.parentNode.replaceChild(span, header);
    });
});


</script>

This is a bit more complex and this should go in your functions file of your child theme. Both worked though after testing.

function change_wc_block_tags($block_content, $block) {
    // Here, we check if the block's HTML content contains the specific class
    if (strpos($block_content, 'wc-block-product-template') !== false) {
        // Load the HTML content into DOMDocument
        $dom = new DOMDocument();
        @$dom->loadHTML(mb_convert_encoding($block_content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

        // Create a new DOMXPath to handle queries within the DOM
        $xpath = new DOMXPath($dom);

        // Query all h3 elements within elements with the class 'wc-block-product-template'
        $h3elements = $xpath->query("https://*[contains(@class, 'wc-block-product-template')]//h3");

        // Iterate over all found h3 elements and replace them with span elements
        foreach ($h3elements as $h3) {
            $span = $dom->createElement('span');
            while ($h3->childNodes->length > 0) {
                $span->appendChild($h3->childNodes->item(0));
            }

            // Replace the h3 node with the new span node
            $h3->parentNode->replaceChild($span, $h3);
        }

        // Save the modified HTML back into a string
        $block_content = $dom->saveHTML();
    }

    return $block_content;
}
add_filter('render_block', 'change_wc_block_tags', 10, 2);

Wow! I did not test the first option, but the second one did the trick! Thank you very much!

It would be great if the developers could add this as an option to the block.

Yeah, I’m not a fan of using js, I prefer straight php. Both work though.

Add your feedback to their board. I’ll try let them know in our Slack if I get time.

Hi @lorangeo,

I’m happy to learn @serafinnyc has been able to help you already! That’s wonderful! Regarding adding this option as a base feature of the block, that’s a great suggestion!

We appreciate your suggestions and are always looking for ways to improve our products and services, and input from users like you is invaluable.

We have a website where you can submit feature requests and upvote the ones other people submitted and you like. You can check that out here.

Please let us know if there’s anything else we can do to help or if you have further questions.

Have a wonderful day!
-OP