Question 3546 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Add 'continue shopping' on WooCommerce checkout page before order review

I want to add ‘continue shopping’ / ‘add product’ link before order review on checkout page. But I want it to be inline with "Your order" text.

See this screenshot: https://ibb.co/47f6vd7

I tried this code:

add_action('woocommerce_checkout_order_review','woocommerce_checkout_before_order_review_add_product');
function woocommerce_checkout_before_order_review_add_product(){
    
    $continue_shopping_url = wc_get_page_permalink( 'shop' );
    $add_product_label = 'add product';

    if(!empty($continue_shopping_url)){
        echo "$add_product_label";
    }
}

But it show on the line below "Your order" text. So it looks ugly.

How do i make it inline with "Your order" text using additional css?

Tags:

2

Answers


  1. 0

    First of all you are using the wrong hook.

    While woocommerce_checkout_order_review will cause the text to be added insde the #order_review div, the woocommerce_checkout_before_order_review hook will cause it to be placed before the #order_review div.

    So you get:

    function action_woocommerce_checkout_before_order_review(){
    $continue_shopping_url = wc_get_page_permalink( 'shop' );
    $add_product_label = 'add product';

    if ( ! empty ( $continue_shopping_url ) ) {
        echo '<div class="my-label">' . $add_product_label . '</div>';
    }
}
add_action( 'woocommerce_checkout_before_order_review', 'action_woocommerce_checkout_before_order_review', 10, 0 );

    Which CSS you will have to apply for this is completely theme dependent,
    but using display: inline-block; can certainly come in handy

    Login or Signup to reply.
  2. 0

    Make sure you have a child theme setup. You can then add the ‘Continue shopping’ link via the woocommerce_checkout_before_order_review action hook:

    add_action( 'woocommerce_checkout_before_order_review', 'woocommerce_checkout_add_continue_shopping_link' );
function woocommerce_checkout_add_continue_shopping_link() {
    printf( '<a href="%s" class="checkout-continue-shopping">Continue shopping</a>', wc_get_page_permalink( 'shop' ) );
}

    Add the above code snippet to the functions.php of your child theme. Then take care of the CSS styling in the style.css of your child theme.

    For instance like this:

    body.woocommerce-checkout h3#order_review_heading {
    float: left;
    width: auto;
}

body.woocommerce-checkout a.checkout-continue-shopping {
    font-size: 0.8em;
    float: left;
    padding: 0.5em 1em;
    background: #444;
    text-decoration: none;
    color: white;
    margin-left: 2em;
    margin-top: 0.25em;
}

    Which will give you the following result:

    enter image description here

    You will probably also have to add some CSS media queries to make this look good on mobile and tablet.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search