Override woocommerce/product-image image class

  • Resolved Rhand

    (@rhand)


    1 year, 4 months ago

    We have

    function add_custom_class__product_collection_images($block_content)

{

if (is_front_page() && strpos($block_content, 'wc-block-grid__product-image') !== false) {

// Simple string replacement

$block_content = str_replace('wc-block-grid__product-image', 'wc-block-grid__product-image hover:grow hover:shadow-lg', $block_content);

}

// Returns altered $block_content to be rendered

return $block_content;

}

// Add filter to 'woocommerce/product-image' block

add_filter('woocommerce/product-image', 'add_custom_class__product_collection_images');

    to override Woo Product Collections block images , but it is not working. Any ideas what we are missing?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Shameem R. a11n

    (@shameemreza)

    Hi @rhand

    The issue seems to be with the filter you’re trying to add. In WooCommerce, the woocommerce/product-image is not a valid hook. That’s why your function is not being executed.

    Instead, you should use render_block filter which is a WordPress core filter that allows you to modify the content of blocks.

    Please note that we can’t provide support for coding or customization as per our support policy. Still, if you need assistance, we recommend asking development questions on the #developers channel of the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question.

    I hope this provides some clarity. Please let us know if you have any other questions!

    Thread Starter Rhand

    (@rhand)

    Thanks for the feedback @shameenreza . Much appreciated. Yeah, realized too I needed to use render_block . Will be doing some more testing and if I get stuck I will check the WooCommerce community on stack. Thanks again.

    Thread Starter Rhand

    (@rhand)

    @shameemreza link to Woo community on Slack is no longer valid it seems..

    Hi @rhand

    I’m glad that @shameemreza suggestion worked on your end.

    In addition to the WooCommerce Developer Slack Channel, you can also each out to some of the great resources we have available for support. The WooCommerce community is filled with talented open-source developers, and many of them are active on the channels listed below:

    Hope this helps!

    Thread Starter Rhand

    (@rhand)

    Thanks @xue28 . Got access to WooCommerce Slack. Will ask for some assistance there. Did not solve the issue with suggestion, but I may in the upcoming days.

    Thread Starter Rhand

    (@rhand)

    Had to use an anonymous function in app/filter.php 

    // Add filter to 'woocommerce/product-image' block
add_filter('render_block', function ($block_content, $block) {
    if (is_front_page() && strpos($block_content, 'wc-block-grid__product-image') !== false) {
        // Simple string replacement
        if ($block['blockName'] === 'woocommerce/product-image') {
            $block_content = str_replace('wc-block-grid__product-image', 'wc-block-grid__product-image hover:grow hover:shadow-lg', $block_content);
        }
    }
    if ('woocommerce/product-image' === $block['blockName'] &&
        !empty($block['attrs']['className']) &&
        preg_match('/\bwc-block-grid__product-image\b/', $block['attrs']['className'])) {
        $block_content = 'wc-block-grid__product-image hover:grow hover:shadow-lg';
    }

    // Print to console
    // echo '<script>console.dir(' . json_encode($block) . ')</script>';

    // Returns altered $block_content to be rendered
    return $block_content;
}, 10, 2);

    • This reply was modified 1 year, 3 months ago by Rhand.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Override woocommerce/product-image image class’ is closed to new replies.