Hoverbuy – Sticky Add to Cart Bar for WooCommerce
| 开发者 | emtiazzahid |
|---|---|
| 更新时间 | 2026年10月16日 12:26 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- 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.
- 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.
- 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_producthook) and the script watches the real Add to cart button. - 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.
- When the add is done without a page reload and WooCommerce's
added_to_cartevent fires, the bar shows "Added to cart." with a View cart link.
- 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_variationandreset_dataevents. - 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.
- 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 isproduct=>is_product),hoverbuy_bar_allowed_html(tags allowed in parts),hoverbuy_capability(who can change the settings and open the preview; defaultmanage_woocommerce). - Action:
hoverbuy_after_addfires 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_clickedevent withdetail.productIdanddetail.state(readyorchoose). - Template: copy
templates/bar.phptoyourtheme/hoverbuy/bar.phpto change the markup.
- 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
- Dynafield: ACF, Pods, Meta Box and post meta as dynamic tags in free Elementor: text, link, image, number, colour and date
安装:
- Install and activate WooCommerce.
- Install Hoverbuy from the Plugins screen (or upload the plugin folder to
/wp-content/plugins/) and activate it. - Open a product page that has an Add to cart button and scroll past the button: the bar works with the default settings.
- To change it, go to WooCommerce → Sticky Add to Cart.
屏幕截图:
常见问题:
Does it work with variable products?
Yes, in the free version. Until the shopper chooses a variation, the bar's button reads "Choose options", scrolls back to the product form and moves the keyboard focus to the first option the shopper can pick. After a choice, the bar shows that variation's price and stock status, and its button adds the variation with the quantity in the bar. Grouped and external products work too: the bar submits their form the same way (there is no quantity box in the bar for them).
My theme already has a sticky add to cart bar. How do I avoid two?
Switch one of them off. Storefront has its own bar under Appearance → Customize → WooCommerce → Product Page → Sticky Add-To-Cart, and OceanWP has one under Appearance → Customize → WooCommerce → Single Product → Floating Bar. Both are on by default, and the Hoverbuy settings screen reminds you while they are. Flatsome and Woodmart have one in their theme options, and Hoverbuy shows a reminder for them as well. To switch Hoverbuy off instead, untick "Show the bar on product pages" under WooCommerce → Sticky Add to Cart → Display.
Does it work with Elementor or other page-builder product templates?
It works when the product template contains WooCommerce's add-to-cart form: a form.cart with a .single_add_to_cart_button button, which is the markup WooCommerce's own add-to-cart template prints. If your template uses other markup, enter its form and button selectors under Advanced. If neither is found on the page, the bar stays hidden rather than showing a button that would do nothing.
The bar does not appear on my product page. What can I check?
The bar only appears on products that have an add-to-cart form (it does not appear on an out-of-stock simple product, for example), when the Conditions and the product's own Show/Hide box allow it, and on devices that are switched on. If all of that is fine, your theme probably renders the form with other markup: set the form and button selectors under Advanced.
Does it work with side cart plugins?
Yes. The bar runs no add-to-cart request of its own; the product is added through the product's own form and WooCommerce. While a cart drawer is open the bar hides, as long as the drawer adds one of the classes listed under Advanced → Cart drawer classes to the page.
Does the device setting work with page caching?
The device is checked on the server from the browser's user agent and again in the browser from the screen width (phones under 768 px, tablets from 768 to 1024 px). If your page cache serves the same copy of a page to every device, the browser check still hides the bar on a device you switched off, but a page cached for a device you switched off has no bar for anyone. In that case keep all devices on, or, if your cache plugin offers one, turn on its separate cache for mobile visitors.
Is the bar shown on the shop, category or cart pages?
No. It appears on single product pages only, and its stylesheet and script are loaded only on product pages where it is shown.
Does Hoverbuy collect data or send anything to its author?
No. It has no tracking, sends nothing to its author or to any other outside service, and stores only its settings and the per-product Show/Hide choice in your own database. Deleting the plugin removes both, unless you tick "Keep these settings" under Advanced.
更新日志:
- Initial release: sticky add to cart bar that proxies the product's own form, button and scroll-distance triggers, variation price and stock sync, quantity sync, top or bottom position, device toggles and a compact phone layout, include and exclude conditions with a per-product override, design settings with a live preview, cart drawer hiding, and developer hooks.