Hoverbuy – Sticky Add to Cart Bar for WooCommerce

Hoverbuy adds a sticky add to cart bar to your WooCommerce product pages. When a shopper scrolls past the product’s own Add to cart button, a slim bar slides in at the bottom (or top) of the screen with the product image, name, price, star rating (once the product has reviews), stock status (when WooCommerce shows one), a quantity box and an Add to cart button. It is free and does not need a particular theme: it works from the add-to-cart form WooCommerce prints on the product page.

The bar’s button does not add anything to the cart by itself. It presses your product page’s own Add to cart button or submits the product’s own form with that button, so WooCommerce adds exactly what the form holds: the chosen variation, the quantity and any fields other plugins put in the form.

Features

• Appears when it matters. By default the bar shows once the real Add to cart button has scrolled out of view (watched with the browser’s IntersectionObserver). You can switch to “after the visitor scrolls a set distance” instead; that mode is also the fallback in browsers without IntersectionObserver.
• Variable products in the free version. Until a variation is chosen the button reads “Choose options” and takes the shopper back to the product form. Once a variation is chosen, the bar’s price and stock status follow it and the button adds that variation.
• Quantity in step with the form. The bar’s quantity box and the product form’s quantity box mirror each other, including the minimum and maximum the form allows.
• Top or bottom. At the top, the bar sits below the WordPress admin bar and below a full-width fixed or sticky header. At the bottom, it sits above a full-width bar fixed to the bottom of the screen, such as a mobile navigation bar.
• Optional hiding. Hide the bar while the visitor scrolls up, and while a cart drawer or side cart is open.
• Devices. Switch the bar on or off for desktop, tablet and mobile. A compact phone layout (image, price and button, on by default) is used on screens under 768 px.
• Conditions. Show it on all products, or only on products that match your rules: chosen products, categories (subcategories included), tags or product types (simple, variable, grouped, external and any type another plugin registers). Exclude products, categories, tags or types. Exclusions win over inclusions.
• Per-product override. A “Sticky add to cart bar” box on the product edit screen: Default, Show or Hide. Show and Hide win over the rules above.
• Design. Background, text, button background, button text and border colours (leave a colour empty to keep your theme’s; an empty background or border uses the bar’s light default), a soft shadow, the button text and the button corner radius. “Use theme button styles” (on by default) gives the button your theme’s own button classes. The stacking order (z-index) is under Advanced.
• Live preview. The settings screen shows one of your product pages with the bar (only you can see it) and applies your position, content and design changes before you save them.
• Accessible. The bar is a labelled region, every control is reachable by keyboard, a hidden bar cannot receive focus, the bar never moves focus on its own and does not slide away while it holds keyboard focus, and animations are switched off when the visitor’s system asks for reduced motion.
• Light. One stylesheet and one script without dependencies, loaded only on product pages where the bar is shown. A chosen variation’s price and stock status come from WooCommerce’s own variation event, so the bar makes no AJAX requests of its own.

How it works

1. On a product page, Hoverbuy checks the settings, the product’s own override, the product type, its categories and tags, and the visitor’s device. If the bar should not appear, nothing is added to the page.
2. If it should, the bar is printed after the product (or in the page footer when the template does not fire WooCommerce’s woocommerce_after_single_product hook) and the script watches the real Add to cart button.
3. The bar’s quantity box already mirrors the form’s. When the shopper clicks the bar’s button, Hoverbuy presses the real Add to cart button or submits the product form with that button, and WooCommerce adds the product from that form.
4. When the add is done without a page reload and WooCommerce’s added_to_cart event fires, the bar shows “Added to cart.” with a View cart link.

The bar needs JavaScript; without it, shoppers simply use the normal product form.

Compatibility

• Block themes. The Single Product block template fires woocommerce_after_single_product, and the bar is printed there or in the footer.
• Page builders. The bar looks for WooCommerce’s add-to-cart form (form.cart) and its button (.single_add_to_cart_button) on the page. If your product template uses different markup, set your own form and button selectors under Advanced.
• Product add-ons and custom fields. Fields that other plugins add inside the product form are submitted with it, because the bar submits that same form.
• Variation swatches. Swatch plugins that drive WooCommerce’s own variation form update the bar too, because the bar listens to WooCommerce’s found_variation and reset_data events.
• Side carts. Hoverbuy sends no cart request of its own: the add goes through the product’s form and WooCommerce. The bar hides while the page’s html or body element carries a class from the “Cart drawer classes” list under Advanced. The default list covers the WooCommerce Mini-Cart block, Side Cart WooCommerce (XootiX), WPC Fly Cart, FunnelKit Cart and Modern Cart, each class taken from that plugin’s own code; add the class your drawer uses if it is not there.

Developers

• Filters: hoverbuy_should_render (final say on rendering), hoverbuy_bar_parts (add, remove or reorder the bar’s parts), hoverbuy_bar_settings (settings for one product’s bar), hoverbuy_contexts (name => conditional callback for the pages where the bar may appear; the page’s queried object must still be a product, and the default is product => is_product), hoverbuy_bar_allowed_html (tags allowed in parts), hoverbuy_capability (who can change the settings and open the preview; default manage_woocommerce).
• Action: hoverbuy_after_add fires after a product added through the bar’s button reaches the cart, with the cart item key, product id, quantity and variation id.
• JavaScript: the bar dispatches a bubbling hoverbuy_bar_clicked event with detail.productId and detail.state (ready or choose).
• Template: copy templates/bar.php to yourtheme/hoverbuy/bar.php to change the markup.

More plugins by Emtiaz Zahid

• Launchmender: 44 pre-launch checks with one-click fixes, a manual checklist and a client handoff report
• Faultwright: PHP errors, JavaScript errors, failed cron jobs, emails and updates on one timeline
• Stalemender: content audit that gives every post a Freshness Score (0–100) and tells you why
• Waymender: finds broken links without hammering your server, logs 404s and fixes both in one click
• Anchormender: internal link suggestions while you write, an orphan post report and bulk internal linking
• Repeatwright: RFM customer segments, repeat rate, LTV and cohort retention from your own WooCommerce orders