# Reemplazar el Botón Añadir al Carrito en los Listados PrestaShop: instalación y configuración > Presentación El módulo sustituye el botón Añadir al carrito de las miniaturas de producto (páginas de categoría, búsqueda, inicio, carruseles, productos relacionados) por un botón que lleva a la ficha… - Página: - Idioma: es - Actualizado el: 2026-10-18 - Otros idiomas: [fr](https://www.datafirefly.com/documentation/dflistingbutton/index.md), [en](https://www.datafirefly.com/en/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) - Índice: ## Presentación El módulo sustituye el botón **Añadir al carrito** de las miniaturas de producto (páginas de categoría, búsqueda, inicio, carruseles, productos relacionados) por un botón que lleva a la ficha del producto. El cliente elige allí el peso, la talla o el formato antes de añadir al carrito. Usted define reglas: qué productos se ven afectados, qué texto muestra el botón y si se muestra el precio más bajo de las combinaciones con «Desde». ## Instalación 1. En **Módulos > Gestor de módulos**, haga clic en **Subir un módulo** y envíe el archivo `dflistingbutton-1.0.0.zip`. 2. El módulo crea las tablas `ps_dflb_rule`, `ps_dflb_rule_lang`, `ps_dflb_rule_shop`, `ps_dflb_rule_category` y `ps_dflb_rule_product`, y añade el menú **Catálogo > Botones de listado**. 3. Se crea una regla de ejemplo desactivada, «Ejemplo: todos los productos con combinaciones». Puede activarla tal cual o eliminarla. 4. Después de crear o activar una regla, abra una página de categoría de la tienda. Si el botón no aparece, vacíe la caché en **Parámetros avanzados > Rendimiento**. ## Crear una regla En **Catálogo > Botones de listado**, haga clic en **Añadir una regla**. El formulario tiene tres bloques. ### Regla y segmentación - **Nombre de la regla**: nombre interno, no visible para los clientes. - **Activa**: una regla desactivada se ignora. - **Prioridad**: cuando varias reglas coinciden con un producto, gana la de número más bajo. Valor por defecto: 10. - **Se aplica a**: _Todos los productos_, _Categorías_ o _Productos concretos_. - **Categorías**: árbol de casillas con un campo de filtro. Para este tipo de regla es obligatoria al menos una categoría. - **Incluir subcategorías**: también se incluyen los productos de todas las subcategorías de las categorías marcadas. - **Coincidencia de categoría**: _El producto está en una de las categorías_ (cuentan todas las categorías asociadas al producto) o _Solo la categoría por defecto del producto_. - **Productos**: para el tipo _Productos concretos_, búsqueda por nombre, referencia o ID. - **Condición**: _Sin condición_, _Productos con combinaciones_ o _Productos que usan un grupo de atributos_. Con _Productos con combinaciones_, los productos simples de la misma categoría conservan su botón Añadir al carrito. - **Grupo de atributos**: para la última condición, por ejemplo Peso o Talla. Solo se incluyen los productos con una combinación que usa ese grupo. - **Productos excluidos**: estos productos nunca reciben el botón de esta regla, sea cual sea la segmentación. - **Asociación de tienda**: en multitienda, elija las tiendas donde se aplica la regla. ### Botón - **Texto del botón**: un texto por idioma, por ejemplo «Ver todas las opciones de peso». Un idioma vacío toma el primer texto introducido. - **Estilo**: _Botón principal del tema_ (clases `btn btn-primary`), _Botón con borde del tema_ (`btn btn-outline-primary`) o _Colores personalizados_, con color de fondo, color de texto y vista previa. - **Icono**: flecha, opciones, balanza, ojo o ninguno. - **Ancho completo**: el botón ocupa todo el ancho de la miniatura. - **Clases CSS adicionales**: se añaden al botón, útiles para reutilizar una clase de su tema. - **Ocultar el selector de cantidad**: oculta el campo de cantidad que algunos temas muestran en los listados. ### Precio en los listados Este bloque solo afecta a los productos con al menos dos combinaciones. - **Mostrar el precio más bajo de las combinaciones**: PrestaShop calcula el precio de cada combinación (impuestos, grupo del cliente, precios específicos y descuentos incluidos). Si el más bajo difiere del precio que muestra el tema, lo sustituye, y se ocultan el precio anterior tachado y la etiqueta de descuento de la miniatura. - **Añadir el prefijo «Desde»**: se añade delante del precio solo si los precios de las combinaciones son distintos y el precio mostrado es el más bajo. Si desactiva la opción anterior y la combinación por defecto no es la más barata, el prefijo no se muestra, para no anunciar un precio incorrecto. - **Texto del prefijo**: un texto por idioma («Desde», «À partir de», «Ab», etc.). ## Ejemplo: quesos y embutidos vendidos al peso 1. Nombre: _Quesos al peso_. Se aplica a: _Categorías_. Marque _Quesos y embutidos_ y mantenga _Incluir subcategorías_. 2. Condición: _Productos que usan un grupo de atributos_, grupo _Peso_. 3. Texto del botón: «Ver todas las opciones de peso» en español, «Voir tous les poids disponibles» en francés. 4. Mantenga activados _Mostrar el precio más bajo_ y _Desde_, y guarde. En la categoría, cada queso vendido en 250 g, 500 g y 1 kg muestra «Desde» seguido del precio de 250 g y el botón hacia su ficha. Un producto vendido por unidad, sin combinación de peso, conserva su botón Añadir al carrito. ## Ajustes generales La página de configuración del módulo (botón **Ajustes** encima de la lista de reglas) contiene: - **Activar el módulo**: desactiva todas las reglas sin eliminarlas. - **Detección del tema**: _Automático_ (recomendado), _Usar siempre la consulta AJAX_ o _Solo hooks_. Vea la sección siguiente. - **Desactivar también el enlace nativo de añadir al carrito**: vacía en el servidor la URL de añadir al carrito de los productos afectados, mediante el hook `actionPresentProductListing`. Algunos temas muestran entonces su propio enlace «Ver producto»: si obtiene dos botones, deje esta opción desactivada. - **Ocultar el botón Vista rápida**: solo en los productos afectados. - **Ignorar las combinaciones sin stock para el precio más bajo**: se aplica cuando la gestión de stock está activa y el producto no admite pedidos sin stock. Si todas las combinaciones están sin stock, se tienen en cuenta todas. ## Compatibilidad con su tema ### Cómo identifica el módulo los productos Mientras se muestra una miniatura, el módulo se ejecuta en los hooks `displayProductPriceBlock` y `displayProductListReviews`, que llaman el tema Classic, Hummingbird y la mayoría de temas. Para cada producto afectado imprime una marca invisible. El script del módulo localiza la miniatura que contiene la marca, oculta el botón de carrito, el formulario de añadir al carrito que lo rodea y el selector de cantidad, e inserta el nuevo botón donde estaba el botón oculto. Si el tema no muestra ningún botón de carrito en sus listados (caso del tema Classic), el botón se coloca justo después del bloque de precio. En modo _Automático_, si ninguna miniatura de la página ha activado esos hooks, el script envía los ID de los productos visibles al controlador del módulo, que devuelve los afectados (60 productos como máximo por consulta, solo productos activos y visibles). Las miniaturas añadidas tras un filtro por facetas, una ordenación o un scroll infinito se procesan automáticamente. ### Selectores CSS El bloque **Compatibilidad con el tema (selectores CSS)** de la configuración contiene los selectores que usa el script: - **Contenedor de la miniatura de producto**: bloque que envuelve un producto (`.product-miniature`, `.ajax_block_product`, etc.). - **Botón Añadir al carrito**: elementos sustituidos (`.add-to-cart`, `[data-button-action="add-to-cart"]`, etc.). - **Selector de cantidad**, **Precio**, **Precio anterior y descuento**, **Punto de inserción**, **Botón Vista rápida**. Añada las clases de su tema a la lista, separadas por comas. El botón **Restablecer los selectores por defecto** recupera los valores originales. ### Personalizar el estilo El botón lleva la clase `.dflb-btn`, más `.dflb-full` a ancho completo y `.dflb-style-custom` con colores personalizados (variables `--dflb-bg` y `--dflb-color`). El prefijo de precio lleva la clase `.dflb-from`, y la miniatura procesada recibe `.dflb-has-btn`. Con un tema muy personalizado, pruebe en una copia de la tienda: página de categoría, búsqueda, inicio y filtros por facetas. ## Lo que el módulo no modifica - el producto principal de la ficha y su vista rápida; - el carrito, el proceso de compra y la cuenta de cliente; - los archivos del núcleo y del tema (sin override, sin plantillas modificadas). ## Limitaciones conocidas - El módulo cambia la visualización de los listados. No bloquea un añadido al carrito hecho por otra vía (enlace directo, módulo de terceros). - El precio más bajo y el prefijo se aplican en el navegador. El HTML original y los datos estructurados del tema conservan el precio de la combinación por defecto. - Por encima de 150 combinaciones en un mismo producto, solo las 150 primeras se usan para calcular el precio más bajo.