I’ve put together a visual hook guide for the WooCommerce Cart Block (you can find the legacy shortcode version here).
Please note – as of the date above, you can’t really customize the Cart Block via PHP (unless you use the workaround below).
If you need to personalize the Cart page, move elements around, hide default elements, add custom content, you can play on the Edit Page and do the usual manual work with blocks: you can move them (e.g. you can move the coupon form to the bottom), remove them (e.g. you can remove the cross-sells block), place blocks in between default blocks (e.g. you can add some text above and below the “Place Order” button), etc.
But if you wish to do that via code (custom plugin, snippet, child theme), then you must revert to the shortcode version – unless, once again, you get to understand my workaround as per the below visual hook guide.
So, at least for now and until WooCommerce decides to release actions and filters for us developers, let’s see how to find WooCommerce Cart Block hooks quickly and easily by seeing their actual location.
Once you’ve picked your hook, all you need to do in your custom code is “add_action(‘hook_name’,’custom_function’);” and you can place your personalized content in that exact position within the WooCommerce Cart Block.
Enjoy!
Required PHP Snippet
In order to make the hooks (actions) work, you need to install the following into a Code Snippet, child theme functions.php or custom plugin.
You also need to keep an eye on the $blocks array, as I’ve manually entered the names of the WooCommerce Cart Block sub-blocks, which I found inside the get_cart_block_content() WooCommerce core function.
/**
* @snippet Create Hooks For WooCommerce Cart Block
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 9
* @community https://businessbloomer.com/club/
*/
add_filter( 'render_block', 'bbloomer_woocommerce_cart_block_do_actions', 9999, 2 );
function bbloomer_woocommerce_cart_block_do_actions( $block_content, $block ) {
$blocks = array(
'woocommerce/cart',
'woocommerce/filled-cart-block',
'woocommerce/cart-items-block',
'woocommerce/cart-line-items-block',
'woocommerce/cart-cross-sells-block',
'woocommerce/cart-cross-sells-products-block',
'woocommerce/cart-totals-block',
'woocommerce/cart-order-summary-block',
'woocommerce/cart-order-summary-heading-block',
'woocommerce/cart-order-summary-coupon-form-block',
'woocommerce/cart-order-summary-subtotal-block',
'woocommerce/cart-order-summary-fee-block',
'woocommerce/cart-order-summary-discount-block',
'woocommerce/cart-order-summary-shipping-block',
'woocommerce/cart-order-summary-taxes-block',
'woocommerce/cart-express-payment-block',
'woocommerce/proceed-to-checkout-block',
'woocommerce/cart-accepted-payment-methods-block',
);
if ( in_array( $block['blockName'], $blocks ) ) {
ob_start();
do_action( 'bbloomer_before_' . $block['blockName'] );
echo $block_content;
do_action( 'bbloomer_after_' . $block['blockName'] );
$block_content = ob_get_contents();
ob_end_clean();
}
return $block_content;
}
WooCommerce Cart Block Visual Hook Guide
Now that the snippet above is active, the WooCommerce Cart Block will now have its own action hooks. These will be named ‘bbloomer_before_‘ and ‘bbloomer_after_‘, followed by one of the block names.
For example,
'bbloomer_before_woocommerce/cart-totals-block'…will let you add content BEFORE the cart totals sub-block within the WooCommerce Cart Block.
Here’s the complete visual hook guide – you can find some usage examples below.
bbloomer_before_woocommerce/cart
bbloomer_before_woocommerce/filled-cart-block
bbloomer_before_woocommerce/cart-line-items-block
| Product | Details | Total |
|---|---|---|
Black bag €100.00
| €200.00 |
bbloomer_after_woocommerce/cart-line-items-block
bbloomer_before_woocommerce/cart-cross-sells-block
You may be interested in…
bbloomer_before_woocommerce/cart-cross-sells-products-block
-
WooCommerce Toggle Payments By Category Mini-Plugin
$29.00 /onceEnable or disable WooCommerce payment methods based on cart product categories
See Details -
WooCommerce Toggle Payments By Shipping Mini-Plugin
$29.00 /onceEnable or disable WooCommerce payment methods based on shipping method
See Details -
WooCommerce Add To: Cc: Bcc: Email Recipients Mini-Plugin
$29.00 /onceAdd extra To, CC, and BCC recipients to WooCommerce emails
See Details
bbloomer_after_woocommerce/cart-cross-sells-products-block
bbloomer_after_woocommerce/cart-cross-sells-block
bbloomer_after_woocommerce/filled-cart-block
bbloomer_after_woocommerce/cart
WooCommerce Cart Block Visual Hook Guide Usage
Let’s say that you want to display some content (text, image, a script, whatever) in a specific WooCommerce Cart Block position.
With the visual guide, you identify the position and note the name of the hook. Then, you trigger your function to echo the content. It’s that simple.
Here are a couple of examples:
PHP Snippet 1: Display Something Before The “Proceed to Checkout” Button @ WooCommerce Cart Block
The correct hook here is ‘bbloomer_before_woocommerce/proceed-to-checkout-block‘. Let’s now hook in our custom function and echo something.
/**
* @snippet Add Content Above Proceed to Checkout (WooCommerce Cart Block)
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 9
* @community https://businessbloomer.com/club/
*/
add_action( 'bbloomer_before_woocommerce/proceed-to-checkout-block', function() {
echo 'whatever';
});
Result:
PHP Snippet 2: Display New Products Below The Cross-Sells @ WooCommerce Cart Block
The correct hook here is ‘bbloomer_after_woocommerce/cart-cross-sells-block‘. Let’s now hook in our custom function and echo something – in this case we’ll display a product block!
/**
* @snippet Add Product Block Below Cross-Sells (WooCommerce Cart Block)
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 9
* @community https://businessbloomer.com/club/
*/
add_action( 'bbloomer_after_woocommerce/cart-cross-sells-block', function() {
echo '<h2>Just in!</h2>';
echo do_blocks( '<!-- wp:woocommerce/product-new {"columns":4,"rows":1} /-->' );
});
Result:
