This topic has 14 replies, 3 voices, and was last updated 5 years, 6 months ago ago by Rose Tyler
Hi,
1. While hovering on a product on Home Page, there is a button appears, but the buttons are all different, some of them are “Add to cart” (https://prntscr.com/l5wjh3), some of them are “select option” (https://prntscr.com/l5wjuv) and some of them are “Read more” (https://prntscr.com/l5wjot).
May I ask how can I set them to the same button with same words and same function?
2. May I ask how can I change the shape of this “check out” button on the mini cart (right top) (https://prntscr.com/l5wkgy)?
Thank you
Hello,
1. “Add to cart” – on simple products that are in stock and can be purchased, “Select option” – on variable products, “Read more” – on products that are out of stock. Please read more in WooCommerce documentation.
These texts can be changed via translations (Loco translate > Plugins > WooCommerce).
2. Please try to use this custom css code:
.btn-checkout {
background-color: #41204d;
border-color: #41204d;
}
Regards
Hi,
For question 1, the product is not out of stock, why it appears “Read more”? (https://prntscr.com/l5wjot)
Hello,
Try to select default variation for variable product http://prntscr.com/l67ta1 then you will get “Add to cart”.
Regards
Hi,
I set it to white.
When I enter the product page, the default image is the white product (https://prnt.sc/l6878y). But I want the default image to be the image with the model (http://prntscr.com/l68ejm), is it possible?
Hello,
Please provide us with URL and temporary wp-admin access.
Regards
U
Hello,
All depends on your settings for the product http://prntscr.com/l6l10a Functionality of variable products comes from WooCommerce. If you select default variation, then you will get on variable product add to cart button and the first image of variation. If you want to change this, contact WC support. Such default functionality can be changed via additional customization only (additional customization is not included in our basic support, unfortunately).
Regards
But you said the “Read more” only occurs when there is out of stock right? How come I did not set it to “out of stock” but the “Read more” label still occurs?
Please provide me screenshot and URL of product with the problem.
Thanks in advance.
Regards
Hi,
I think it is ok now some how.
May I go back to question 2 please?
“2. May I ask how can I change the shape of this “check out” button on the mini cart (right top) (https://prntscr.com/l5wkgy)?”
The short code you provided changed the color of the button but not the shape.
Hello,
If you want to add the border-radius for the checkout button then replace that code by the following:
.btn-checkout {
background-color: #41204d;
border-color: #41204d;
border-radius: 20px;
}
Regards
Thank you
You’re welcome!
Regards
The issue related to '‘Hovering the products on Home Page’' has been successfully resolved, and the topic is now closed for further responses