Hi, In my website I have currently set the Fly Cart Bubble to Top Right. But I want to move it a bit more to the right place where I want. How can I do that?
I am also looking to style it in a way which is closer to the other button on the website. I am majorly looking to adjust the size of the button, and the box shadow during the default state and in the hover state. How can I achieve that?
It needs the knowledge about CSS code. Each element on Fly Cart has a different selector, which you can use to write CSS code. For example, the Checkout button here:
You can write CSS code:
.woofc-action-checkout {
background-color: green !important;
border-color: green !important;
color: #fff !important;
}
That helped. I am also looking to reduce the size of the bubble uniformly. Is there a particular target that will target both the count and the button parts? Or do I need to handle them separately?
Hi, In my website I have currently set the Fly Cart Bubble to Top Right. But I want to move it a bit more to the right place where I want. How can I do that?
Hi Sourav,
Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:
You can change 100px to another number as you want.
Best regards,
Dustin
Thank you Dustin,
I am also looking to style it in a way which is closer to the other button on the website. I am majorly looking to adjust the size of the button, and the box shadow during the default state and in the hover state. How can I achieve that?
Best,
Sourav
It needs the knowledge about CSS code. Each element on Fly Cart has a different selector, which you can use to write CSS code. For example, the Checkout button here:
You can write CSS code:
And the result:
Best regards,
Dustin
Thank you, Dustin,
That helped. I am also looking to reduce the size of the bubble uniformly. Is there a particular target that will target both the count and the button parts? Or do I need to handle them separately?
Best,
Sourav
For the bubble, please use the CSS structure below:
Best regards,
Dustin