Meet the Slide-out Cart in SureCart – it’s like a mini shopping buddy that appears when your customers add a product into their cart.
This slide out shows every product that is present in their cart and from this cart, they can navigate further to place their order.
Wondering how to turn this on or off in SureCart? Our guide will show you exactly how to do it.
Just follow the steps in the guide, and soon you’ll be able to add a Slide-out Cart on your website easily.
Let’s get started with the Slide-out Cart!
A non FSE WordPress theme is a theme that does not use the full site editing (FSE) feature of WordPress, which allows users to edit the entire site using blocks. Non FSE themes use traditional PHP-based templates instead of block-based templates.
We built a Slide-out Cart that works with FSE & NON-FSE Themes.
Let’s jump in and understand how you can enable slide-out cart if you’re using a non FSE theme!
- To enable the Slide-Out Cart, navigate to SureCart from your WordPress website, then click on Settings.
- Click Design & Branding.
- Go to the Cart section by scrolling down.
- Simply toggle the Enable Cart option off/on to disable or enable it.
- The Cart icon can be displayed in different ways. To display only the Floating Icon, select it from the Cart Icon Type dropdown list. Make sure you click the Save button to save the changes.
- The Floating Icon will look like this when you add something to the cart.
- But if you want to display the cart menu icon in the header, then choose the Menu Icon to be displayed only in the menu header.
- You can then select the menu from your website where this cart icon should be added.
From the Add Menu button, you can select a menu, or you can select multiple menus if you have multiple menus and you want the Cart Icon on all of them.
- Click the Position for cart button dropdown field to select whether you want the cart displayed to the right or left of the menu on your website’s header.
- If you want to show the cart menu icon, even if your cart is empty, you can simply toggle on the Always Show Cart (Menu Only) option.
- Your menu header will look like this when you add something to the cart.
- If you choose Both from the Cart Icon Type, you can display the Cart Icon in the Menu Header and as a Floating Icon.
When using an FSE-compatible WordPress theme, the Cart Menu Icon will not be displayed within the menu.
To effectively use and customize the Menu Icon in the FSE theme, our team has developed a proprietary Gutenberg block called “Cart Menu Icon”. With this block, you can easily view and display the Cart Menu Icon within your FSE theme.
Let’s jump into the steps to add a slide-out cart.
- To customize your theme, go to the Appearance section of WordPress and click on Customize.
- Click on Template Parts.
- Choose Header.
- Click on Edit.
- Add a new block, then search for Cart Menu Icon and click on it.
- Save the changes by clicking the Save button.
- Your website menu header will look like this.
Additionally, you can also use the Cart Menu Icon shortcode to display the cart menu if the Cart Menu Icon block does not work with your theme, and you cannot use the Cart Menu Icon element for Gutenberg.
That’s how you can enable & disable the Slide-out Cart on your sites.
Feel free to contact us with any questions you may have about this topic!