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.
3
Answers
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.If you do a search for the action hooks defined in
content-product.php
, you’ll find them defined inwc-template-hooks.php
. Hooks are named actions that functions are added to. For example if you look into thewoocommerce_after_shop_loop_item
action, you’ll find these two functions being attached to it.The
woocommerce_template_loop_product_link_close
andwoocommerce_template_loop_add_to_cart
functions are defined inwc-template-functions.php
You could create an entirely new
content-product.php
file in your theme by creating a file inyourtheme/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:You could overwrite this by doing this in your
functions.php
file:I hope this helps.
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:
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 needsYou 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
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