Add upsell products to offcanvas cart

[lennertfabriek]

Hi!

I turned the cart offcanvas into a popup with upsells. It is really great but I have some problems with the message. I turned it into: your product is succesfully added. But with variations I still get the: "product-title" is added to your cart. The second problem is when I am on the cart page and want to add a upsell. Then the message is disappearing after some seconds. The last problem is when I want to add an upsell in the cart popup the message is not showing (the offcanvas needs to reset or opening again or something..).

So my 3 questions are:

1. How can I change this text always to: your product is succesfully added.
2. How can I prevent the message from disappearing.
3. How can I show the message when I am adding an upsell on the offcanvas.

Website: https://www.capricci-shop.nl/
Hopefully you're able and willing to help me out.

See images:

[crftwrk]

Hi Lennart,

turned this issue into a discussion because this is no bug or feature.

Well, it seems that you made hard change in a sensitive area ;-) So let's try to help.

How can I change this text always to: your product is succesfully added.

Cart message fetches the "product-title" from add-to-cart button. In your case the title is not defined in button. You can change message in ajax-add-to-cart.php. Copy file to your child and register new one in child's functions.php:

function register_ajax_cart() {
  require_once('woocommerce/ajax-cart/ajax-add-to-cart.php');
}
add_action('after_setup_theme', 'register_ajax_cart');

Navigate to

bootscore/woocommerce/ajax-cart/ajax-add-to-cart.php

Line 141 in 2f35364

notice = `<div class="woocommerce-message">“${prod_title}” <?php _e('has been added to your cart.', 'bootscore'); ?></div>`;

and change line to

notice = `<div class="woocommerce-message">Your product is succesfully added.</div>`; 

But Heads up! There will be changes to ajax-add-to-cart.php in near future.

The last problem is when I want to add an upsell in the cart popup the message is not showing (the offcanvas needs to reset or opening again or something..).

You can try to close offcanvas when add-to-cart button inside #offcanvas-cart is clicked. Paste snippet to line 159 before the offcanvas open snippet. So, offcanvas closes on button click and reopens when product is added to the cart. Not tested, just a rough idea. This should solve question 2 and 3.

// Close offcanvas-cart when upsell add-to-cart button is clicked
$( "#offcanvas-cart .ajax_add_to_cart" ).click(function() {
  $('#offcanvas-cart').offcanvas('hide');
});

However, cart messages are tricky. I worked nearly half a year on them and they are still not perfect. Combining the messages with upsell products in offcanvas seems to be a very tough job ;-)

Last thing, I see that you modified offcanvas by CSS that it looks like a modal. If you modify ajax-add-to-cart.php, why not change this to a real Bootstrap modal in this file and header.php?

Hope that helps a bit.

[lennertfabriek]

Wow Basti, thanks a lot! Really appreciate this. Will dive into it tomorrow. I know I went a bit out of the bootscore template.. but needed a really outstanding design.

Your last thing is a great one. I didn't thought about that. Will dive in to it. Don't want this to be a mess (also for incoming updates).

[lennertfabriek]

Hi @crftwrk

I am working on it. But firstly we want to use the normal offcanvas like it was. But I still have the upsells (products from custom fields) on the cart page. Is it possible to not activate the offcanvas at the cart page? So only hide it on the cart page.

[lennertfabriek]

Because when I use the id of the canvass I still see the wrapper.

[crftwrk]

Because when I use the id of the canvass I still see the wrapper.

What do you mean exactly?

If you want to hide offcanvas cart in cart page, simply hide the cart-toggler using the .woocommerce-cart selector. In your case:

https://www.capricci-shop.nl/winkelmand/

.woocommerce-cart .cart-toggler {
  display: none;
}

[lennertfabriek]

That doesn't work. I still see the offcanvas.

The case is, I have some products in the cart page. But I don't want to see the offcanvas when I add something. Because you are already in the cart page where you can see the added product.

[crftwrk]

You can hide everything you want using the.woocommerce-cart selector.

.woocommerce-cart {
  #offcanvas-cart {
    display: none;
  }

  .offcanvas-backdrop {
    display: none;
  }
}

body.woocommerce-cart {
  overflow: auto !important;
}

[lennertfabriek]

Ah the overflow was missing! Thanks it works