Skip to content
Home » Prestashop » Prestashop 1.7 – Add the “Add to cart” button to the product lists

Prestashop 1.7 – Add the “Add to cart” button to the product lists

Very used button on versions 1.5 and 1.6 of PrestaShop, it has unfortunately disappeared with version 1.7 of PrestaShop. However, it is a very popular thing for merchants because it allows, inevitably, to add a product to the cart by making a lot less clicks than going through the product page.

Table of Contents

Update the TPL

The main change is in the themes> classic> templates> catalog> _partial> thumbnails> product.tpl file. I advise you to make your theme changes in a child theme, child to always enjoy Prestashop updates on your theme;)

Locate this line:

[pastacode lang=”markup” manual=”%7Bhook%20h%3D’displayProductPriceBlock’%20product%3D%24product%20type%3D’weight’%7D” message=”” highlight=”” provider=”manual”/]

And place the following code just below:

[pastacode lang=”markup” manual=”%3Cform%20action%3D%22%7B%24urls.pages.cart%7D%22%20method%3D%22post%22%20id%3D%22add-to-cart-or-refresh%22%3E%0A%20%20%20%20%3Cinput%20type%3D%22hidden%22%20name%3D%22token%22%20value%3D%22%7B%24static_token%7D%22%3E%0A%20%20%20%20%3Cinput%20type%3D%22hidden%22%20name%3D%22id_product%22%20value%3D%22%7B%24product.id%7D%22%20id%3D%22product_page_product_id%22%3E%0A%20%20%20%20%3Cinput%20type%3D%22hidden%22%20name%3D%22id_customization%22%20value%3D%22%7B%24product.id_customization%7D%22%20id%3D%22product_customization_id%22%3E%0A%0A%0A%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-primary%20add-to-cart%22%20data-button-action%3D%22add-to-cart%22%20type%3D%22submit%22%20%7Bif%20!%24product.add_to_cart_url%20%7C%7C%20%24product.quantity_wanted%3E%24product.quantity%7Ddisabled%7B%2Fif%7D%3E%0A%20%20%20%20%20%20%3Ci%20class%3D%22material-icons%20shopping-cart%22%3E%26%23xE547%3B%3C%2Fi%3E%0A%20%20%20%20%20%20%7Bl%20s%3D’Add%20to%20cart’%20d%3D’Shop.Theme.Actions’%7D%0A%20%20%20%20%3C%2Fbutton%3E%0A%3C%2Fform%3E” message=”” highlight=”” provider=”manual”/]

This code should be sufficient to display the “Add to cart” and a field to choose the desired quantity and should be sufficient to trigger the AJAX Call to add the product in your cart.

Update the CSS

For the style of the button and the quantity field, I leave you master of the thing and do what you want.

Be aware that if you want to change the formatting, if you do not know much about SCSS, NodeJS, etc., you can directly make your changes in the file: /themes/classic/assets/css/custom.css .

If you know about it and have the ability to easily compile your style, the file /themes/classic/_dev/css/components/products.scss should match what you want to change.

I hope this article will help you, I have a good search before finding what I needed, I think it can be used by others 🙂

Image : Tumisu / Pixabay

1 thought on “Prestashop 1.7 – Add the “Add to cart” button to the product lists”

  1. Hi there everyone, it’s my first visit at this web site,
    and article is really fruitful in favor of me,
    keep up posting these articles.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.