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.
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:
And place the following code just below:
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