2

Edit:

Where are the Woocommerce blocks located in Woocommerce code on Github? Answer:

As the answer underneath mentions the Woocommerce Block is a package so it is not shown on Github for the Woocommerce library but is called from: https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/master/assets/js/blocks



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.

enter image description here

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 havent'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 beying created. Maybe i can figure out my self how to filter through them and add the funcionality

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.

3
  • I have search and search and search and seen youtube videos - bit i couldn't find an answer or figure it out. I use the older shortcode method with this code Apr 10, 2020 at 20:37
  • Just a quick question, but if a product has an attribute with multiple values, how would it know which one of the values to display? Apr 11, 2020 at 19:37
  • Good question. In my case they only have one attribute each. Apr 12, 2020 at 13:56

2 Answers 2

2

As the blocks more more and more to front-end rendering... there's only one filter that I've been able to find for modifying the output of the blocks via PHP. woocommerce_blocks_product_grid_item_html and I'm not even sure if that will work on the All Products block which may/may not use the same code as the other products list blocks.

Here's an example that 1. removes the link and 2. adds the product's short description:

/**
 * Add short descriptions
 *
 * @param string $html
 * @param object $data
 * @param WC_Product $product
 * @return string
 */
function kia_blocks_product_grid_item_html( $html, $data, $product ) {
    $short_description = $product->get_short_description() ? '<div class="wp-block-grid__short-description">' . wc_format_content( $product->get_short_description() ) . ' </div>' : '';

    return 
        "<li class=\"wc-block-grid__product\">
            {$data->image}
            {$data->title}
            {$data->badge}
            {$data->price}
            {$data->rating}" .

            $short_description

            . "{$data->button}
        </li>";
}
add_filter( 'woocommerce_blocks_product_grid_item_html', 'kia_blocks_product_grid_item_html', 10, 3 );
1

Woocommerce blocks are located at woocommerce/packages/woocommerce-blocks/assets/js/blocks.

An example of how woocommerce registers the best-selling products block:

registerBlockType( 'woocommerce/product-best-sellers', {
    ...
} );

As you can see, the namespace is just woocommerce.

I didn't understand what you want to achieve with the custom data field. Could you explain it better?

1
  • Yes. This was just an example with the sizes. In my case (It is not an ideal setup but a compromise) i am creating a site for a publisher and the attribute is "Writer" because that is the only thing i can create with All Import daily import (all the data is imported from the distribution) that has a link for showing all the writers books. So the writers name should be visible in the Woocommerce Block loop so you can click on it for showing the other books. But it could be anything - a Advanced Custom Field for example - if you want to expand the functionality of the blocks Apr 12, 2020 at 13:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.