Add to cart button when no stock

Start
Prev
1
Next
End

ismael
Topic Author
Offline

Posts: 54
Thank you received: 7

2 years 9 months ago #340396

Hi,

Whenever a product is out of stock, the add to cart button gets removed.
But since my add to cart button has a position of relative, some parts of my product page break.
Is it possible to always keep the add to cart button, but whenever a product is out of stock, instead of removing it it becomes unclickable?
Or any other solution will do.

This message contains confidential information

Thanks in advance,

Ismael

Please Log in or Create an account to join the conversation.

Philip
Offline

Posts: 4764
Thank you received: 647
MODERATOR

2 years 9 months ago #340397

Hello,

We can suggest to use some css to "simulate" a shutdown button, as shown on my screenshot :

"Click to better see screenshot details"

Note : In order to learn how to add custom css command, have a look on this documentation .

Now for your display issue, a little like already said on another topic, your frontend is is very largely customized, by custom css commands, overrides coming from your template, and more, and your display problems seem to come directly from these customization, now which one will be complicated.
Hope this will help you to achieved what you need.

Regards

Last edit: 2 years 9 months ago by Philip.

The following user(s) said Thank You: ismael

Please Log in or Create an account to join the conversation.

ismael
Topic Author
Offline

Posts: 54
Thank you received: 7

2 years 8 months ago #340582

Hi,

I added the button but now i have another issue.
When product is not in stock its working fine.
My code:
div#hikashop_product_right_part div#hikashop_product_quantity_main.hikashop_product_quantity_main:after {
content: 'Aan Winkelwagen Toevoegen';
display: inline-block;
border: 1px solid #eee;
width: 225px;
color: white;
background-color: #185EA7!important;
height: 35px;
padding-top: 7px;
padding-left: 13px;
border-radius: 3px;
opacity: 70%;
margin-bottom: 40px;
left: 16px;
position: relative;
}

Whenever the product is in stock it now shows 2 buttons.
Screenshot in attachments.