{"id":371,"date":"2025-04-20T09:48:42","date_gmt":"2025-04-20T09:48:42","guid":{"rendered":"https:\/\/easycommerce.dev\/docs\/?post_type=ek_doc&#038;p=371"},"modified":"2026-03-12T06:18:50","modified_gmt":"2026-03-12T06:18:50","slug":"sliding-cart","status":"publish","type":"ek_doc","link":"https:\/\/easycommerce.dev\/docs\/addons\/sliding-cart\/","title":{"rendered":"Sliding Cart"},"content":{"rendered":"\n<p>Give your customers a smoother, faster shopping experience by integrating the Slide Cart with EasyCommerce. This feature allows shoppers to access their cart instantly from anywhere on your site without leaving the page.<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/iM7vLs65_Og?si=UVM-oTjvZLdk7qPQ\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<p>Follow the steps below to activate and set up the Slide Cart addon in your EasyCommerce store:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Activate the Sliding Cart Addon<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in to your WordPress dashboard.<\/li>\n\n\n\n<li>Go to&nbsp;<strong>EasyCommerce &gt; Addons<\/strong>&nbsp;section and make it \u201c<strong>Enabled<\/strong>\u201d under the Sliding Cart addon.<\/li>\n<\/ul>\n\n\n\n<p>To learn more about addons activation, read this documentation on <a href=\"https:\/\/easycommerce.dev\/docs\/addons\/install-and-activate-addons\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to activate addon on EasyCommerce<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"995\" height=\"360\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/EasyCommerce-\u2039-Easytest-\u2014-WordPress-11-25-2025_03_45_PM.png\" alt=\"\" class=\"wp-image-986\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/EasyCommerce-\u2039-Easytest-\u2014-WordPress-11-25-2025_03_45_PM.png 995w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/EasyCommerce-\u2039-Easytest-\u2014-WordPress-11-25-2025_03_45_PM-300x109.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/EasyCommerce-\u2039-Easytest-\u2014-WordPress-11-25-2025_03_45_PM-768x278.png 768w\" sizes=\"auto, (max-width: 995px) 100vw, 995px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Choose How You Want to Trigger the Slide Cart<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Decide how you want users to access the Slide Cart:<br>&#8211; Create a <strong>dedicated page<\/strong>, or<br>&#8211; Add a button, text link, or icon anywhere on your site where you&#8217;d like to trigger the slide cart.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add the Sliding Cart Class<\/h3>\n\n\n\n<p>Wherever you want the slide cart to be triggered, add the following CSS class:<br>class=&#8221;<strong>ec-slide-cart-class<\/strong>&#8220;<\/p>\n\n\n\n<p>This could be a button, link, or icon in your theme or page builder.<\/p>\n\n\n\n<p>\u26a0\ufe0f<strong> Do not modify the class name.<\/strong><\/p>\n\n\n\n<p>This class can be added to any element in your theme or page builder &#8211; such as a <strong>button<\/strong>, <strong>text<\/strong>, or <strong>icon<\/strong>.<\/p>\n\n\n\n<p>Here we added the class=&#8221;<strong>ec-slide-cart-class<\/strong>&#8221; on the page<\/p>\n\n\n\n<p>Go to Appearance &gt; Menus, then click on the Screen Options button in the top-right corner and check the CSS Classes option.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1841\" height=\"776\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-\u2039-Easy-\u2014-WordPress-11-12-2025_04_42_PM.png\" alt=\"\" class=\"wp-image-972\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-\u2039-Easy-\u2014-WordPress-11-12-2025_04_42_PM.png 1841w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-\u2039-Easy-\u2014-WordPress-11-12-2025_04_42_PM-300x126.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-\u2039-Easy-\u2014-WordPress-11-12-2025_04_42_PM-1024x432.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-\u2039-Easy-\u2014-WordPress-11-12-2025_04_42_PM-768x324.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-\u2039-Easy-\u2014-WordPress-11-12-2025_04_42_PM-1536x647.png 1536w\" sizes=\"auto, (max-width: 1841px) 100vw, 1841px\" \/><\/figure>\n\n\n\n<p>Next, open your desired menu item, add the class name <strong>&#8220;ec-slide-cart-class&#8221;<\/strong>, and click <strong>Save Menu<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"950\" height=\"1024\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-class-save-950x1024.webp\" alt=\"\" class=\"wp-image-373\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-class-save-950x1024.webp 950w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-class-save-278x300.webp 278w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-class-save-768x828.webp 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Menus-class-save.webp 1204w\" sizes=\"auto, (max-width: 950px) 100vw, 950px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Enable Sliding Cart on Click<\/h3>\n\n\n\n<p>Once the `<strong>ec-slide-cart-class<\/strong>` is added, clicking that element will automatically open the sliding cart, allowing users to view and manage their items instantly.<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"800\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/o06wcmmXUis?si=pJtSdeQ7VhLvts5r\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<p>Once connected and configured, the sliding cart becomes a powerful addition to your store keeping users engaged, streamlining their journey to checkout, and ultimately increasing sales.<\/p>\n","protected":false},"author":5,"featured_media":0,"template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"easy_topic":[21],"easy_product":[19],"class_list":["post-371","ek_doc","type-ek_doc","status-publish","hentry","easy_topic-addons","easy_product-easycommerce"],"_links":{"self":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/ek_doc\/371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/ek_doc"}],"about":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/types\/ek_doc"}],"author":[{"embeddable":true,"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/users\/5"}],"wp:attachment":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/media?parent=371"}],"wp:term":[{"taxonomy":"easy_topic","embeddable":true,"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/easy_topic?post=371"},{"taxonomy":"easy_product","embeddable":true,"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/easy_product?post=371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}