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 des matières

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:

{hook h='displayProductPriceBlock' product=$product type='weight'}

And place the following code just below:

<form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
    <input type="hidden" name="token" value="{$static_token}">
    <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
    <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">


    <button class="btn btn-primary add-to-cart" data-button-action="add-to-cart" type="submit" {if !$product.add_to_cart_url || $product.quantity_wanted>$product.quantity}disabled{/if}>
      <i class="material-icons shopping-cart"></i>
      {l s='Add to cart' d='Shop.Theme.Actions'}
    </button>
</form>

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

2 thoughts 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.

  2. Thank you for writing this awesome article. I’m a long
    time reader but I’ve never been compelled to leave a comment.
    I subscribed to your blog and shared this on my Twitter.
    Thanks again for a great article!

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.