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,
Hello,
you can close ticket.
Update: hello, I made it, but I don’t see any difference when it’s not hovered. Which I have to use when it is not hovered?
Best regards, Nikola
Hello,
Sorry to say, I do not fully understand what you actually want. Could you please elaborate on your concern more with some useful screenshots so that we can better understand and assist you accordingly with what you actually want?
Best Regards,
Hello,
I would like the color from the image to be lighter, i.e.:
Color: rgba(246,137,19,0.5)
Background: rgba(246,137,19,0.3)
However, it does not change after following your recommendations, or maybe I’m not editing it in the correct place?
Kind regards,
Nikola
Attachments:
You must be
logged in to view attached files.
Hello,
Please choose the “Hover full-width button” add to cart selector in the advanced button styles and change the color.
See Screenshot for better understanding: https://postimg.cc/VSPX9tk1
Best Regards,
Hi, I’ve set it up. The only thing I’m not happy with is that the numbers and the + / – symbols are dark and blend too much with the background. How can I make them darker so they stand out more? Also, on hover, only the cart changes color, but I wanted the entire button to do so. How can I achieve that?
Best regards,
Nikola
Credentials for previous answer here:
Hello,
You can adjust the style of the +/- buttons by navigating to:
Theme Settings > Styles and Colors > Forms
Here, you will find options to modify:
Form fields style – Adjust the appearance of input fields.
Form border width – Control the thickness of form borders.
Form text & background color – Change the color of the buttons and input fields.
https://ibb.co/nsW4Df4S
Best Regards,
.
