How to Add a Custom Button to the WooCommerce Cart Page

You can add a custom button to the WooCommerce cart page in about ten minutes. The code depends on which cart your store uses: the Cart block or the classic shortcode cart.

Most guides still show a classic hook, and that hook does nothing on the Cart block. We tested every method here on a WooCommerce 11.2.0 test store in October 2026. The two themes were Twenty Twenty-Five and Twenty Twenty-One.

You will learn how to tell which cart you have, add a button with no code, add one with PHP, and style it. A fix list at the end covers a button that refuses to show.

Which WooCommerce Cart Page Do You Have?

Your store uses either the Cart block or the classic cart shortcode. The Cart block is a page built from blocks, and the classic cart is the shortcode [woocommerce_cart]. Go to WooCommerce > Status and read the Cart line under WooCommerce pages to see which one you have.

Stores created on WooCommerce 8.3 or later get the Cart block by default. The WooCommerce 8.3 release post from November 16, 2023 says users updating to 8.3 keep their existing checkout experience. So an older store can still run the shortcode cart.

On our test store the Cart line reads that the page contains the woocommerce/cart block. After we pointed WooCommerce at a page with the shortcode, the same line read that it contains the [woocommerce_cart] shortcode.

Check this line before you copy any code. The right snippet for the WooCommerce Cart block is the wrong snippet for a shortcode cart, and the reverse is also true.

Why Classic WooCommerce Cart Page Hooks Do Nothing on the Cart Block

Classic cart hooks such as woocommerce_proceed_to_checkout run on the shortcode cart and not on the Cart block. The WooCommerce hook alternatives list marks that hook as not supported. On our WooCommerce 11.2.0 test store, four hooks printed a button on the shortcode cart and nothing on the Cart block.

That is why the old advice fails on a new store. You add the hook, save the file, reload the cart, and see no change at all.

The same WooCommerce document points to a PHP route for blocks. It says the render_block_{$name} filter can render content before and after blocks. The WordPress reference for render_block_{$name} says it filters the content of a single block, and it has existed since WordPress 5.7.0.

Note: The same document lists Slot and Fill as another route for the blocks. Method 3 below tests it on WooCommerce 11.2.0.

Method 1: Add a Custom Button With the Block Editor and No Code

A Buttons block placed under the Cart block adds a button with no code. It shows below the whole cart. It cannot sit beside Proceed to Checkout. Use it for a Continue shopping link or a link to a help page.

1. Open the Cart page: Go to Pages > All Pages and edit the page named Cart.
2. Add a Buttons block: Add a Buttons block after the Cart block. Set the text to Continue shopping and link it to your shop page.
   
3. Update the page: Click Update, add a product to your cart, and open the cart page.
   

The button sits under the cart totals as its own block. You control its style in the editor. Method 2 gives you more control over the position.

This method has one limit worth knowing. The Buttons block is part of the page and not of the cart. It shows even when the cart is empty. Use the PHP method if you want the button only beside a filled cart.

Method 2: Add a Custom Button to the WooCommerce Cart Page With PHP

You can add a custom button to the WooCommerce cart page with one PHP snippet that filters the Proceed to Checkout block. The same snippet also covers the classic shortcode cart. Allow about five minutes if you paste it into a snippets plugin.

Here is the full snippet. It builds the button once and attaches it to both cart types:

/**
 * Build the cart button markup once, so both cart types share it.
 *
 * @param string $classes CSS classes for the link.
 * @return string
 */
function dd_cart_button( $classes ) {
	return sprintf(
		'<div class="dd-cart-button"><a class="%1$s" href="%2$s">%3$s</a></div>',
		esc_attr( $classes ),
		esc_url( wc_get_page_permalink( 'shop' ) ),
		esc_html__( 'Continue shopping', 'dd-cart-button' )
	);
}

// Cart block: add the button after "Proceed to Checkout".
add_filter(
	'render_block_woocommerce/proceed-to-checkout-block',
	function ( $content ) {
		$classes = 'wc-block-components-button wp-element-button outlined';
		return $content . dd_cart_button( $classes );
	}
);

// Classic [woocommerce_cart] page: priority 30 runs after the checkout button.
add_action(
	'woocommerce_proceed_to_checkout',
	function () {
		// phpcs:ignore WordPress.Security.EscapeOutput -- escaped in dd_cart_button().
		echo dd_cart_button( 'button wp-element-button' );
	},
	30
);

Each part does one job:

• dd_cart_button(): Builds the link in one place. It escapes the class, the URL, and the text before output.
• render_block_woocommerce/proceed-to-checkout-block: Runs when the Proceed to Checkout block prints. The function returns the block’s own HTML plus your button.
• wc_get_page_permalink( ‘shop’ ): Returns the address of the page set as your shop page. The link follows a changed slug.
• woocommerce_proceed_to_checkout: The classic hook. Priority 30 runs after the checkout button, which uses priority 20.

Now put the code on your site:

1. Install a snippets plugin: Go to Plugins > Add Plugin, search for Code Snippets and click Install Now. Activate it. A child theme functions.php file works too.
   
2. Create the snippet and paste the code: Go to Snippets > Add New. Enter the title Cart page button, leave the type on PHP, and paste the code without the opening PHP tag.
   
3. Save and activate: Click Save and Activate. The Status switch should read Active.
   
4. Check the cart: Add a product to your cart and open the cart page. The Continue shopping button sits under Proceed to Checkout.
   

Code Snippets lists more than one million active installations on WordPress.org as of October 2026. It keeps your code outside the theme. A theme update does not remove it.

Note: Do not paste the snippet twice. On our test site a second copy stayed inactive, and Code Snippets showed the message Cannot redeclare function dd_cart_button.

Where Else Can You Put the Button on the Cart Block?

The Cart block exposes several blocks you can filter, and each one puts the button in a different place. You can place it above the cart, below the cart, beside Proceed to Checkout, or under the order summary. Avoid the items column, because it breaks the layout.

To put the button above the whole cart, filter the cart block itself and place the button before the content. Swap the order to put it below the cart:

add_filter(
	'render_block_woocommerce/cart',
	function ( $content ) {
		$classes = 'wc-block-components-button wp-element-button outlined';
		return dd_cart_button( $classes ) . $content;
	}
);

On our test store this printed a full-width button between the page title and the cart items.

The cart-items block is the position to skip. It sits inside a flex layout. Extra markup becomes a new column. On WooCommerce 11.2.0 our button became a third column and squeezed the item list and the totals.

Method 3: Add a Button With Slot and Fill on the Cart Block

Slot and Fill is the JavaScript route for the Cart block. It renders your button inside a slot that WooCommerce provides. You do not filter any block markup. On WooCommerce 11.2.0 the slot called ExperimentalOrderMeta printed our button in the order summary above Proceed to Checkout.

The WooCommerce hook alternatives list points the classic woocommerce_cart_actions, woocommerce_before_cart_totals, and woocommerce_after_cart_totals hooks at this slot. Our snippet loads a small script on the cart page only. It reuses the dd-cart-button wrapper from the CSS section below:

add_action(
	'wp_enqueue_scripts',
	function () {
		if ( ! is_cart() ) {
			return;
		}

		$js = "
const { registerPlugin } = wp.plugins;
const { ExperimentalOrderMeta } = wc.blocksCheckout;
const { createElement: el } = wp.element;

const CartButton = () =>
	el(
		ExperimentalOrderMeta,
		null,
		el(
			'div',
			{ className: 'dd-cart-button' },
			el(
				'a',
				{
					className: 'wc-block-components-button wp-element-button outlined',
					href: " . wp_json_encode( wc_get_page_permalink( 'shop' ) ) . "
				},
				el( 'span', { className: 'wc-block-components-button__text' }, 'Continue shopping' )
			)
		)
	);

registerPlugin( 'dd-cart-button', { render: CartButton, scope: 'woocommerce-checkout' } );
";

		wp_register_script( 'dd-cart-button', '', array( 'wp-plugins', 'wp-element', 'wc-blocks-checkout' ), '1.0', true );
		wp_enqueue_script( 'dd-cart-button' );
		wp_add_inline_script( 'dd-cart-button', $js );
	}
);

Save it as a second snippet, because it defines no function that clashes with the first one. Use it alone if you want the Slot and Fill version instead of the filter.

The slot name starts with Experimental. Recheck it after major WooCommerce updates. For most stores the filter in Method 2 is the easier choice, and it puts the button under the checkout button.

Method 4: Add a Custom Button to the Classic Cart With Hooks

The classic shortcode cart still supports the cart hooks. Pick the hook that matches the spot you want, and set a priority to order your button against the default ones. A priority below 20 prints above the Proceed to checkout button, and a priority above 20 prints below it.

The snippet from Method 2 already includes the woocommerce_proceed_to_checkout action. No extra code is needed for that spot. For other spots, change the hook name in add_action. These four positions are the ones we tested:

Hook	Where it prints
woocommerce_before_cart_table	Above the cart table
woocommerce_cart_actions	Inside the table, under Apply coupon and Update cart
woocommerce_proceed_to_checkout	Beside the Proceed to checkout button and ordered by priority
woocommerce_after_cart_totals	Below the totals and the checkout button

The classes in the classic branch matter. On Twenty Twenty-Five a link with only the button class looked like plain underlined text, and adding wp-element-button gave it the theme’s button style.

How to Style the Custom Cart Button

The snippet already gives the button WooCommerce’s own button classes. It matches your theme before you add any CSS. A few lines of CSS then fix the spacing and the width. Use the Additional CSS box or your child theme stylesheet.

.dd-cart-button {
	margin-top: 12px;
}

.dd-cart-button a {
	box-sizing: border-box;
	display: block;
	text-align: center;
	width: 100%;
}

Without the CSS the button is only as wide as its text and sits at the left edge of the sidebar. On our test store that looked unfinished next to a full-width Proceed to Checkout button.

Tip: Keep box-sizing: border-box in the rule. Without it, a button with width: 100% plus padding was wider than the sidebar in our first test and caused sideways scrolling.

To make the button solid instead of outlined, remove outlined from the class list in the Cart block filter. The classic cart already uses the solid theme button.

Button Ideas That Fit a Cart Page

A cart button works best when it removes a step for the shopper. The snippet links to your shop page, but you can point it at any address. Change the URL line in the helper function to suit the job.

• Continue shopping: Links back to the shop with wc_get_page_permalink( 'shop' ). This WooCommerce continue shopping button is the version in the snippet.
• Add a product: Use add_query_arg( 'add-to-cart', 11, wc_get_cart_url() ) as the link, with 11 replaced by your product ID. On our test store, clicking it added a second simple product and returned to the cart.
• Open a help page: Use get_permalink( 123 ) with your page ID, for example a shipping policy or a contact page.

Related reading: disabling quantity changes in the WooCommerce cart covers another common cart tweak.

Can You Show the Button Only for Some Carts?

Yes, you can check the cart inside the filter and return the original block content when the check fails. On our test store the button appeared at a subtotal of 50 or more. Changing the quantity in the Cart block did not show or hide it until we reloaded the page.

Here is the filter with a subtotal check:

add_filter(
	'render_block_woocommerce/proceed-to-checkout-block',
	function ( $content ) {
		if ( WC()->cart->get_subtotal() < 50 ) {
			return $content;
		}
		$classes = 'wc-block-components-button wp-element-button outlined';
		return $content . dd_cart_button( $classes );
	}
);

The check runs on the server when the page loads. The Cart block then updates quantities without a reload. The button stays as it was until the shopper reloads. Use this pattern for conditions that hold for the whole visit, such as a logged-in user, and not for live cart totals.

Why Is Your Custom Cart Button Not Showing?

A missing cart button usually comes from a cart type mismatch, a snippet that did not activate, or a stale cache. Check them in that order, because each check takes under a minute. None of them needs a code change.

• Cart type mismatch: A classic hook prints nothing on the Cart block. Re-read the Cart line on WooCommerce > Status and use the matching code.
• Snippet inactive: Code Snippets shows an error above the editor when a snippet fails. Ours said it could not redeclare a function after a duplicate paste.
• Wrong block name: The filter name must read render_block_woocommerce/proceed-to-checkout-block. A different name filters a different block.
• Old cache: Purge your cache plugin or host cache after saving and then reload the cart page in a private window.
• Theme override: A theme that replaces the shortcode cart template can drop the hook output. Switch to a default theme on a staging copy to check.

If a theme or builder controls your cart template, the fix may need template work. Our WooCommerce development services team can build and test a cart change on your own theme.

Conclusion

You can now add a custom button to the WooCommerce cart page on either cart type. The Cart block needs a render_block filter, and the shortcode cart still uses the classic hooks.

Start with the Status screen, because it tells you which code to use. If you also want to change the rest of the page, read how to edit the WooCommerce cart page. The checkout page has its own options, such as custom checkout fields.

Frequently Asked Questions (FAQs)