Support » Plugin: WooCommerce » Back button / Return button

  • Resolved ethink1

    (@ethink1)


    Hello!
    I would like to add a back button in single product pages to return to shop page.
    Also, I would like to add another one in purchase process to go back through cart page, checkout, etc.
    Any ideas to include that? I was looking for and I didn’t found anything.
    Is possible adding code (what, where…)? Or arte there any addon with these funcionalities?
    Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi @ethink1.

    You can add some code like this in a function:

    <button type="button" onclick="history.back();"> Back </button>

    And then, call to this function from “add_action” with the hook you prefer.

    Then, you can add some css for style the back button.

    Regards.

    Plugin Support Rynald0s

    (@rynald0s)

    Automattic Happiness Engineer

    Hi there!

    I would like to add a back button in single product pages to return to shop page.

    You can use the following code to add the “Go back” button on the single product page:

    add_action( 'woocommerce_after_add_to_cart_button', 'my_function_sample', 10 );
    function my_function_sample() {
      global $product;
      echo ' <button type="button" onclick="history.back();"> Go back </button> '; 
    }

    If you’d like to show the button somewhere else on the single product page, then replace woocommerce_after_add_to_cart_button with any other hook from here: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

    Also, this custom code should be added to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as Code Snippets. Please don’t add custom code directly to your parent theme’s functions.php file as this will be wiped entirely when you update.

    Also, I would like to add another one in purchase process to go back through cart page

    The code above can be tweaked to work for your cart/checkout pages — you’ll just need to change woocommerce_after_add_to_cart_button

    Cart page hooks here: https://businessbloomer.com/woocommerce-visual-hook-guide-cart-page/

    Checkout page hooks here: https://businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/

    You can also then replace echo ' <button type="button" onclick="history.back();"> Go back </button> '; with:

    echo '<a href="URL">Back to cart</a>';

    The URL need to be changed to the URL of your shop page.

    Cheers!

    Many thanks to both!
    Back button in single products works well 🙂

    Sorry for my ignorance but I can’t understand how I can build the code for checkout page. If I’ll put the Go Back button next to Place Order the code is woocommerce_review_order_after_submit? I tried with some codes but it appears a HTTP ERROR 500.
    I don’t know about php function… could you give me the clue?
    THANK YOU SO MUCH!!

    Plugin Support Rynald0s

    (@rynald0s)

    Automattic Happiness Engineer

    Hi there!

    If I’ll put the Go Back button next to Place Order the code is woocommerce_review_order_after_submit?

    Yes, but if you are going to add it to checkout page then woocommerce_after_checkout_form would be a better option (imho).

    You’ll also need to change the function name so that it’s not the same as the function you’re using for single products page. Something along these lines:

    add_action( 'woocommerce_after_checkout_form', 'my_second_function_sample', 10 );
    function my_second_function_sample() {
      global $product;
      echo ' <button type="button" onclick="history.back();"> Go back </button> '; 
    }

    Again, if you need to make it go back to a specific page, then change:

    echo ' <button type="button" onclick="history.back();"> Go back </button> ';

    with:

    echo '<a href="URL">Back to cart</a>';

    Remember to change the URL to where you’d like it to link to.

    Cheers!

    • This reply was modified 2 years, 3 months ago by Rynald0s. Reason: accidentally wrapped in blockquote instead of code

    Many thanks Rynald0s for your help! Very useful! 🙂

    Plugin Support Rynald0s

    (@rynald0s)

    Automattic Happiness Engineer

    You’re very welcome!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Back button / Return button’ is closed to new replies.