I am developping a wordpress theme using the WooCommerce plugin. For a specific role, I want the “Proceed to checkout” button on cart block to be replaced with a custom button with a custom link that I will handle in my theme for a custom action.
With the old Woocommerce version or using the cart page with cart shortcode instead of block, it can easily be done by overriding php templates in the theme with the correct naming system.
But with the new sywtem, most of the HTML structure are now in JS/React code, and I can’t figure how to remove or add custom html to a block.
I can’t really switch to the shortcode cart because all the styling is already done based on the block html structure and css classes.
Fow now, I tried using the wordpress “render_block” hook to try to override block content :
add_action('render_block', [$this, 'handleProceedToCheckoutButton'], 10, 2);
public function handleProceedToCheckoutButton($blockContent, $block)
{
if ('woocommerce/proceed-to-checkout-block' === $block['blockName']) {
$blockContent = "<a href='#'>My custom button</a>";
}
return $blockContent;
}
This doesn’t work as it adds my custom button on the block, but it doesn’t remove the existing button.
In the same hook, I also tried to replace $block['innerHTML']
, $block['innerContent']
and $block['render_callback']
.
Is there any way of overriding those blocks contents to customize HTML structure ?
A solution for completely disabling this block depending on some conditions can be a solution too, as I can add my custom button directly with the block editor with a button block or custom shortcode block
Valentin Jacquement is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.