Unavailable and variable products

Hi,
Any help on this?
Thanks a lot!

Hi Ismael,

Thanks for your reply.

1) In private the link to the page of a product that is out of stock, exactly! I finally changed my mind and the design of it is ok for me, I’m sorry.
I added some CSS to define “Out of stock” text color to red, but if the product is “Available on backorder”, the text is red too but I would need it to be orange. I also would need to hide the product counter and the “Add to cart” button, when product is “Available on backorder”.
How could I do this?
Moreover, I would need to modify “Read more” (on catalogue pages when product is out of stock), “Out of stock” and “Available on backorder” (both on product pages) texts.
What do I need to add to achieve this?

2) For my shop, attributes are always different. So I applied them directly in the Edit Product page of each product, this is maybe the reason why there is no attribute on the Attributes page. Is it a problem if I proceed like this???
In private the link to an actual variable product page and an exact mockup of what I would need to achieve. In fact the same design as a simple product page, only with the option selector between price and “Add to cart” button.
If it could help, I already added some CSS to adjust product counter and “Add to cart” button on simple products:

.single-product-summary form.cart {padding-top: 14px !important;}
#top div.single-product-summary .quantity input.plus, #top div.single-product-summary .quantity input.minus,#top div.single-product-summary .quantity input.qty {
	line-height: 10px !important;
	width: 33px !important;
	height: 33px !important;
	margin-bottom: -10px !important;
}
#top div.single-product-summary button[name=add-to-cart] {padding: 10.4px !important;}
div.single-product-summary form.cart div.quantity {min-width: 50px !important;}

Maybe it would only need to add a tiny piece of code to apply it to all pages of all types of products…

Thanks a lot!!

Hi Mike,

Thanks for your reply.

1) Your code works great! Thanks a lot!
Now how could I hide the product counter and the “Add to cart” button when product is “Available on backorder”?
And how could I modify “Read more” (on catalogue pages when product is out of stock), “Out of stock” and “Available on backorder” (both on product pages) texts?

2) Also, could you please help me with the second part of my previous message?

Thanks a lot!

Hi Mike,

1) Your code works perfectly. Thanks a lot!
Now how could I modify “Read more” (on catalogue pages when product is out of stock), “Out of stock” and “Available on backorder” (both on product pages) texts?

2) On the other hand, I would like to adjust design of my variable products pages.
In private the link to an actual variable product page and an exact mockup of what I would need to achieve. In fact the same design as a simple product page, only with the option selector between price and “Add to cart” button.
What do I need to achieve this?

Thanks a lot!

Hi Mike,

Thanks for your reply.

1) I added the function for out of stock products that you mentioned in your last message.
It works great but it only would need some CSS adjustments: on shop page, I would like to hide the small line and center the remaining button (see mockup: https://imgur.com/5d06zfv).
The other texts I need to modify are on the product page itself (see screenshots: https://imgur.com/DzEwkGw and https://imgur.com/h8MrJ4u).
Which functions do I need to add to modify those texts?

2) There were more differences between my actual page and the mockup, but I added some code to yours and I’m now really close to achieve what I want to.
Here is now my page for variable products: https://imgur.com/CJcykYW.
The last thing I need to do is making the “Add to cart” button size the same as on a single product page: https://imgur.com/cH9tOfo.
For information, I already added some CSS to modify product counter and “Add to cart” button on single product pages.
Maybe adding one tiny piece of code to this one could be enough to apply it to variable products pages too…

.single-product-summary form.cart {padding-top: 14px !important;}
#top div.single-product-summary .quantity input.plus, #top div.single-product-summary .quantity input.minus,#top div.single-product-summary .quantity input.qty {
	line-height: 10px !important;
	width: 33px !important;
	height: 33px !important;
	margin-bottom: -10px !important;
}
#top div.single-product-summary button[name=add-to-cart] {padding: 10.4px !important;}
div.single-product-summary form.cart div.quantity {min-width: 50px !important;}

Thanks a lot!

Hi Mike,

Both solutions works like a charm.
Thanks a lot!

Could you please help me on the second part:
2) There were more differences between my actual page and the mockup, but I added some code to yours and I’m now really close to achieve what I want to.
Here is now my page for variable products: https://imgur.com/CJcykYW.
The last thing I need to do is making the “Add to cart” button size the same as on a single product page: https://imgur.com/cH9tOfo.
For information, I already added some CSS to modify product counter and “Add to cart” button on single product pages.
Maybe adding one tiny piece of code to this one could be enough to apply it to variable products pages too…

.single-product-summary form.cart {padding-top: 14px !important;}
#top div.single-product-summary .quantity input.plus, #top div.single-product-summary .quantity input.minus,#top div.single-product-summary .quantity input.qty {
	line-height: 10px !important;
	width: 33px !important;
	height: 33px !important;
	margin-bottom: -10px !important;
}
#top div.single-product-summary button[name=add-to-cart] {padding: 10.4px !important;}
div.single-product-summary form.cart div.quantity {min-width: 50px !important;}

Thanks a lot!

Hi Mike,

I’m sorry I don’t know what happened..
Everything seems to be ok now.
Could you please try again?

Thanks!

Hi Mike,

I’m really sorry!
I worked on my website all the day and I didn’t notice any problem.
So I don’t know what happen and I absolutely don’t know what to do to solve this :-(

I only tried to create a new user.
You can find new credentials in private content.
Could you please try to access my website with them?
If it still doesn’t work, I have no idea of what else to do, so I’ll have to wait some days and I will come back to you later to try the access.

Let me know.
Thanks a lot and sorry again.

Best regards