# Replace the Add to Cart Button in PrestaShop Listings: installation and setup

> Overview The module replaces the Add to cart button of product miniatures (category pages, search, home page, carousels, related products) with a button that leads to the product page. The…

- Page: <https://www.datafirefly.com/en/documentation/dflistingbutton/>
- Language: en
- Last updated: 2026-10-18
- Other languages: [fr](https://www.datafirefly.com/documentation/dflistingbutton/index.md), [es](https://www.datafirefly.com/es/documentation/dflistingbutton/index.md), [de](https://www.datafirefly.com/de/documentation/dflistingbutton/index.md), [it](https://www.datafirefly.com/it/documentation/dflistingbutton/index.md), [pl](https://www.datafirefly.com/pl/documentation/dflistingbutton/index.md), [nl](https://www.datafirefly.com/nl/documentation/dflistingbutton/index.md), [pt](https://www.datafirefly.com/pt/documentation/dflistingbutton/index.md)
- Index: <https://www.datafirefly.com/en/documentation/llms.txt>

## Overview

The module replaces the **Add to cart** button of product miniatures (category pages, search, home page, carousels, related products) with a button that leads to the product page. The customer chooses the weight, size or format there before adding to cart. You define rules: which products are affected, what text the button shows, and whether the lowest combination price is shown with "From".

## Installation

1. In **Modules > Module Manager**, click **Upload a module** and send the file `dflistingbutton-1.0.0.zip`.
2. The module creates the tables `ps_dflb_rule`, `ps_dflb_rule_lang`, `ps_dflb_rule_shop`, `ps_dflb_rule_category` and `ps_dflb_rule_product`, and adds the menu **Catalog > Listing buttons**.
3. A disabled example rule, "Example: all products with combinations", is created. You can enable it as is or delete it.
4. After creating or enabling a rule, open a category page of the shop. If the button does not appear, clear the cache in **Advanced Parameters > Performance**.

## Creating a rule

In **Catalog > Listing buttons**, click **Add a rule**. The form has three blocks.

### Rule and targeting

- **Rule name**: internal name, not shown to customers.
- **Active**: a disabled rule is ignored.
- **Priority**: when several rules match a product, the rule with the lowest number wins. Default value: 10.
- **Applies to**: _All products_, _Categories_ or _Specific products_.
- **Categories**: checkbox tree with a filter field. At least one category is required for this rule type.
- **Include subcategories**: products of every subcategory of the ticked categories are targeted too.
- **Category match**: _Product is in one of the categories_ (every category linked to the product counts) or _Default category of the product only_.
- **Products**: for the _Specific products_ type, search by name, reference or ID.
- **Condition**: _No condition_, _Products with combinations_ or _Products using an attribute group_. With _Products with combinations_, simple products in the same category keep their Add to cart button.
- **Attribute group**: for the last condition, for example Weight or Size. Only products with a combination that uses this group are targeted.
- **Excluded products**: these products never get the button of this rule, whatever the targeting.
- **Shop association**: in multistore, choose the shops where the rule applies.

### Button

- **Button text**: one text per language, for example "See all available weights". A language left empty takes the first text entered.
- **Style**: _Theme primary button_ (classes `btn btn-primary`), _Theme outline button_ (`btn btn-outline-primary`) or _Custom colors_, with a background color, a text color and a preview.
- **Icon**: arrow, options, scale, eye or none.
- **Full width**: the button takes the full width of the miniature.
- **Extra CSS classes**: added to the button, useful to reuse a class from your theme.
- **Hide the quantity selector**: hides the quantity field that some themes show in listings.

### Price in listings

This block only concerns products with at least two combinations.

- **Show the lowest combination price**: PrestaShop computes the price of each combination (taxes, customer group, specific prices and discounts included). If the lowest differs from the price shown by the theme, it replaces it, and the struck-through old price and the discount badge of the miniature are hidden.
- **Add the From prefix**: added before the price only when combination prices differ and the price shown is the lowest. If you turn off the previous option and the default combination is not the cheapest, the prefix is not shown, so no wrong price is announced.
- **Prefix text**: one text per language ("From", "Desde", "Ab" and so on).

## Example: cheese and cured meats sold by weight

1. Name: _Cheese by weight_. Applies to: _Categories_. Tick _Cheese and cured meats_ and keep _Include subcategories_.
2. Condition: _Products using an attribute group_, group _Weight_.
3. Button text: "See all available weights" in English, "Ver todas las opciones de peso" in Spanish.
4. Keep _Show the lowest combination price_ and _From_ enabled, then save.

In the category, each cheese sold in 250 g, 500 g and 1 kg shows "From" followed by the 250 g price, and the button to its product page. A product sold by the unit, without a weight combination, keeps its Add to cart button.

## General settings

The module configuration page (**Settings** button at the top of the rule list) contains:

- **Enable the module**: turns all rules off without deleting them.
- **Theme detection**: _Automatic_ (recommended), _Always use the AJAX lookup_ or _Hooks only_. See the next section.
- **Also disable the native add to cart link**: empties on the server side the add to cart URL of targeted products, through the `actionPresentProductListing` hook. Some themes then show their own "View product" link: if you end up with two buttons, leave this option off.
- **Hide the quick view button**: on targeted products only.
- **Ignore out of stock combinations for the lowest price**: applies when stock management is on and the product refuses out of stock orders. If every combination is out of stock, all of them are taken into account.

## Theme compatibility

### How the module finds products

While a miniature is rendered, the module runs in the `displayProductPriceBlock` and `displayProductListReviews` hooks, which the Classic theme, Hummingbird and most themes call. For each targeted product it prints an invisible marker. The module script finds the miniature that holds the marker, hides the cart button, the add to cart form around it and the quantity selector, then inserts the new button where the hidden button was.

If the theme shows no cart button in its listings (as with the Classic theme), the button is placed right after the price block.

In _Automatic_ mode, if no miniature on the page triggered these hooks, the script sends the IDs of the visible products to the module controller, which returns those that are targeted (at most 60 products per request, active and visible products only). Miniatures added after a faceted filter, a sort or an infinite scroll are handled automatically.

### CSS selectors

The **Theme compatibility (CSS selectors)** block of the configuration holds the selectors used by the script:

- **Product miniature container**: block that wraps one product (`.product-miniature`, `.ajax_block_product` and so on).
- **Add to cart button**: replaced elements (`.add-to-cart`, `[data-button-action="add-to-cart"]` and so on).
- **Quantity selector**, **Price**, **Old price and discount**, **Insertion point**, **Quick view button**.

Add your theme's classes to the list, separated by commas. The **Restore default selectors** button brings back the original values.

### Customizing the style

The button has the class `.dflb-btn`, plus `.dflb-full` at full width and `.dflb-style-custom` with custom colors (variables `--dflb-bg` and `--dflb-color`). The price prefix has the class `.dflb-from`, and the processed miniature gets `.dflb-has-btn`.

With a heavily customized theme, test on a copy of the shop: category page, search, home page and faceted filters.

## What the module does not change

- the main product of the product page and its quick view;
- the cart, the checkout and the customer account;
- core and theme files (no override, no template changed).

## Known limitations

- The module changes how listings are displayed. It does not block an add to cart made another way (direct link, third-party module).
- The lowest price and the prefix are applied in the browser. The original HTML and the theme's structured data keep the price of the default combination.
- Beyond 150 combinations on one product, only the first 150 are used to compute the lowest price.