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:
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 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.
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/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.
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.
Share Improve this question edited Jun 15, 2020 at 8:21 CommunityBot 1 asked Apr 5, 2020 at 16:28 Peter Højlund AndersenPeter Højlund Andersen 1319 bronze badges 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 – Peter Højlund Andersen Commented 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? – Tony Djukic Commented Apr 11, 2020 at 19:37
- Good question. In my case they only have one attribute each. – Peter Højlund Andersen Commented Apr 12, 2020 at 13:56
2 Answers
Reset to default 2As 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 );
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?