Product Side Cart For WooCommerce

Description

Product 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.

📄 Documentation | 🔴 Live Demo

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