Sticky Menu Basket for WooCommerce

A cool responsive 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. Great for mobile-first stores!

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

(1 customer review)
SKU: N/A Category: Current: 2.1.6
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
Floating cart button settings page
Floating cart button settings

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

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

Changelog: Sticky Menu Basket

Version 2.1.6

Released: 2022-08-10

Remove WooCommerce's built-in redirect from the checkout to the shop, when cart is empty, if the user agent is a bot. This is to let bots crawl the empty empty checkout page without encountering a soft 404. Regular users will be unaffected.

Version 2.1.5

Released: 2022-08-06

Tweak bot user-agent detection again and added to the user agent regex.

Version 2.1.4

Released: 2022-08-05

Minor adjustment to the auto-redirect from the checkout and basket pages. Better detection of spiders/bots.

Older releases

Minor update to prevent Bots from being redirected away from the basket page when the basket is empty.This should give cleaner results when analysing a site's SEO metrics.

Minor update, with the updated power-plugins.com updater library.

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

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

Integrate with Power Plugins updates.

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

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