Assistance with Mobile Cart Bar Layout
-
Hello,
I would like to ask for your guidance on the following issues regarding the mobile version of my site:
1. How can I move the orange cart bar lower, so that it does not cover the product?
2. How can I make the same cart bar stretch from edge to edge of the product image, instead of stopping before the end?
I am attaching photo.
Thank you in advance for your help.
Best regards,
Nikola
Attachments:
You must be
logged in to view attached files.
Hello,
Unfortunately, it is not possible to move this button in this style. Please navigate to Theme Settings > Product Archive > Product styles on hover > Change the hover style.
https://postimg.cc/K3MZw1Pn
Best Regards,
Hello,
thank you. I chose but, please tell me how can I make this hover cart on picture to be there always, not only on hover. Look image.
Best regards, Nikola
Attachments:
You must be
logged in to view attached files.
Hello,
Please add below Custom CSS code to Theme Settings > Custom CSS:
/* Always show icon */
.wd-add-btn-replace .add-to-cart-loop:before {
transform: translateY(0) !important; /* move icon into view */
opacity: 1 !important; /* make it visible */
transition: none !important; /* remove hover animation */
}
/* Hide the text */
.wd-add-btn-replace .add-to-cart-loop span {
transform: translateY(-100%) !important; /* hide text */
opacity: 0 !important;
transition: none !important;
}
Best Regards,
Hello,
perfect! I would like to add transparency to the entire orange bar because the color becomes very harsh and saturated. How can I do that?
That is lastly here.
Best regards, Nikola
Hello,
Navigate to Theme Settings > Styles and Colors > Buttons > In the Advanced button styles section, you can select the Add to Cart button in the dropdown and change the colors. https://ibb.co/zTRdCkcs
Please follow this guide: https://xtemos.com/docs-topic/advanced-button-styles/
Best Regards,
.
