Skip to content

Instantly share code, notes, and snippets.

@bradleysa
Last active April 21, 2023 11:06
  • Star 21 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
WooCommerce: Add Continue Shopping Button on Cart Page
<?php
/**
* Add Continue Shopping Button on Cart Page
* Add to theme functions.php file or Code Snippets plugin
*/
add_action( 'woocommerce_before_cart_table', 'woo_add_continue_shopping_button_to_cart' );
function woo_add_continue_shopping_button_to_cart() {
$shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
echo '<div class="woocommerce-message">';
echo ' <a href="'.$shop_page_url.'" class="button">Continue Shopping →</a> Would you like some more goods?';
echo '</div>';
}
@paaljoachim
Copy link

Thank you for the code @bradleysa and the update @photoMaldives

I went ahead and adjusted based on a bunch of various resources.

// Add continue shopping button to Single product page, Cart page and Checkout page.

/* Single product
https://www.businessbloomer.com/woocommerce-continue-shopping-button-single-product-page/
https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/ */

add_action( 'woocommerce_after_add_to_cart_button', 'continue_shopping_button_to_single_product' );
function continue_shopping_button_to_single_product() {
 $shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
 echo ' <a class="continue button" href="'.$shop_page_url.'">Continue Shopping</a>';

}

/* Cart
https://wpbeaches.com/add-continue-shopping-button-woo-commerce-cart-page/
https://www.tychesoftwares.com/woocommerce-cart-page-hooks-visual-guide-with-code-examples/ */

add_action( 'woocommerce_cart_actions', 'continue_shopping_button_to_cart' );
function continue_shopping_button_to_cart() {
 $shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
 echo ' <a class="continue button" href="'.$shop_page_url.'">Continue Shopping</a>';

}

/* Checkout
https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/ 
https://gist.github.com/bradleysa/7d1448253097784daf94 */

add_action( 'woocommerce_review_order_before_submit', 'continue_shopping_button_to_checkout' );
function continue_shopping_button_to_checkout() {
 $shop_page_url = get_permalink( wc_get_page_id( 'shop' ) );
echo ' <a class="continue button" href="'.$shop_page_url.'">Continue Shopping</a>';

}

CSS class continue button:

a.button.continue {
	background-color: var(--wp--preset--color--primary) !important;
	padding: 0.8rem 1rem !important;
        border: 2px solid #ebe9eb !important;
        margin: 0;
	color: #fff !important;
}

I noticed I had to add in the !important tag on most of the code to get it to work.
I am tested with the theme Twenty Twenty Two.

Let me know of any adjustments that would be helpful to do.

@nootkan
Copy link

nootkan commented Apr 8, 2022

Thanks ! Still good in 2021. I'm no coder, but tweaked this slightly - plain button underneath cart, plus 'message' button above checkout.

/**
* Add Continue Shopping Button on Cart (& checkout) Page
*/

add_action( 'woocommerce_after_cart_table', 'woo_add_continue_shopping_button_to_cart' );

function woo_add_continue_shopping_button_to_cart() {
 $shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
 
 echo '<div class="">';
 echo ' <a href="'.$shop_page_url.'" class="button">Continue Shopping</a>';
 echo '</div>';
}

add_action( 'woocommerce_before_checkout_form', 'woo_add_continue_shopping_button_to_checkout' );

function woo_add_continue_shopping_button_to_checkout() {
 $shop_page_url = get_permalink( wc_get_page_id( 'shop' ) );
 
 echo '<div class="woocommerce-message">';
 echo ' <a href="'.$shop_page_url.'" class="button">Continue Shopping</a> Not finished shopping ?';
 echo '</div>';
}

Everything I've tried from this thread works but I was wondering how to keep the button on the cart page the same way but have "continue shopping" show in the "have a coupon click here to enter your code" button instead of below it like the code above has it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment