Add product attribute to Woocommerce's blocks in Gutenberg

Question

EDIT I: I have found the file where the old plugin Woocommerce Blocks sets the blocks: https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/master/src/BlockTypes/FeaturedCategory.php But where is it in the Woocommerce library?

EDIT II: Question in short:

How do you customize the Woocommerce Blocks to show more data than the build in functionality?

------------- background ------------

If you search for adding custom attributes for Woocommerce Blocks you find a lot of WordPress examples for this.

For example, this, where the answer points out, that you can add attributes by using the blocks.registerBlockType. But how to do this for Woocommerce Blocks?

I want to be able to add a data field to the HTML output. The data field should then call a product attribute and show if it exists.

So when you use the Woocommerce Blocks on your front page - for example, the size will be shown underneath the add to cart button - as in the image.

As you might know the functionality of showing/hiding the price, add-to-cart-button, reviews are already there, when you choose a Woocommerce Block on the editing site.

But I haven't found the place where this functionality is created.

This would also be a great help actually - if you could show me where in the Woocommerce Github library the blocks are being created. Maybe I can figure out my self how to filter through them and add the functionality

I know - based on a Udemy course - how to create a custom plugin and create a new blog-type, save and edit.

But I need to figure out what Woocommerce namespace is, how they create their blocks, and what their data is called. The Woocommerce developer handbook is not saying anything about this - not what I've found.

I've been searching the internet for three days now, and I just don't understand that I can't seem to find ANYTHING on this. That nobody else wants to customize this functionality in Woocommerce. I know it is a new function (blocks) in the core, but still.

I just need to be pointed in the right direction.

Elbe

I think the file you need to edit it here. github.com/woocommerce/woocommerce-gutenberg-products-block/… – Caucasus

Answer 1

I was dealing with the exact same problem as you and I found the answer by digging deeply on the WC blocks plugin repo.

I found that you have to apply a filter to this hook: woocommerce_blocks_product_grid_item_html

The original HTML is this:

<li class="wc-block-grid__product">
        <a href="{$data->permalink}" class="wc-block-grid__product-link">
            {$data->image}
            {$data->title}
        </a>
        {$data->badge}
        {$data->price}
        {$data->rating}
        {$data->button}
</li>

So that way you can filter the html code and modify it by adding this chunk of code to your functions.php and customizing it to fit your needs

function wc_add_date_to_gutenberg_block( $html, $data, $product ) {
    $dateStr = get_post_meta($product->get_id(), 'ticket_start_time', true);
    $date = new DateTime($dateStr);
    $data->date = "<p>Date: " . $date->format('d-m-Y H:i') . "</p>";
    $output = "
<li class=\"wc-block-grid__product\">
        <a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
            {$data->image}
            {$data->title}
        </a>
        {$data->date} <- I added this one
        {$data->badge}
        {$data->price}
        {$data->rating}
        {$data->button}
</li>
    ";

    return $output;
}

add_filter("woocommerce_blocks_product_grid_item_html", "wc_add_date_to_gutenberg_block", 10, 3);

Oxyacid

Wow - really :) That looks super nice. Thank you. – Warm

Answer 2

I'm not totally clear on what you're asking. You reference Gutenberg Blocks often, but have linked to a WooCommerce repository that doesn't have any Gutenberg Blocks.

But if I'm understanding you correctly, you're looking for the PHP template that controls products. You can find in content-product.php

You'll see a lot of calls to do_action which is core to WordPress hooks as used in plugin development.

<li <?php wc_product_class( '', $product ); ?>>
    <?php
    /**
     * Hook: woocommerce_before_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_open - 10
     */
    do_action( 'woocommerce_before_shop_loop_item' );

    /**
     * Hook: woocommerce_before_shop_loop_item_title.
     *
     * @hooked woocommerce_show_product_loop_sale_flash - 10
     * @hooked woocommerce_template_loop_product_thumbnail - 10
     */
    do_action( 'woocommerce_before_shop_loop_item_title' );

    /**
     * Hook: woocommerce_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_product_title - 10
     */
    do_action( 'woocommerce_shop_loop_item_title' );

    /**
     * Hook: woocommerce_after_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_rating - 5
     * @hooked woocommerce_template_loop_price - 10
     */
    do_action( 'woocommerce_after_shop_loop_item_title' );

    /**
     * Hook: woocommerce_after_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_close - 5
     * @hooked woocommerce_template_loop_add_to_cart - 10
     */
    do_action( 'woocommerce_after_shop_loop_item' );
    ?>
</li>

If you do a search for the action hooks defined in content-product.php, you'll find them defined in wc-template-hooks.php. Hooks are named actions that functions are added to. For example if you look into the woocommerce_after_shop_loop_item action, you'll find these two functions being attached to it.

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

The woocommerce_template_loop_product_link_close and woocommerce_template_loop_add_to_cart functions are defined in wc-template-functions.php

You could create an entirely new content-product.php file in your theme by creating a file in yourtheme/woocommerce/content-product.php, however you then lose a lot of the built in power and compatibility of WooCommerce.

Better would be to remove then add new actions to the woocommerce_after_shop_loop_item hook. For example, woocommerce_template_loop_product_link_close is currently defined as:

function woocommerce_template_loop_product_link_close() {
    echo '</a>';
}

You could overwrite this by doing this in your functions.php file:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );

function custom_template_loop_product_link_close() {
    echo 'Hello world!</a>';
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_template_loop_product_link_close', 5 );

I hope this helps.

Zhang

Hey Josh. Thank you for your answer. I have used this in development before. This is not what i am searching for. This will not customize the block in the Gutenberg editor. That is what i am searching for. To customize the woocommerce blocks to show more data than the build in functionality. – Warm

And those are in the WooCommerce repo you linked to? I couldn't find any Gutenberg blocks in there if that is the case. Can you point me to the right repository? – Zhang

They are created by this repository: Woocommerce Blocks - but i have to admit that my knowledge stops here. I have moved on using the older Woocommerce shortcodes and a custom code like you suggested. Most of all i find it weird that the new Woocommerce Blocks are so badly documented when it comes to customization. – Warm

Answer 3

You can add custom attributes to WooCommerce blocks just like you can add them to the WordPress default blocks using blocks.registerBlockType

However, there is a catch here. This will only work for those blocks which are not server-side rendered.

For server-side rendered blocks, we get an error like Error loading block: Invalid parameter(s): attributes as those attributes are not available at PHP end when the block is server-side rendered.

WooCommerce does not provide any specific filter to update the available attributes of their blocks.

Hence, the only way that remains is to filter the block's available arguments using the WordPress's filter register_block_type_args

Below is an example of adding a new custom attribute to the block woocommerce/product-tag

    add_filter(
            'register_block_type_args',
            function ( $args, $block_type ) {
                if ( 'woocommerce/product-tag' !== $block_type ) {
                    return $args;
                }

                $args['attributes']['animation'] = array(
                        'type'    => 'string',
                        'default' => '',
                );
                return $args;
            },
            10,
            2
    );

With the use of the conditional check, you can add new attributes to the required blocks.

You can use the same method to add new attributes to core blocks too.

Hope this helps.

Regards

Zanazander