Quantity +/- Buttons — Complete Guide
Install, configure and customise the + and − quantity buttons on the PrestaShop 8 and 9 product page: style, colours, Classic theme compatibility and no-override operation.
Overview
The Quantity +/- Buttons module adds real + and − buttons on each side of the quantity field, on the product page. It replaces the use of PrestaShop’s small native number field — awkward both on the keyboard and with a finger on mobile — with two large, easy-to-tap buttons.
The module modifies no theme file: it adds a lightweight stylesheet and script, only on the product page, which wrap the existing quantity field. It is compatible with PrestaShop 1.7, 8 and 9, with the Classic theme as well as most custom themes.
Installation
- In the back office, open Modules > Module Manager.
- Click Upload a module and drop the module’s ZIP archive.
- Once installation is complete, click Configure (optional: the module works with its default settings right after installation).
No SQL table is created and no theme file is modified. The module simply registers the hook that loads its assets on the product page.
Configuration
The configuration page gathers four settings. All are optional: by default the buttons are enabled, in square style, with the native arrows hidden.
Enable the buttons
The Enable the buttons switch controls the global display. Turn it off to temporarily hide the buttons without uninstalling the module: the product page then returns to the original quantity field.
Button style
Choose the appearance of the buttons:
- Square: the + and − buttons have slightly rounded corners at the ends of the group (default style).
- Rounded: the buttons take a pill shape, with fully rounded ends.
Background colour and icon colour
Two colour pickers let you adjust:
- the background colour of the buttons (light grey by default);
- the colour of the + and − icons (dark grey by default).
The hover effect is derived automatically from the background colour, so there is no third setting to manage. Colours are applied via CSS variables, which ensures clean integration into most themes.
Hide the native number arrows
When this option is enabled (recommended), the small vertical arrows of the browser number field are hidden, leaving only the module’s + and − buttons. Disable it if you prefer to keep the native arrows visible.
Customer side
On the product page, the customer sees a − button to the left of the quantity field and a + button to the right. Each click increments or decrements the quantity by one step, then updates the price, any combinations and the add-to-cart button, exactly like a manual entry. The quantity can of course still be edited directly from the keyboard in the field.
How it works and compatibility
No template override
The module overrides no theme file. It finds the standard quantity field of the product page and wraps it via JavaScript injection to add the buttons. This approach makes it compatible with a wide range of themes and shields it from PrestaShop updates, since no template is overridden.
Classic theme and bootstrap-touchspin
The Classic theme already enriches the quantity field with bootstrap-touchspin, which adds two small vertical arrows. The module cleanly neutralises those arrows inside its own button group, leaving only the clearly readable + and −, with no duplicate and no layout shift.
Cart synchronisation
On every click, the module applies the new value then fires the events expected by PrestaShop, both native and jQuery. The total price, combinations and the add-to-cart button react normally. After a combination change, which rebuilds the quantity block, the buttons are re-injected automatically.
Respecting stock and constraints
The buttons read the minimum quantity, maximum quantity and step defined on the field. The customer cannot go below the required minimum (often 1) or exceed the available stock when it is bounded. The behaviour stays consistent with the shop’s rules.
Troubleshooting
The buttons do not appear on the product page
Check that the module is enabled and that the Enable the buttons option is set to Yes. Then clear the PrestaShop cache (Advanced Parameters > Performance) and reload the product page. If your theme uses a heavily customised quantity field, the module may not detect it; contact support specifying your theme.
The Classic theme native arrows remain visible
Make sure you are using version 1.1.0 or higher, which neutralises the bootstrap-touchspin arrows, then clear the cache. Also check that no CSS override in your theme re-displays those arrows.
The quantity changes but the price does not update
This behaviour usually comes from a theme that does not use PrestaShop’s standard events. The module fires the native and jQuery events; if the theme listens to a different mechanism, contact support indicating the theme used.
Uninstallation
Uninstalling the module removes its assets from the product page and deletes its configuration. The quantity field returns to its original appearance. No product data or order is affected.
FAQ
Does the module modify my theme?
No. It overrides no theme file: it adds a stylesheet and a script only on the product page, which wrap the existing quantity field.
Can I change the button colours?
Yes. The configuration lets you set the background colour and the colour of the + and − icons, as well as the square or rounded style. The hover effect is derived automatically from the background colour.
Is the module compatible with PrestaShop 9?
Yes, the module is compatible with PrestaShop 1.7, 8.x and 9.x, in single shop as well as multistore.