|
/ Knowledge Base /Online Store/ How to Enable & Disable Slide-out Cart

How to Enable & Disable Slide-out Cart

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!

How to Disable & Enable the Slide-out Cart in for NON FSE Theme

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.
SureCart Settings
  • Click Design & Branding.
SureCart Design & Branding
  • Go to the Cart section by scrolling down.
SureCart Slide Out Cart
  • Simply toggle the Enable Cart option off/on to disable or enable it.
SureCart Slide Out Cart Enable Disable
  • 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.
SureCart Slide Out Cart Floating Icon
  • 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.
SureCart Slide Out Cart Menu Icon
  • 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.

SureCart Slide Out Cart Add Menu
  • 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.
SureCart Slide Out Cart Always Show Cart Menu
  • 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.
SureCart Slide Out Cart Both Floating Icon & Menu

How to Add the Slide-out Cart to the FSE Themes (Full Site Editing)?

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.
SureCart Slide Out Cart FSE Customize
  • Click on Template Parts.
  • Choose Header.
SureCart Slide Out Cart FSE Header
  • Click on Edit.
SureCart Slide Out Cart FSE Header Edit
  • Add a new block, then search for Cart Menu Icon and click on it.
SureCart Slide Out Cart FSE Add Cart Menu Icon
  • Save the changes by clicking the Save button.
SureCart Slide Out Cart FSE Cart Menu Icon
  • 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!

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
On this page

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

E-Commerce Store Launch Checklist Download
Scroll to Top