{"id":164537,"date":"2022-11-09T05:31:34","date_gmt":"2022-11-09T05:31:34","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/prodcut-side-cart-for-woocommerce\/"},"modified":"2026-06-29T09:53:08","modified_gmt":"2026-06-29T09:53:08","slug":"product-side-cart-for-woocommerce","status":"publish","type":"plugin","link":"https:\/\/hat.wordpress.org\/plugins\/product-side-cart-for-woocommerce\/","author":20419894,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0","stable_tag":"trunk","tested":"7.0.2","requires":"5.5","requires_php":"7.0","requires_plugins":null,"header_name":"Product Side Cart For WooCommerce","header_author":"","header_description":"This plugin allows you to Create Product Sidebar cart in WooCommerce.","assets_banners_color":"efddc3","last_updated":"2026-06-29 09:53:08","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":5,"author_block_rating":0,"active_installs":40,"downloads":1699,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":{"1.0":"<p>Initial release. Install to add a fully styled, real-time sliding side cart to your WooCommerce store \u2014 no coding required.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3475267,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3475267,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3475267,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3475267,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":2814857,"resolution":"1","location":"assets","locale":"","width":1700,"height":784},"screenshot-2.png":{"filename":"screenshot-2.png","revision":2814857,"resolution":"2","location":"assets","locale":"","width":1680,"height":798},"screenshot-3.png":{"filename":"screenshot-3.png","revision":2814857,"resolution":"3","location":"assets","locale":"","width":1732,"height":842},"screenshot-4.png":{"filename":"screenshot-4.png","revision":2814857,"resolution":"4","location":"assets","locale":"","width":542,"height":930}},"screenshots":{"1":"General Settings tab \u2014 basket toggles, cart order, page exclusions, body elements, product slider, and footer totals","2":"Cart Styles tab \u2014 colours, typography, basket icon picker, trash icon, close icon, and button layout controls","3":"Text &amp; URL Settings tab \u2014 editable cart labels and custom URLs for cart, checkout, and continue shopping buttons","4":"Side cart drawer on the front end \u2014 cart item with image, price, quantity, totals, and View Cart \/ Checkout Now \/ Keep Shopping buttons"}},"plugin_section":[],"plugin_tags":[7603,269438,172961,192939,269437],"plugin_category":[],"plugin_contributors":[256981],"plugin_business_model":[],"class_list":["post-164537","plugin","type-plugin","status-publish","hentry","plugin_tags-woocommerce-ajax-cart","plugin_tags-woocommerce-fly-to-cart","plugin_tags-woocommerce-mini-cart","plugin_tags-woocommerce-side-cart","plugin_tags-woocommerce-sliding-cart","plugin_contributors-howdytheme","plugin_committers-howdytheme"],"banners":{"banner":"https:\/\/ps.w.org\/product-side-cart-for-woocommerce\/assets\/banner-772x250.png?rev=3475267","banner_2x":"https:\/\/ps.w.org\/product-side-cart-for-woocommerce\/assets\/banner-1544x500.png?rev=3475267","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/product-side-cart-for-woocommerce\/assets\/icon-128x128.png?rev=3475267","icon_2x":"https:\/\/ps.w.org\/product-side-cart-for-woocommerce\/assets\/icon-256x256.png?rev=3475267","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/product-side-cart-for-woocommerce\/assets\/screenshot-1.png?rev=2814857","caption":"General Settings tab \u2014 basket toggles, cart order, page exclusions, body elements, product slider, and footer totals"},{"src":"https:\/\/ps.w.org\/product-side-cart-for-woocommerce\/assets\/screenshot-2.png?rev=2814857","caption":"Cart Styles tab \u2014 colours, typography, basket icon picker, trash icon, close icon, and button layout controls"},{"src":"https:\/\/ps.w.org\/product-side-cart-for-woocommerce\/assets\/screenshot-3.png?rev=2814857","caption":"Text &amp; URL Settings tab \u2014 editable cart labels and custom URLs for cart, checkout, and continue shopping buttons"},{"src":"https:\/\/ps.w.org\/product-side-cart-for-woocommerce\/assets\/screenshot-4.png?rev=2814857","caption":"Side cart drawer on the front end \u2014 cart item with image, price, quantity, totals, and View Cart \/ Checkout Now \/ Keep Shopping buttons"}],"raw_content":"<!--section=description-->\n<p><strong>Product Side Cart For WooCommerce<\/strong> replaces the awkward experience of redirecting customers to a separate cart page every time they add a product. Instead, a sleek side cart drawer slides in from the right \u2014 letting customers review their cart, update quantities, remove items, and proceed to checkout without ever leaving the page they were on.<\/p>\n\n<p>The plugin adds a persistent floating cart basket button to every page of your WooCommerce store. Clicking it opens a fully customisable sliding side cart panel with smooth animations, real-time cart updates via AJAX, a built-in upsell product slider, and complete control over every colour, icon, label, and layout option \u2014 all from a modern React-powered admin settings panel.<\/p>\n\n<blockquote>\n  <p><strong>Requires WooCommerce<\/strong> to be installed and activated.<\/p>\n<\/blockquote>\n\n<p><a href=\"https:\/\/www.topsmodule.com\/how-to-create-product-side-cart-for-woocommerce\/\">\ud83d\udcc4 Documentation<\/a> | <a href=\"https:\/\/topsmodule.com\/task\/prodcut-side-cart-for-woocommerce\/\">\ud83d\udd34 Live Demo<\/a><\/p>\n\n\n\n<h4>How It Works<\/h4>\n\n<p>Once activated, a floating cart basket button appears on every page of your store \u2014 fixed to the left or right edge of the screen. When a customer clicks it, a smooth side cart drawer slides in, showing all their cart items with product image, name, price, line total, and an editable quantity input. Customers can remove items, adjust quantities, and click through to checkout \u2014 all without a page reload.<\/p>\n\n<p>When a customer clicks \"Add to Cart\" anywhere on your store (shop page, product page, or anywhere else), a <strong>fly-to-cart animation<\/strong> launches the product image across the screen toward the floating basket icon, giving an instant visual confirmation that the item was added.<\/p>\n\n\n\n<h4>Key Features<\/h4>\n\n<p><strong>Floating Cart Basket Button<\/strong>\n* Enable or disable the floating basket button sitewide with a single toggle\n* Independently enable or disable the basket on mobile devices (breakpoint: 768px)\n* Position the basket on the left or right side of the screen\n* Choose between a square or round basket shape\n* Control basket icon size, vertical offset, and horizontal offset independently\n* Choose from multiple built-in cart icon SVG styles\n* Upload a fully custom basket icon image from the WordPress media library\n* Set custom basket background colour and icon colour\n* Show or hide the product count badge on the basket\n* Set the count badge position to top-left or top-right\n* Set custom count badge background colour and count text colour\n* Choose how the count is calculated: sum of all item quantities, or number of unique products in the cart<\/p>\n\n<p><strong>Fly-To-Cart Animation<\/strong>\n* When a customer clicks Add to Cart on the shop\/archive page or on a single product page, the product image animates in a smooth arc across the screen toward the floating basket icon\n* Provides immediate visual feedback that the item was added to the cart\n* Enable or disable the animation with a single toggle \u2014 does not affect cart functionality<\/p>\n\n<p><strong>Side Cart Drawer<\/strong>\n* The side cart panel slides in and out with a smooth CSS transition (translateX)\n* A darkened overlay backdrop appears behind the side cart when it is open, dimming the page content\n* Clicking the backdrop closes the cart\n* Choose whether newly added items appear at the top (descending) or bottom (ascending) of the cart item list\n* Specify pages where the basket and side cart should be hidden \u2014 by page ID, slug, post type, or WooCommerce page type (cart, checkout, shop) \u2014 entered as a comma-separated list<\/p>\n\n<p><strong>Side Cart Header<\/strong>\n* Displays a customisable cart heading with item count \u2014 for example \"Your Cart (3)\"\n* Set the heading font size (in px)\n* Choose heading alignment: left, centre, or right\n* Show or hide the close icon button in the header\n* Choose from multiple built-in close icon SVG styles\n* Set close icon size (in px) and colour\n* Position the close icon on the left or right side of the header\n* Set header background colour, border colour, and border style (solid, dotted, or dashed)\n* Set header title text colour<\/p>\n\n<p><strong>Side Cart Body \u2014 Product Cards<\/strong>\n* Every element of the product card can be individually shown or hidden:\n  \u2014 Product image\n  \u2014 Product name\n  \u2014 Product unit price\n  \u2014 Product line total (price \u00d7 quantity)\n  \u2014 Quantity input box (editable \u2014 updates the cart via AJAX without page reload)\n  \u2014 Delete\/remove button\n  \u2014 Link to the individual product page (wraps both image and name in a clickable link)\n* Set product image width (in px) and border radius (in px)\n* Set product title colour and title hover colour\n* Set product price colour\n* Choose delete button style: icon or text\n* If using icon style: choose from multiple built-in trash icon SVG styles\n* Set trash icon colour and trash icon hover colour<\/p>\n\n<p><strong>Upsell Product Slider<\/strong>\n* Select any WooCommerce products from the admin to feature in a built-in product slider shown inside the side cart, below the cart items\n* The slider is powered by Swiper with autoplay (3-second delay, pauses on hover) and manual left\/right navigation arrows\n* Products already in the customer's cart are automatically excluded from the slider \u2014 only products not yet in the cart are shown\n* Enable or disable the slider on desktop and mobile independently\n* Show or hide each element of the slider product card: product image, product name, product price, and Add to Cart button\n* Customers can add slider products directly to their cart from within the side cart panel\n* Full styling control over the slider: image width, font size, product title colour, background colour, Add to Cart button background and text colour (normal and hover states)<\/p>\n\n<p><strong>Side Cart Footer \u2014 Totals &amp; Buttons<\/strong>\n* Show or hide each totals line independently: Subtotal (with item count), Shipping (shows \"Free\" when shipping cost is zero), and Order Total\n* Three action buttons: View Cart, Checkout Now, and Keep Shopping\n* Show any combination of the three buttons \u2014 hide any you do not need\n* Drag-and-drop button reordering in the admin \u2014 arrange the buttons in any order\n* Choose button layout: one button per row (1+1+1), two buttons in the first row then one (2+1), or one button then two in the last row (1+2)\n* Set button font size and button padding globally\n* Set button background colour, background hover colour, button text colour, and text hover colour<\/p>\n\n<p><strong>Empty Cart State<\/strong>\n* When the cart is empty, the side cart displays a customisable empty cart message and a \"Return to Shop\" button\n* Both the empty cart text and the return button text are fully customisable from the Translation \/ Text settings tab\n* The Return to Shop button redirects to your WooCommerce shop page automatically<\/p>\n\n<p><strong>Translation &amp; Text Settings<\/strong>\n* Every text string displayed in the side cart is editable from the admin \u2014 no code, no gettext files needed:\n  \u2014 Cart heading text (default: \"Your Cart\")\n  \u2014 View Cart button label (default: \"View Cart\")\n  \u2014 Checkout button label (default: \"Checkout Now\")\n  \u2014 Keep Shopping button label (default: \"Keep Shopping\")\n  \u2014 Empty cart message (default: \"Your cart is empty.\")\n  \u2014 Return to Shop button label (default: \"Return to Shop\")\n* Ideal for multilingual stores or simply renaming buttons to match your brand voice<\/p>\n\n<p><strong>URL Settings<\/strong>\n* Customise the destination URL for the View Cart button\n* Customise the destination URL for the Checkout Now button\n* Customise the destination URL for the Keep Shopping \/ Continue Shopping button<\/p>\n\n<p><strong>Modern React-Powered Admin Panel<\/strong>\n* The entire settings panel is built with React using @wordpress\/element \u2014 fast, responsive, and intuitive\n* Settings are organised into three clear tabs: General Settings, Style Settings, and Translation \/ Text Settings\n* Settings are saved via the WordPress REST API (\/wp\/v2\/settings) without full page reloads\n* Toast notifications confirm when settings are saved successfully or if an error occurs\n* All settings are sanitized server-side using sanitize_text_field before being stored<\/p>\n\n<p><strong>Performance &amp; Security<\/strong>\n* All AJAX actions (cart updates, quantity changes, item removal, product slider add to cart) are protected with WordPress nonce verification\n* Frontend cart data is fetched fresh via AJAX each time the side cart opens \u2014 always reflects the true current cart state\n* Supports both logged-in and guest (non-logged-in) customers via paired wp_ajax and wp_ajax_nopriv action hooks\n* RTL (right-to-left) stylesheet included for Arabic, Hebrew, and other RTL language stores\n* WooCommerce cart fragments are triggered on quantity updates so all WooCommerce cart widget counts stay in sync<\/p>\n\n\n\n<h4>Perfect For<\/h4>\n\n<ul>\n<li>Any WooCommerce store that wants to reduce cart-page drop-off and improve the add-to-cart experience<\/li>\n<li>Fashion, apparel, and lifestyle stores where customers frequently browse and add multiple items<\/li>\n<li>Stores selling digital products or subscriptions that want a lightweight and fast cart experience<\/li>\n<li>Multi-product stores where upselling additional products at cart time increases average order value<\/li>\n<li>Stores targeting mobile shoppers \u2014 the side cart is fully responsive and can be independently controlled on mobile<\/li>\n<\/ul>\n\n<!--section=installation-->\n<p><strong>From the WordPress Plugin Directory:<\/strong><\/p>\n\n<ol>\n<li>Make sure <strong>WooCommerce<\/strong> is installed and activated on your site.<\/li>\n<li>In your WordPress dashboard, go to <strong>Plugins &gt; Add New<\/strong>.<\/li>\n<li>Search for <strong>\"Product Side Cart For WooCommerce\"<\/strong> and click <strong>Install Now<\/strong>.<\/li>\n<li>Click <strong>Activate<\/strong> once installation is complete.<\/li>\n<li>Go to the <strong>Product Side Cart<\/strong> menu item in your WordPress admin sidebar.<\/li>\n<li>Configure your settings across the General, Style, and Translation tabs and click <strong>Save Changes<\/strong>.<\/li>\n<li>Visit your WooCommerce store \u2014 the floating basket button will appear and the side cart will open when clicked.<\/li>\n<\/ol>\n\n<p><strong>Manual Upload:<\/strong><\/p>\n\n<ol>\n<li>Download the plugin ZIP file.<\/li>\n<li>In your WordPress dashboard, go to <strong>Plugins &gt; Add New &gt; Upload Plugin<\/strong>.<\/li>\n<li>Upload the ZIP, click <strong>Install Now<\/strong>, then <strong>Activate<\/strong>.<\/li>\n<li>Follow steps 5\u20137 above.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20require%20woocommerce%3F\"><h3>Does this plugin require WooCommerce?<\/h3><\/dt>\n<dd><p>Yes. WooCommerce must be installed and activated. The plugin queries the WooCommerce cart directly and uses WooCommerce functions throughout \u2014 it cannot function without WooCommerce.<\/p><\/dd>\n<dt id=\"where%20are%20the%20plugin%20settings%3F\"><h3>Where are the plugin settings?<\/h3><\/dt>\n<dd><p>After activation, a top-level <strong>Product Side Cart<\/strong> menu item (with a cart icon) is added to your WordPress admin sidebar. All settings are on that page, organised into three tabs: General Settings, Style Settings, and Translation \/ Text Settings.<\/p><\/dd>\n<dt id=\"does%20the%20side%20cart%20update%20in%20real%20time%20when%20a%20product%20is%20added%20to%20the%20cart%3F\"><h3>Does the side cart update in real time when a product is added to the cart?<\/h3><\/dt>\n<dd><p>Yes. The cart data is fetched fresh via AJAX each time the side cart is opened. Quantity changes and item removals also update the cart totals instantly without a page reload.<\/p><\/dd>\n<dt id=\"can%20i%20hide%20the%20side%20cart%20on%20specific%20pages%20like%20the%20checkout%20page%3F\"><h3>Can I hide the side cart on specific pages like the checkout page?<\/h3><\/dt>\n<dd><p>Yes. The \"Do not show cart on pages\" setting accepts a comma-separated list of page IDs, page slugs, post types, or WooCommerce page keywords (<code>cart<\/code>, <code>checkout<\/code>, <code>shop<\/code>). The floating basket button and side cart will be hidden on any matched page.<\/p><\/dd>\n<dt id=\"can%20i%20use%20my%20own%20custom%20icon%20for%20the%20floating%20cart%20button%3F\"><h3>Can I use my own custom icon for the floating cart button?<\/h3><\/dt>\n<dd><p>Yes. In the Style Settings tab under Basket Settings, you can either choose from the built-in SVG cart icon styles or upload your own custom image from the WordPress media library.<\/p><\/dd>\n<dt id=\"what%20is%20the%20product%20slider%20inside%20the%20side%20cart%3F\"><h3>What is the product slider inside the side cart?<\/h3><\/dt>\n<dd><p>The product slider is a built-in upsell feature. In the General Settings tab, you can search for and select any WooCommerce products. These products appear in a Swiper-powered auto-scrolling carousel inside the side cart. Products already in the customer's cart are automatically excluded from the slider. Customers can add slider products to their cart directly from within the side cart.<\/p><\/dd>\n<dt id=\"can%20i%20change%20the%20order%20of%20the%20cart%20action%20buttons%3F\"><h3>Can I change the order of the cart action buttons?<\/h3><\/dt>\n<dd><p>Yes. In the Style Settings tab under Side Cart Footer, the three buttons (View Cart, Checkout Now, Keep Shopping) can be reordered by dragging and dropping them in the admin. You can also choose how many appear per row and hide any buttons you do not need.<\/p><\/dd>\n<dt id=\"does%20the%20fly-to-cart%20animation%20affect%20performance%3F\"><h3>Does the fly-to-cart animation affect performance?<\/h3><\/dt>\n<dd><p>No. The fly-to-cart animation is purely visual \u2014 a cloned product image that animates across the screen via jQuery animate and is then removed from the DOM. It does not delay or affect the actual add-to-cart request in any way.<\/p><\/dd>\n<dt id=\"is%20the%20plugin%20mobile-friendly%3F\"><h3>Is the plugin mobile-friendly?<\/h3><\/dt>\n<dd><p>Yes. The floating basket and side cart can be independently enabled or disabled on mobile devices via a toggle in the General Settings tab. The side cart panel is responsive by default and works correctly on all screen sizes.<\/p><\/dd>\n<dt id=\"are%20guest%2Fnon-logged-in%20customers%20supported%3F\"><h3>Are guest\/non-logged-in customers supported?<\/h3><\/dt>\n<dd><p>Yes. All AJAX actions are registered with both <code>wp_ajax_<\/code> and <code>wp_ajax_nopriv_<\/code> hooks, so the side cart functions correctly for both logged-in and guest shoppers.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0<\/h4>\n\n<ul>\n<li>Initial release \u2014 Sliding side cart drawer with floating basket button, fly-to-cart animation, AJAX quantity updates and item removal, upsell product slider, three-tab React admin panel with full General \/ Style \/ Translation settings, RTL support, and per-page cart visibility control.<\/li>\n<\/ul>","raw_excerpt":"Add a beautiful sliding side cart drawer to your WooCommerce store. Floating cart button, fly-to-cart animation, upsell product slider, and full styli &hellip;","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/164537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=164537"}],"author":[{"embeddable":true,"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/howdytheme"}],"wp:attachment":[{"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=164537"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=164537"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=164537"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=164537"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=164537"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/hat.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=164537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}