Reading list Switch to dark mode

    PrestaShop Display Add To Cart Button In Product List | Cart Overview

    Updated 20 December 2023

    PrestaShop Display Add To Cart Button In Product List module adds an ‘add to cart’ button on the product list. Additionally, it also adds a quantity input box next to the ‘add to cart’ button. To enhance the appearance of the button, customization options are also available.

    Cart overview is another important feature of the module. This feature helps to show the products added to the cart in the drop-down menu. In the case of a product with combinations, a quick view popup opens to select the combination of the product.

    Check the overview of the plugin in the video mentioned below –

    Features of the module

    • Show or hide the add to cart button from the product catalog.
    • Enable or disable the display of the quantity input box from the product catalog.
    • Select the pages to use this feature on the product catalog.
    • Customize the appearance of add to cart button.
    • Enable the display of the checked icon on the button once the product is added to the cart.
    • Customize the text to show on the button after the product is successfully added to the cart.
    • Add an icon on the ‘Add to cart button.
    • Use the google material icon to show on the ‘add to cart’ button.
    • Customize the text to show on the ‘Add to cart’ button.
    • Enable cart overview to show products of the cart in the drop-down menu.
    • Enable product quantity selection in the cart drop-down menu.
    • Enable a quick view popup to provide an option of selecting the combination of the product.
    • Or else, enable product page redirection for selecting the combination of the product.
    • Also, this module is MultiShop compatible.

    How to Install the Module

    1. Go to Module Manager in the Back office and click on ‘upload a module’.
    2. Now, Drag and drop the module file or select the file from the system.
    3. In this way, the module installation will be successful.
    Click to upload product List Add to Cart Button module
    Drop file of product List Add to Cart Button module
    Product List Add to Cart Button module installed

    How to configure the module

    The configuration page consists of multiple tabs.

    General Settings

    Under general settings, choose to show or hide the add to cart button. Also, show or hide the quantity input box from the product catalog.

    Searching for an experienced
    Prestashop Company ?
    Find out More

    You can also, choose the pages to show this functionality on the product catalog.

    image-41

    Button Design

    This section of the configuration provides you with the option to customize the look of the button.

    image-42

    Cart Overview

    Here in this section, you can enable the option to display the cart drop-down and enable/disable the quantity selection in cart drop-down.

    image-43

    Pop-up Quick View

    On enabling this option, customers can view the quick view pop-up after clicking on the ‘add to cart’ button. This option will be useful in case the product has several combinations. It will open the quick view popup to select the combination of products to add to the cart.

    Or else, the admin can display the “Select options” button, in place of the ‘add to cart’ button, which will redirect the customer to the Product Detail page.

    image-44

    Front-end workflow

    After configuring the module successfully, following changes can be observed at the front-end. On the product catalog, add to cart button & a box to choose the quantity of product becomes available.

    Add to cart button added on the product list

    In case the admin has enabled the ‘Add to Cart’ button configuration, on clicking the ‘Add to Cart’ button, a pop-up will be shown, from where the customer can select the product combination.

    image-47

    In case the admin has enabled the “Select options” button configuration, on clicking “Select Option” button, the customer will be redirected to the Product details page.

    image-45

    Same functionality becomes available on the search result page & category page.

    Search Result Page

    Add to cart button added on product list on search results page

    Category Page

    Add to cart button added on the product list of category page

    In the following screenshot, you can see the customized ‘add to cart’ button.

    6

    As per the setting, the background & text colour of the button will change on hovering the cursor over it.

    7

    On successfully adding the product to the cart, the button text will change along with the checked icon.

    8

    The screenshot below shows the drop-down menu of the cart. All the products added to the cart will also be available in the drop-down menu.

    image-48

    And when the ‘quantity selection’ in the cart drop-down is enabled, the customer can increase/decrease the product quantity from the cart drop-down as well.

    image-46

    To select the combination of the product, a quick view popup will open on clicking the ‘Add to cart button.

    10

    So, that was all about PrestaShop Display Add To Cart Button In Product List module.

    Support

    For any kind of technical assistance, just raise a ticket at http://webkul.uvdesk.com and for any doubt contact us at [email protected]

    Current Product Version - 4.1.0

    Supported Framework Version - 1.7.x.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content