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
Go to Module Manager in the Back office and click on ‘upload a module’.
Now, Drag and drop the module file or select the file from the system.
In this way, the module installation will be successful.
How to configure the module
The configuration page consists of multiple tabs.
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 ?Read More
You can also, choose the pages to show this functionality on the product catalog.
This section of the configuration provides you with the option to customize the look of the button.
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.
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.
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.
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.
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.
Same functionality becomes available on the search result page & category page.
Search Result Page
In the following screenshot, you can see the customized ‘add to cart’ button.
As per the setting, the background & text colour of the button will change on hovering the cursor over it.
On successfully adding the product to the cart, the button text will change along with the checked icon.
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.
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.
To select the combination of the product, a quick view popup will open on clicking the ‘Add to cart button.
So, that was all about PrestaShop Display Add To Cart Button In Product List module.