WooCommerce Visual Hook Guide: Cart Page (Block Version)

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        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @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-totals-block

bbloomer_before_woocommerce/cart-order-summary-block

bbloomer_before_woocommerce/cart-order-summary-heading-block

Cart totals

bbloomer_after_woocommerce/cart-order-summary-heading-block

bbloomer_before_woocommerce/cart-order-summary-coupon-form-block

bbloomer_after_woocommerce/cart-order-summary-coupon-form-block

bbloomer_before_woocommerce/cart-order-summary-subtotal-block

Subtotal€200.00

bbloomer_after_woocommerce/cart-order-summary-subtotal-block

bbloomer_before_woocommerce/cart-order-summary-fee-block

bbloomer_after_woocommerce/cart-order-summary-fee-block

bbloomer_before_woocommerce/cart-order-summary-discount-block

Discount-€100.00

bbloomer_after_woocommerce/cart-order-summary-discount-block

bbloomer_before_woocommerce/cart-order-summary-shipping-block

Shipping
Free
Shipping options

bbloomer_after_woocommerce/cart-order-summary-shipping-block

bbloomer_before_woocommerce/cart-order-summary-taxes-block

bbloomer_after_woocommerce/cart-order-summary-taxes-block

bbloomer_after_woocommerce/cart-order-summary-block

bbloomer_before_woocommerce/cart-express-payment-block

bbloomer_after_woocommerce/cart-express-payment-block

bbloomer_before_woocommerce/proceed-to-checkout-block

bbloomer_after_woocommerce/proceed-to-checkout-block

bbloomer_before_woocommerce/cart-accepted-payment-methods-block

bbloomer_after_woocommerce/cart-accepted-payment-methods-block

bbloomer_after_woocommerce/cart-totals-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        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @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        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @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:

Related content

  • WooCommerce: How to Fix the “Cart is Empty” Issue
    For some reason, sometimes you add products to cart but the cart page stays empty (even if you can clearly see the cart widget has products in it for example). But don’t worry – it may just be a simple cache issue (and if you don’t know what cache is that’s no problem either) or […]
  • WooCommerce: Remaining $$$ to Get Free Shipping Notification @ Cart
    This is a very cool snippet that many of you should use to increase your average order value. Ecommerce customers who are near the “free shipping” threshold will try to add more products to the cart in order to qualify for free shipping. It’s pure psychology. So, here’s how we show a simple message on […]
  • WooCommerce: Cart and Checkout on the Same Page
    This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same (Checkout) page. But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell no more than […]
  • WooCommerce: Weight-Based Shipping Methods
    With WooCommerce you get 3 default shipping methods: Flat Rate, Free Shipping, Local Pickup. For each one you can define a cost, however there is no way to set up some “weight” restrictions. So, what if you want to display a rate for orders below 10 kg, and another shipping rate for orders above that […]
  • WooCommerce: Hide Shipping Method If Shipping Class Is In The Cart
    Our goal is to check if a Product with a specific Shipping Class is in the Cart, and consequently disabling a shipping rate such as Free Shipping if this is true. This is super useful when there are multiple items in the cart and you don’t want to give free shipping for certain orders for […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *