Add Second Cart to the Page

Site URL: https://revisualsla.com/

Hey everyone,

Trying to add a second cart that appears and is sticky regardless of the page you go to and still have the cart in the header.

Please help!

Thank you in advance!

N

37 minutes ago, Nick369 said:

Site URL: https://revisualsla.com/

Hey everyone,

Trying to add a second cart that appears and is sticky regardless of the page you go to and still have the cart in the header.

Please help!

Thank you in advance!

N

Where exactly do you want to put your second cart?

17 hours ago, bangank36 said:

Where exactly do you want to put your second cart?

Hi, bangank36,

Thank you for a quick response. At the bottom right corner 🙂

@Nick369 Try adding to Settings > Advanced > Code Injection > Footer

<!-- Cart in bottom right corner -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
    var clone_cart = $('.header-actions-action.header-actions-action--cart').clone();
    $('footer.sections').append(clone_cart);
})
</script>
<style>
footer.sections .header-actions-action.header-actions-action--cart {
    position: fixed;
    bottom: 2vw;
    right: 2vw;
    z-index: 99999;
}
  footer.sections svg.icon.icon--cart {
    stroke: #1a114b;
}  
</style>

12 hours ago, tuanphan said:

@Nick369 Try adding to Settings > Advanced > Code Injection > Footer

<!-- Cart in bottom right corner -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
    var clone_cart = $('.header-actions-action.header-actions-action--cart').clone();
    $('footer.sections').append(clone_cart);
})
</script>
<style>
footer.sections .header-actions-action.header-actions-action--cart {
    position: fixed;
    bottom: 2vw;
    right: 2vw;
    z-index: 99999;
}
  footer.sections svg.icon.icon--cart {
    stroke: #1a114b;
}  
</style>

 

Works well! Appreciated!

I do have two more questions though:

1. How can I hide it until after the first item is added to the cart?

2. The amount of items in the cart doesn't change when I add the item, until after I reload the page. The top cart updates right away. Please help!

Thank you!!!

16 hours ago, Nick369 said:

Works well! Appreciated!

I do have two more questions though:

1. How can I hide it until after the first item is added to the cart?

2. The amount of items in the cart doesn't change when I add the item, until after I reload the page. The top cart updates right away. Please help!

Thank you!!!

Can you share link to a product? I don't see shop page nor product page. I think need to test something with add to cart button to fix this problem.

9 hours ago, tuanphan said:

Can you share link to a product? I don't see shop page nor product page. I think need to test something with add to cart button to fix this problem.

Hi tuanphan, here you go https://revisualsla.com/pricing

Thanks for your help!

9 hours ago, Nick369 said:

Hi tuanphan, here you go https://revisualsla.com/pricing

Thanks for your help!

ah okay thank you. You can remove code I sent, I will test new code

On 10/8/2021 at 7:09 PM, tuanphan said:

ah okay thank you. You can remove code I sent, I will test new code

Copy that, I appreciate your help!

On 10/12/2021 at 3:49 AM, Nick369 said:

Copy that, I appreciate your help!

I tested some code & no luck. Can't help you with this. You can find another one.

If you want to remove Cart Quantity Number on new cart icon, I can give the code

15 hours ago, tuanphan said:

I tested some code & no luck. Can't help you with this. You can find another one.

If you want to remove Cart Quantity Number on new cart icon, I can give the code

 

Yes, please! Better than nothing. I appreciate you giving it a go, not as easy as initially presumed.

13 hours ago, Nick369 said:

Yes, please! Better than nothing. I appreciate you giving it a go, not as easy as initially presumed.

Add to Design > Custom CSS

footer.sections .icon-cart-quantity {
    visibility: hidden;
}

9 hours ago, tuanphan said:

Add to Design > Custom CSS

footer.sections .icon-cart-quantity {
    visibility: hidden;
}

 

Thank you!

Is there a way to only use this corner cart feature/code for desktop and not mobile. I already have a button in the corner for mobile mode. Thank you!

On 1/29/2023 at 12:01 PM, vnr said:

Is there a way to only use this corner cart feature/code for desktop and not mobile. I already have a button in the corner for mobile mode. Thank you!

We can use CSS code to hide it on mobile.

If you share link to your site, we can check easier