Woocommerce - Is it possible to use hooks in gutenberg blocks?

JohnHenrique
September 28, 2023
269 views
0 votes
2 Answers

In my home page use gutenberg blocks (WooCommerce Products Recents), works fine. But I need add some text itens on title of products.

When using WooCommerce shortcodes, works fine but not work when using blocks.

How hook/filter blocks?

function my_info(){
    // some logic
    echo "(sold out)";
}
add_action('woocommerce_after_shop_loop_item_title', 'my_info', 999);

Looking for a way to use an action or filter to interact with blocks.

Answers

- mokorana
- September 27, 2023 at 5:32 pm
- 0 votes
0
It’s not that easy with Gutenberg blocks. To extend blocks you need to have at least basic knowledge in React. Maybe the following link from WooCommerce might help you:

https://developer.woocommerce.com/2023/08/07/extending-the-woocommerce-checkout-block-to-add-custom-shipping-options/

Login or Signup to reply.

- Norbert
- September 28, 2023 at 7:26 am
- 0 votes
0
Can You Use Hooks?

In the Gutenberg block system, PHP hooks like those you’re used to in WooCommerce won’t directly apply. Gutenberg blocks are primarily constructed using JavaScript, particularly ReactJS. Therefore, the PHP-based WordPress hooks don’t interact with these blocks in the way they would with PHP-generated content.

How to Achieve Similar Functionality?
1. Custom Block: Create a custom Gutenberg block that incorporates your specific modifications.
```
const { registerBlockType } = wp.blocks;
registerBlockType('your-custom-block/name', {
    // block settings...
});
```
2. Dynamic Blocks: Use a Dynamic Block that renders with PHP. In the PHP function that renders your block, you can add your custom hook.
```
register_block_type( 'your-custom-block/name', array(
    'render_callback' => 'your_render_function'
));
```
  In your_render_function, include:
```
do_action('woocommerce_after_shop_loop_item_title', 'your_parameters');
```
3. JavaScript Hooks: If the block exposes JavaScript actions or filters, you can use those to modify its behavior.
```
function modifyBlock(settings, name) {
    // your modifications
}
wp.hooks.addFilter('blocks.registerBlockType', 'your-plugin/modify-block', modifyBlock);
```
What about WooCommerce Blocks?

WooCommerce-specific blocks may expose their own hooks or methods for customization. Consult the WooCommerce Blocks documentation for those specifics.

While traditional PHP WordPress hooks won’t directly work with Gutenberg blocks, you can use a combination of custom blocks, dynamic blocks, and JavaScript hooks to achieve similar outcomes.
Login or Signup to reply.