• Resolved JayFry

    (@jayfry)


    Hot to extend product collection block?
    I need it to show product short description and status by default.
    I noticed this block uses under the hood ‘woocommerce\product-template’ hook.
    So I wrote some code utilizing Blook Hooks API:

    function example_block_hooks($hooked_blocks, $position, $anchor_block, $context) {

    if ($anchor_block === "woocommerce/product-template" && $position === 'before') {
    $hooked_blocks[] = 'woocommerce/product-summary';
    $hooked_blocks[] = 'woocommerce/product-stock-indicator';
    }


    return $hooked_blocks;
    }
    add_filter('hooked_block_types', 'example_block_hooks', 10, 4);

    But it doesn’t work. When I add this code my markup gets ignoredHookedBlocks attribute. Why is that?

    <div class="wp-block-woocommerce-product-collection">
    <!-- wp:woocommerce/product-summary /-->
    <!-- wp:woocommerce/product-stock-indicator /-->
    <!-- wp:woocommerce/product-template {"metadata":{"ignoredHookedBlocks":["woocommerce/product-summary","woocommerce/product-stock-indicator"]}} -->

    How would you extend product collection?
    It’s so counter-intuitive and complex I’m loosing my mind.

    • This topic was modified 11 months, 1 week ago by JayFry.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi @jayfry,

    Ahh ah! I totally get how frustrating this can be situations like this can throw even the most experienced developer off balance.

    The issue you’re running into is caused by the “ignoredHookedBlocks” metadata:

    "ignoredHookedBlocks": ["woocommerce/product-summary", "woocommerce/product-stock-indicator"]

    This is automatically injected to avoid block duplication. Even if you try to add product-summary or product-stock-indicator using block hooks, WordPress skips them if they’re listed in ignoredHookedBlocks.

    A better approach would be to create a custom block pattern that includes the blocks you want. Here’s an example you can use:

    function register_custom_product_collection_pattern() {
        if ( function_exists( 'register_block_pattern' ) ) {
            register_block_pattern(
                'my-theme/product-collection-extended',
                array(
                    'title'       => __( 'Extended Product Collection', 'your-theme-slug' ),
                    'description' => __( 'Product collection with summary and stock indicator', 'your-theme-slug' ),
                    'content'     => '
    <!-- wp:woocommerce/product-collection -->
    <div class="wp-block-woocommerce-product-collection">
        <!-- wp:woocommerce/product-template -->
        <div class="wp-block-woocommerce-product-template">
            <!-- wp:woocommerce/product-image /-->
            <!-- wp:woocommerce/product-title /-->
            <!-- wp:woocommerce/product-summary /-->
            <!-- wp:woocommerce/product-price /-->
            <!-- wp:woocommerce/product-stock-indicator /-->
            <!-- wp:woocommerce/product-button /-->
        </div>
        <!-- /wp:woocommerce/product-template -->
    </div>
    <!-- /wp:woocommerce/product-collection -->',
                    'categories'  => array( 'woocommerce' ),
                )
            );
        }
    }
    add_action( 'init', 'register_custom_product_collection_pattern' );

    Once added, you can use this block pattern from the editor by searching for “Extended Product Collection”.

    While I’m happy to help point you in the right direction, this kind of customization falls outside the general support scope. If you need more in-depth help, you can reach out to a developer via platforms like codeable.io, or post in Woo’s Slack community to get input from others.

    @jayfry Please don’t forget to update “Your-theme-slug” to the actual slug of the theme you have installed. In this case it’ll be the name of your theme. E.g if your theme is located in https://domain.com/wp-content/themes/mytheme then replace “your-theme-slug” with “mytheme” in the code I shared with you.

    Thread Starter JayFry

    (@jayfry)

    Hi!
    Thank you for helping!
    But unfortunately this doesn’t work. When I paste newly created “Extended Product Collection” block. It says “Try to restore HTML”. And it doesn’t show. Here is markup:

    <!-- wp:woocommerce/product-collection {"queryId":15,"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"featured":false,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[],"filterable":false,"relatedBy":{"categories":true,"tags":true}},"tagName":"div","displayLayout":{"type":"flex","columns":3,"shrinkColumns":true},"dimensions":{"widthType":"fill"},"queryContextIncludes":["collection"],"__privatePreviewState":{"isPreview":false,"previewMessage":"Фактические товары будут отличаться в зависимости от просматриваемой страницы."},"metadata":{"categories":["woocommerce"],"patternName":"my-theme/product-collection-extended","name":"Extended Product Collection"}} -->
    <div class="wp-block-woocommerce-product-collection"><!-- wp:woocommerce/product-template -->
    <div class="wp-block-woocommerce-product-template">

    <!-- wp:woocommerce/product-image /-->

    <!-- wp:woocommerce/product-title /-->

    <!-- wp:woocommerce/product-summary /-->

    <!-- wp:woocommerce/product-price /-->

    <!-- wp:woocommerce/product-stock-indicator /-->

    <!-- wp:woocommerce/product-button /-->
    </div>
    <!-- /wp:woocommerce/product-template --></div>
    <!-- /wp:woocommerce/product-collection -->
    Thread Starter JayFry

    (@jayfry)

    I think I get your point and figured out how to fix it. But the problem when I choose different collection type “Popular products”, etc – it’s resets to default layout.

    Hi @jayfry.

    Thank you for getting back to me and for the clarification. I’ve taken some time to review the situation, and it looks like the workaround that could resolve this would require more advanced custom coding.

    Since this goes beyond our support scope, I recommend reaching out to a developer through platforms like codeable.io, or posting in the WooCommerce Slack community. Other experienced developers there might also offer alternative solutions that better fit your setup.

    Plugin Support Feten L. a11n

    (@fetenlakhal)

    Hi there,

    Thanks again for reaching out! Since it’s been a while, I’ll close this out for now, but we’re always here when you need us.

    Apart from this, if you found our help useful, we’d love your feedback: https://ww.wp.xz.cn/support/plugin/woocommerce/reviews/#new-post

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Product Collection Block’ is closed to new replies.