Product Side Cart For WooCommerce
Add a beautiful sliding side cart drawer to your WooCommerce store. Floating cart button, fly-to-cart animation, upsell product slider, and full styli …
5.0
(1 ratings)Will this break my store?
What the WordPress.org registry says about keeping Product Side Cart For WooCommerce running.
Tested to 7.0.2
Tested against the WordPress branch in use today.1 month ago
7.0
Your host must be running at least this version.5.5
1
A single maintainer. Worth knowing if the plugin is load-bearing for your store.Maintenance & trust
Scored on how Product Side Cart For WooCommerce is looked after — not on how many stores run it.
Maintenance
35 / 35WordPress compatibility
20 / 20Support responsiveness
Not enough dataMerchant satisfaction
10 / 15Listing transparency
7 / 10Ratings
5.0
1 ratingProduct Side Cart For WooCommerce 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 — letting customers review their cart, update quantities, remove items, and proceed to checkout without ever leaving the page they were on.
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 — all from a modern React-powered admin settings panel.
Requires WooCommerce to be installed and activated.
How It Works
Once activated, a floating cart basket button appears on every page of your store — 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 — all without a page reload.
When a customer clicks “Add to Cart” anywhere on your store (shop page, product page, or anywhere else), a fly-to-cart animation launches the product image across the screen toward the floating basket icon, giving an instant visual confirmation that the item was added.
Key Features
Floating Cart Basket Button
* Enable or disable the floating basket button sitewide with a single toggle
* Independently enable or disable the basket on mobile devices (breakpoint: 768px)
* Position the basket on the left or right side of the screen
* Choose between a square or round basket shape
* Control basket icon size, vertical offset, and horizontal offset independently
* Choose from multiple built-in cart icon SVG styles
* Upload a fully custom basket icon image from the WordPress media library
* Set custom basket background colour and icon colour
* Show or hide the product count badge on the basket
* Set the count badge position to top-left or top-right
* Set custom count badge background colour and count text colour
* Choose how the count is calculated: sum of all item quantities, or number of unique products in the cart
Fly-To-Cart Animation
* 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
* Provides immediate visual feedback that the item was added to the cart
* Enable or disable the animation with a single toggle — does not affect cart functionality
Side Cart Drawer
* The side cart panel slides in and out with a smooth CSS transition (translateX)
* A darkened overlay backdrop appears behind the side cart when it is open, dimming the page content
* Clicking the backdrop closes the cart
* Choose whether newly added items appear at the top (descending) or bottom (ascending) of the cart item list
* Specify pages where the basket and side cart should be hidden — by page ID, slug, post type, or WooCommerce page type (cart, checkout, shop) — entered as a comma-separated list
Side Cart Header
* Displays a customisable cart heading with item count — for example “Your Cart (3)”
* Set the heading font size (in px)
* Choose heading alignment: left, centre, or right
* Show or hide the close icon button in the header
* Choose from multiple built-in close icon SVG styles
* Set close icon size (in px) and colour
* Position the close icon on the left or right side of the header
* Set header background colour, border colour, and border style (solid, dotted, or dashed)
* Set header title text colour
Side Cart Body — Product Cards
* Every element of the product card can be individually shown or hidden:
— Product image
— Product name
— Product unit price
— Product line total (price × quantity)
— Quantity input box (editable — updates the cart via AJAX without page reload)
— Delete/remove button
— Link to the individual product page (wraps both image and name in a clickable link)
* Set product image width (in px) and border radius (in px)
* Set product title colour and title hover colour
* Set product price colour
* Choose delete button style: icon or text
* If using icon style: choose from multiple built-in trash icon SVG styles
* Set trash icon colour and trash icon hover colour
Upsell Product Slider
* Select any WooCommerce products from the admin to feature in a built-in product slider shown inside the side cart, below the cart items
* The slider is powered by Swiper with autoplay (3-second delay, pauses on hover) and manual left/right navigation arrows
* Products already in the customer’s cart are automatically excluded from the slider — only products not yet in the cart are shown
* Enable or disable the slider on desktop and mobile independently
* Show or hide each element of the slider product card: product image, product name, product price, and Add to Cart button
* Customers can add slider products directly to their cart from within the side cart panel
* 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)
Side Cart Footer — Totals & Buttons
* Show or hide each totals line independently: Subtotal (with item count), Shipping (shows “Free” when shipping cost is zero), and Order Total
* Three action buttons: View Cart, Checkout Now, and Keep Shopping
* Show any combination of the three buttons — hide any you do not need
* Drag-and-drop button reordering in the admin — arrange the buttons in any order
* 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)
* Set button font size and button padding globally
* Set button background colour, background hover colour, button text colour, and text hover colour
Empty Cart State
* When the cart is empty, the side cart displays a customisable empty cart message and a “Return to Shop” button
* Both the empty cart text and the return button text are fully customisable from the Translation / Text settings tab
* The Return to Shop button redirects to your WooCommerce shop page automatically
Translation & Text Settings
* Every text string displayed in the side cart is editable from the admin — no code, no gettext files needed:
— Cart heading text (default: “Your Cart”)
— View Cart button label (default: “View Cart”)
— Checkout button label (default: “Checkout Now”)
— Keep Shopping button label (default: “Keep Shopping”)
— Empty cart message (default: “Your cart is empty.”)
— Return to Shop button label (default: “Return to Shop”)
* Ideal for multilingual stores or simply renaming buttons to match your brand voice
URL Settings
* Customise the destination URL for the View Cart button
* Customise the destination URL for the Checkout Now button
* Customise the destination URL for the Keep Shopping / Continue Shopping button
Modern React-Powered Admin Panel
* The entire settings panel is built with React using @wordpress/element — fast, responsive, and intuitive
* Settings are organised into three clear tabs: General Settings, Style Settings, and Translation / Text Settings
* Settings are saved via the WordPress REST API (/wp/v2/settings) without full page reloads
* Toast notifications confirm when settings are saved successfully or if an error occurs
* All settings are sanitized server-side using sanitize_text_field before being stored
Performance & Security
* All AJAX actions (cart updates, quantity changes, item removal, product slider add to cart) are protected with WordPress nonce verification
* Frontend cart data is fetched fresh via AJAX each time the side cart opens — always reflects the true current cart state
* Supports both logged-in and guest (non-logged-in) customers via paired wp_ajax and wp_ajax_nopriv action hooks
* RTL (right-to-left) stylesheet included for Arabic, Hebrew, and other RTL language stores
* WooCommerce cart fragments are triggered on quantity updates so all WooCommerce cart widget counts stay in sync
Perfect For
- Any WooCommerce store that wants to reduce cart-page drop-off and improve the add-to-cart experience
- Fashion, apparel, and lifestyle stores where customers frequently browse and add multiple items
- Stores selling digital products or subscriptions that want a lightweight and fast cart experience
- Multi-product stores where upselling additional products at cart time increases average order value
- Stores targeting mobile shoppers — the side cart is fully responsive and can be independently controlled on mobile
Yes. WooCommerce must be installed and activated. The plugin queries the WooCommerce cart directly and uses WooCommerce functions throughout — it cannot function without WooCommerce.
After activation, a top-level Product Side Cart 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.
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.
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 (cart, checkout, shop). The floating basket button and side cart will be hidden on any matched page.
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.
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.
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.
No. The fly-to-cart animation is purely visual — 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.
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.
Yes. All AJAX actions are registered with both wp_ajax_ and wp_ajax_nopriv_ hooks, so the side cart functions correctly for both logged-in and guest shoppers.
Plugin details
Tags on WordPress.org