Learn how to hide the Add to cart button on PrestaShop 1.7

Following a question posted on the official PrestaShop forum, I tested the deactivation of the sale for a product. This simply happens on the configuration page of a product in the Options tab where you just have to uncheck the Available for sale function.

And then I was surprised by PrestaShop's reaction in FrontOffice. The add to cart button is still present and simply deactivated without any further details.

It seems obvious to me that two possibilities are available to us, either we decide to make the add to cart button completely disappear, or we decide to replace it with a simple explanatory text, but allowing us to clearly inform the visitor of the page of the situation concerning this product.

Hide the Add to Cart button

Here, I will explain how to modify your template so that the add to cart button no longer appears on the product sheet or preview.

Product sheet

To remove the add to cart button on the product sheet, you need to open the product.tpl file in the /themes/your_theme/templates/catalog/ directory using your usual FTP software.

Go to line 127 which must contain the following code

{block name='product_add_to_cart' }
    {include file='catalog/_partials/product-add-to-cart.tpl'}
{/block}

To make the button and the quantity choice box disappear, you just have to include this code with a conditional test on the unchecked variable.

Your final code then becomes this

{if $product.add_to_cart_url}
    {block name='product_add_to_cart' }
        {include file='catalog/_partials/product-add-to-cart.tpl'}
    {/block}
{/if}

And here you are, you empty the cache and you will have removed the button to add to the basket on all the products on which you have unchecked the Available for sale option.

Quickview

To remove the add to basket button on the product preview proposed on the category pages, you must edit the quickview.tpl file in the /themes/your_theme/templates/catalog/_partials/ folder.

Go to line 62 which must contain the following code

{block name='product_add_to_cart' }
    {include file='catalog/_partials/product-add-to-cart.tpl'}
{/block}

Same punishment as before, we include this code from the same test.

{if $product.add_to_cart_url}
    {block name='product_add_to_cart' }
        {include file='catalog/_partials/product-add-to-cart.tpl'}
    {/block}
{/if}

Display an information message

We can imagine several possibilities, but I will not go into all of them. My preference is to replace the button and the quantity.

To do this, we simply go back to the two files previously modified to add a simple condition to our test.

Thus, we tested the variable that allows to deactivate the sale of the product, if this variable is checked, then we display the button, otherwise we will display a message, which you can format at will but the simplest is still to use the design elements already present in the basic template of PrestaShop and which must certainly find a correspondence in your personalized template if you have taken the decision to install one.

Product sheet

We will therefore obtain the following code on the product.tpl file

{if $product.add_to_cart_url}
    {block name='product_add_to_cart' }
        {include file='catalog/_partials/product-add-to-cart.tpl'}
    {/block}
{else}
    <div class="btn btn btn-block btn-secondary">
        {l s='This product is currently not available for sale!' d='Shop.Theme.Catalog'}
    </div>
{/if}

Quickview

We will therefore obtain the following code on the quickview.tpl file

{if $product.add_to_cart_url}
    {block name='product_add_to_cart' }
        {include file='catalog/_partials/product-add-to-cart.tpl'}
    {/block}
{else}
    <div class="btn btn btn-block btn-secondary">
        {l s='This product is currently not available for sale!' d='Shop.Theme.Catalog'}
    </div>
{/if}

Conclusion

Now you have the basics to adapt the code to your sauce and find the best solution for your shop.

I hope that this little article has helped you to understand how this version 1.7 of PrestaShop works.