Sticky Menu Basket for WooCommerce

The Sticky Menu Basket plugin is a floating cart/basket button for WooCommerce sites. It comes with a configurable item-count badge and can be positioned in the top, bottom, left, or right of your website. It is a super clean cart/basket solution that reduces your menu clutter, boosts the UX, and provides a more tactile UI. Whatsmore, it looks great on mobile devices!

Sticky Menu Basket on a desktop monitor

Licences for this plugin are valid forever - they do not need to be renewed.

(1 customer review)
SKU: N/A Category: Current: 2.1.1
money-back guarantee sticker


100% No-Risk, Money Back Guarantee!

We're excited to have you experience the power of our plugins. So over the next 14 days, if any Power Plugins aren’t the best fit for your project, simply reach out! We’ll happily refund 100% of your money. No questions asked.

About Sticky Menu Basket

Add an always on-top floating cart button to your website’s WooCommerce cart/basket.

  • Easy to style it to match your site’s branding
  • Developer-friendly filters to control the placement of the item-count badges
  • Customise the HTML on the main overlay button
  • Add an animated item-count badge to any page element, including menu items
  • Auto redirects to the shop page if the cart page is empty
Configure the floating cart button
Floating cart button settings

Sticky Menu Basket works out-of-the-box. Just install it and use it.

Changelog: Sticky Menu Basket

Version 2.1.1

Released: 2022-04-13

  • Added some great new built-in cart and basket icons to choose from.

Version 2.1.0

Released: 2022-04-09

Added settings to the back-end to make it much easier to configure the floating cart button.

Version 2.0.1

Released: 2022-01-02

Integrate with Power Plugins updates.

Older releases

  • Refactored code.
  • Fixed a bug that caused an error when WooCommerce is uninstalled.
  • Removed calls to the deprecated woocommerce_get_page_id() function.
  • Minor tidy-up on the CSS.
  • Replaced reliance on FA4 by inlining an SVG cart image.
  • When viewing the cart page, if you remove the last item from the cart, we now bounce the user back to the shop page, instead of leaving them viewing an empty cart page.
  • Integration with proper update checking and change log.
  • Initial development release.

Styling the Cart Button

The first thing you’ll want to do with Sticky Menu Basket is change the colour of the always-on-top button. You can do this with a very small piece of CSS.

The main button is a link element: <a class="smb-container ...">...</a>

Example One: Solid Colour

/**
 * Green Sticky Menu Basket button with a thick black border.
 */
.smb-container {
	background-color:  green;
	border: 4px solid black;
}

Example Two: A Linear Gradient

/**
 * Gradiated Sticky Menu Basket button with a thin grey border
 * and a soft shadow.
 */
.smb-container {
	background-image: linear-gradient(128deg, #0693e3 0, #9b51e0 100%);
	border: 1px solid #444;
	box-shadow: 0 0 1em #00000044;
}

Adding Cart Item Count to a Menu Item

You can use Sticky Menu Basket to attach a cart item-count badge to any HTML element on the page. This is useful when you want to add it to a menu item. Any HTML item on the page that has a CSS class of menu-item-basket will have an item-count badge attached to it.

In your WordPress site’s admin area, edit the menu item you want to attach your item-count badge to. If you don’t see an option that says “CSS Classes (optional)” then…

In the top-right, click the pull-down option that says “Screen Options”. Then tick “CSS Classes” and close the screen options again.

Enable WordPress menu CSS Classes
CSS Classes option in WordPress menu items

Edit your menu item and add menu-item-basket to the CSS Classes. Then just save the menu, and then check it’s working.

Edit WordPress menu item
Edit a WordPress menu item
Menu Item with cart item count
Cart item count badge

1 review for Sticky Menu Basket

  1. Clare

    Clare

    This sticky menu basket means your customer can always find their cart, and access it quickly to make a purchase. Great way to make the customer UX better. Power plugins are quick to respond to any queries and provide great support.

Add a review