No add to cart button in category product list?

[TVBZ]

Hello,

Still new to PrestaShop so bear with me please.

In my first PS installation, I am looking for the option to have an add to cart button directly from product list (category).
It's probably the most basic function of any e-commerce, so I guess it has to be there somewhere.

In shop parameters > product settings, I have enabled to display "add to cart" button when product has attributes.

Still, even when products don't have attributes, I don't have a add to cart button in my list:

 

 

Anyone can tell me how to enable it? 
I have checked all settings 3 times, still didn't find it. 
Surely it must excist somewhere?

 

(working in PrestaShop 1.7.6.5)

[Razi]

In Prestashop 1.7 there is no setting for enable Add to cart button on listing page.

For this you need to buy module or need to make changes in file.

Thanks

[Guest]

Free module:

https://hipresta.com/free-prestashop-modules/9-display-add-to-cart-button-in-product-list-pages-module.html

[TVBZ]

9 hours ago, Razi said:

In Prestashop 1.7 there is no setting for enable Add to cart button on listing page.

For this you need to buy module or need to make changes in file.

Thanks

Huh.. Now I am amazed, an e-commerce platform with no add to cart button in product list. It's hilarious 🤣

Thanks for the insight

[TVBZ]

6 hours ago, Guest said:

Free module:

https://hipresta.com/free-prestashop-modules/9-display-add-to-cart-button-in-product-list-pages-module.html

Thanks for the tip. I made a child theme from classic theme and will figure out how to add in manually in the code. The less modules, the better. ;)

[Guest]

It's nothing complicated.
The code is simple and does not need any extra knowledge.

[TVBZ]

I will post my solution here, in case someone needs it, and for myself for later reference:

Inside my (child)theme I added a small chunk of code in this file:
/templates/catalog/_partials/miniatures/product.tpl

There we have the block: 

{block name='product_price_and_shipping'}

In the end of that block, just before "</div>{/if}{/block}" I added this code:

<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">
          <button class="btn btn-primary add-to-cart {if $product.quantity < 1}out-of-stock{/if}" data-button-action="add-to-cart" type="submit">
                  <i class="material-icons shopping-cart"></i>
                  {l s='Add to cart' d='Shop.Theme.Actions'}
           </button>
 </form>

 

And voila.. A working add to cart button!
It adds the product to the cart and triggers the added to cart popup.

If I notice any shortcomings in this code, I will come back to change it. 


NOTE: add-to-cart button has "out-of-stock" class when product stock < 1. This can be used for some custom styling (think opacity, cursor, ...)

Edited July 5, 2020 by TVBZ
added class for optional styling when product is out of stock (see edit history)

[Ray UK]

@TVBZ, does this "out of stock" also check for any optinos n the product?

ie, if the product has different colour options will it just check the default one for stock or check if any are available.

Thanks

[Alexander Firsov]

On 7/2/2020 at 7:35 PM, TVBZ said:

I will post my solution here, in case someone needs it, and for myself for later reference:

Inside my (child)theme I added a small chunk of code in this file:
/templates/catalog/_partials/miniatures/product.tpl

There we have the block: 

{block name='product_price_and_shipping'}

In the end of that block, just before "</div>{/if}{/block}" I added this code:

<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">
          <button class="btn btn-primary add-to-cart {if $product.quantity < 1}out-of-stock{/if}" data-button-action="add-to-cart" type="submit">
                  <i class="material-icons shopping-cart"></i>
                  {l s='Add to cart' d='Shop.Theme.Actions'}
           </button>
 </form>

 

And voila.. A working add to cart button!
It adds the product to the cart and triggers the added to cart popup.

If I notice any shortcomings in this code, I will come back to change it. 


NOTE: add-to-cart button has "out-of-stock" class when product stock < 1. This can be used for some custom styling (think opacity, cursor, ...)

Thank you very much, it is working like a charm!

I have improved it a little bit 

<div style="text-align: center; margin: 3px;">
    	<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">
          <button class="btn btn-primary add-to-cart {if $product.quantity < 1}out-of-stock{/if}" data-button-action="add-to-cart" type="submit">
                   <i class="material-icons shopping-cart">shopping_cart</i>
                   {l s='Add to cart' d='Shop.Theme.Actions'}
          </button>
  		</form>
</div>

and placed this code just after 

{block name='product_reviews'}
   {hook h='displayProductListReviews' product=$product}
{/block}

 

[dichkovsky]

On 12/29/2020 at 2:31 PM, MerseyRay said:

@TVBZ, does this "out of stock" also check for any optinos n the product?

ie, if the product has different colour options will it just check the default one for stock or check if any are available.

Thanks

Hi! Same question: how to account for product options/variations?

[Paulo Gois]

On 7/2/2020 at 1:35 PM, TVBZ said:

I will post my solution here, in case someone needs it, and for myself for later reference:

Inside my (child)theme I added a small chunk of code in this file:
/templates/catalog/_partials/miniatures/product.tpl

There we have the block: 

{block name='product_price_and_shipping'}

In the end of that block, just before "</div>{/if}{/block}" I added this code:

<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">
          <button class="btn btn-primary add-to-cart {if $product.quantity < 1}out-of-stock{/if}" data-button-action="add-to-cart" type="submit">
                  <i class="material-icons shopping-cart"></i>
                  {l s='Add to cart' d='Shop.Theme.Actions'}
           </button>
 </form>

 

And voila.. A working add to cart button!
It adds the product to the cart and triggers the added to cart popup.

If I notice any shortcomings in this code, I will come back to change it. 


NOTE: add-to-cart button has "out-of-stock" class when product stock < 1. This can be used for some custom styling (think opacity, cursor, ...)

Worked!

 

i place the code after:

Quote

 

{block name='product_buy'}

                {if !$configuration.is_catalog}

                    <div class="product-actions">

 

in order to have a cart icon next to quickview, but when i click and ask to keep shopping in changes the browser URL and stop working.
ANyway i can place it there like this?

[antonio]

Il 02/09/2021 alle 17:59, Alexander Firsov dice:

Grazie mille, funziona come un incantesimo!

L'ho migliorato un po' 

e ho inserito questo codice subito dopo 

 

avete visto che i prodotti si sovrappongono dopo avere implementato le modifiche? o succede solo a me?

[Paulo Gois]

57 minutes ago, antonio said:

avete visto che i prodotti si sovrappongono dopo avere implementato le modifiche? o succede solo a me?

i didn't have that problem.
Was that the only change you made?

[antonio]

si

 

[antonio]

On 1/7/2020 at 10:20 AM, Ospite dice:

Modulo gratuito:

https://hipresta.com/free-prestashop-modules/9-display-add-to-cart-button-in-product-list-pages-module.html

L'ho installato e mi ha modificato tutte le impostazioni di layout dei prodotti, anche dopo averlo disinstallato é rimasto modificato e ora mi ritrovo tutte le immagini dei prodotti attaccate tra di loro e mentre prima visualizzavo 2 prodotti in linea nella versione mobile ora me li mostra incolonnati. 

[antonio]

On 9/2/2021 at 5:59 PM, Alexander Firsov dice:

Grazie mille, funziona come un incantesimo!

L'ho migliorato un po' 

e ho inserito questo codice subito dopo 

 

scusate ma in questo modo quando ci sono delle combinazioni apre le il prodotto per personalizzare?

[koca]

On 09.02.2021 at 19:59, Alexander Firsov said:

Çok teşekkür ederim, harika çalışıyor!

Biraz geliştirdim 

ve bu kodu hemen sonra yerleştirdim 

 

I am using version 8. It worked very well. Can we add a quantity addition box next to it?

[koca]

Can we make it look like this?