Overview
This article will help you make Wise Cart more compatible with your theme so that you can give your website visitors a consistent user experience. We have covered some commonly occurring problems that you might face while setting up Wise Cart with your theme.
Hiding Native cart from background
In some themes, your theme's native cart would be shown to the end user behind the Wise Cart. Therefore you'll notice that sometimes when you close Wise Cart, your native cart is still there.
To solve this problem, we can add a custom JavaScript code to your theme code or in tag managers (like Google Tag Manager) to close your theme's native cart when Wise Cart is shown to users.
Here's an example of where this code can be added to the theme's code:
Follow these 3 simple steps to hide your native theme cart.
STEP 1
Go to edit code for your theme, copy this code and paste it into your theme.liquid file, right below <head> (refer to the screenshot above).
<script>
window.addEventListener("DOMContentLoaded", (event) => {
var style = document.createElement("style");
style.textContent = ".wise-cart _REPLACE_THIS_WITH_YOUR_NATIVE_CART_SELECTOR_ { display:none !important }";
document.head.appendChild(style);
window.addEventListener('wiseCartOpen', function updateCartCount(event) {
var intvMaxTime = 0;
var intv = setInterval(function(){
var closeBtn = document.querySelector('_REPLACE_THIS_WITH_YOUR_NATIVE_CART_CLOSE_ICON_SELECTOR_');
if(closeBtn) {
console.log(closeBtn);
closeBtn.click();
clearInterval(intv);
} else if(intvMaxTime === 10000) {
clearInterval(intv);
}
intvMaxTime = intvMaxTime+1000;
}, 1000);
});
window.addEventListener('wiseCartClose', ()=>{
setTimeout(()=>{document.body.style.overflow = 'unset';
document.documentElement.style.overflow = 'unset'}, 500)
});
});
</script>
STEP 2
In the above code, you'll need to replace this entire phrase -_REPLACE_THIS_WITH_YOUR_NATIVE_CART_SELECTOR_ with your theme's native cart selector. Here's how to find the selector -
Open up the developer tools (right-click, inspect element), and find the element of your theme's native cart.
Here's an example of how to find the selector in your theme (please note - this should work on most themes, but can vary in some custom themes)
Like this -
STEP 3
Next, replace the phrase _REPLACE_THIS_WITH_YOUR_NATIVE_CART_CLOSE_ICON_SELECTOR_ with your native cart's close icon (X) selector.
Here's an example of how to find the selector in your theme (please note - this should work on most themes, but can vary in some custom themes)
Like this -
STEP 4
Click Save on top right to save your changes and go to your website / Wise Cart preview to check.
Note: The above code may need to be modified depending on how your theme shows the cart drawer. Please consult your developer or contact us on Live Chat. We can help you place this code by getting your collaborator access.
Stop redirection to Cart Page
This issue happens in some themes on the click of the "add to cart" button from your Product page.
To resolve this, go to your theme's settings in the Shopify dashboard and change the cart type from "Page" to "Drawer". This will prevent the redirection to the cart page and allow Wise Cart to open instantly.
After changing this setting from "Page" to "Drawer", you might face the issue of your theme’s native cart being shown behind Wise Cart. We have provided a solution for that in the above section of this help article.
Open Wise Cart on click of Cart icon
In some cases, Wise Cart will not open on the click of your cart icon. This could be because the icon is customized and couldn't get detected by our systems. You can solve this issue and open Wise Cart on click of cart icon by adding this snippet of code with/without the above code.
STEP 1
Copy this code and paste it into your theme.liquid file, right below the <head> tag -
If you're pasting this along with the code to hide your native cart, paste this code above the previously added code.
<script>
window.addEventListener("DOMContentLoaded", (event) => {
//Open wisecart on cart icon click document.querySelector('_CART_ICON_SELECTOR_')?.addEventListener('click', () => window.openWiseCart()) }
</script>
Like this -
STEP 2
Next, replace the phrase _CART_ICON_SELECTOR_ with your store's cart icon. Refer to the screenshot below -
Like this -
STEP 3
Click Save on top right to save your changes and go to your website / Wise Cart preview to check.
Need help with this? Our team can do this for you quickly within a few minutes. Reach out to us on Live support chat!