The default Prestashop theme displays inactive ‘add to cart’ button for the product-list.tpl template, however, does not display this button on the product page. In order to display this inactive button for ‘out of stock’ products you need to find the element with the class “box-cart-bottom”:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="box-cart-bottom"> <div{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || (isset($restricted_country_mode) && $restricted_country_mode) || $PS_CATALOG_MODE} class="unvisible"{/if}> <p id="add_to_cart" class="buttons_bottom_block no-print"> <button type="submit" name="Submit" class="exclusive"> <span>{if $content_only && (isset($product->customization_required) && $product->customization_required)}{l s='Customize'}{else}{l s='Add to cart'}{/if}</span> </button> </p> </div> {if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if}<strong></strong> </div> <!-- end box-cart-bottom --> |
And replace it with the following code:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="box-cart-bottom"> <div{if (isset($restricted_country_mode) && $restricted_country_mode) || $PS_CATALOG_MODE} class="unvisible"{/if}> <p id="add_to_cart" class="buttons_bottom_block no-print"> <button type="submit" name="Submit" class="exclusive{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order} disabled{/if}" {if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order} disabled="disabled"{/if}> <span>{l s='Add to cart'}</span> </button> </p> </div> {if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if}<strong></strong> </div> <!-- end box-cart-bottom --> |
i.e. you need to add the class ‘disabled’ and the property ‘disabled= “disabled” to the button.
To make the button look inactive the following CSS is used in the default theme: .box-info-product .exclusive.disabled {opacity: 0.3;}
In addition, we have to write styles for: .box-info-product .exclusive.disabled:hover, .box-info-product .exclusive.disabled:before
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.box-info-product .exclusive, .box-info-product .exclusive.disabled:hover { padding: 0; border-top: 1px solid #488300; border-right: 1px solid #488300; border-left: 1px solid #488300; border-bottom: 1px solid #488300; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; position: relative; display: block; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #79db00), color-stop(100%, #488300)); background-image: -webkit-linear-gradient(#79db00, #488300); background-image: -moz-linear-gradient(#79db00, #488300); background-image: -o-linear-gradient(#79db00, #488300); background-image: linear-gradient(#79db00, #488300); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79db00', endColorstr='#488300',GradientType=0 ); } .box-info-product .exclusive:before, .box-info-product .exclusive.disabled:before { font-family: "FontAwesome"; position: absolute; top: 0; left: 0; bottom: 0; color: white; font-size: 25px; line-height: 47px; text-shadow: 0 1px #567931; content: "\f07a"; z-index: 2; width: 51px; text-align: center; border: 1px solid #488300; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -ms-border-radius: 5px 0 0 5px; -o-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; animation: none; -webkit-animation: none; -moz-animation: none;} .box-info-product .exclusive.disabled { opacity: 0.3;} |
The final result looks like this:
PrestaShop Development
Take your online store to the next level with BelVG PrestaShop Development
Visit the page
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
Hi, Johan! Thanks for your question.
If you do not want to make changes to the code, it is better to enable out-of-stock purchase in the admin panel.
You can also download the Preorder module by BelVG and customize product-list page to display Add to cart button.
How to displaying Inactive “Add to Cart” Button for Out of Stock Products in productlist?
Prestashop 1.7.4.2
Hi, Andrew! Thanks for your question.
Unfortunately, we need to know more details in order to be able to help you. Please, turn to our support at [email protected], and our team will do their best to resolve your issue.
The method you described works when the product doesn’t have combinations. Could you describe how to work with the items that have combinations? Thanks in advance!
Really appreciate your work, But I want to search how to remove showing quantity of any product, As I’ve put quantity for one of my Site Product, As you can see 100X tag in related products.
Actually, After installation of a modules, Quantity tab has been disabled, Now I want to remove quantity tag, How will be possible?
KJ,
Well, until the customer do not buy the product, but only add it to the shopping cart, it is not reasonable.
Vilas,
You can contact our support team at [email protected] and ask them for help.
f288,
I think you need to add a condition to determine when the products are out of stock and find a suitable icon on the site fontawesome.
I was hoping that when I add an item to the cart and the item only has 1 in stock, I would see this. Is it possible to disable the button when you add an item to the cart and the item ONLY has 1 in stock?
I am using PS 1.5.4.1. There is no such fields in product-list.tpl
Will be great if you suggest more on it.
Hi,
I’m following your guide for showing the disable button on pages of oos products.
I’m doing it on PS1.6.0.9 and all it’s working well but there’s only a little problem, the disabled button instead of having the cart favicon has the loading favicon that turn clockwise (like when you click on the button for adding a product to the cart).
Trying to fix this i added this to my css:
.box-info-product .exclusive.disabled:before {
content: “\f07a” !important;
In this way i forced the cart icon, but now I have a cart icon that turn clockwise… Any idea on how to fix this?