Editing Cart Dropdown

Resolved 1337x
(@1337x)

3 years, 8 months ago
Hello,

I am in the middle of designing a website, however, after continuously playing around with the ‘customizer’ settings, I am unable to change the colour of buttons and the styling of the dropdown cart. I’ve tried tinkering with almost every setting possible and I just can’t seem to win.

Either I am messing with the wrong settings within the ‘customizer’ options or there is some sort of conflict occurring which is interfering with this layout.

To reproduce this issue, simply visit the link, add any product and then hover over the shopping cart.

The Issue:
When you add an item to the cart and hover over the cart icon, you see this:
Image 1

What I Would Like To Happen Instead:
- I would like the ‘View Cart’ and ‘Checkout’ button to be #f2295b colour
- The buttons should be centralized & next to each other with proper spacing instead of displaying like this.
- On the image, #2 and #3 don’t need to be displayed. I would like to hide/remove it from being shown (if possible)
- I would also like the displayed thumbnail to be smaller. I’m not even sure why it’s that big or how to change it. A sort of 2 grid layout would’ve been better where the thumbnail is on the left and the text is on the right but I’m not sure if that can be achieved. This large thumbnail looks to be the reason why there’s almost no spacing on the sides. If you look at the actual /cart page, the thumbnail size is more appropriate but in this dropdown, it is ridiculously large.
The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Saif
(@babylon1999)

3 years, 8 months ago
Hello @1337x,

If your changes in the customizer are not working, then you might have a theme or plugin conflict.

You can check this guide to determine if that’s the case.

Also, major theme changes are considered custom development which is not within our scope of support.

That said, I didn’t want to end my reply without providing any help so I wrote some CSS code below to centre the buttons and change them to the colour you want.
```
/* Center View Cart and Checkout  */

.elementor-menu-cart__footer-buttons{
    -webkit-box-align: center;
    -webkit-box-pack: center;
     display: -webkit-box;
}

/* Make the View Cart and Checkout red */

.elementor-button, .elementor-button--view-cart, .elementor-size-md{
    background-color: #f2295b;
}
```
On the image, #2 and #3 don’t need to be displayed. I would like to hide/remove it from being shown (if possible)

There are no images attached, if you can resend a highlight screenshot of this perhaps we can help you hide them as well. 🙂

Please note that it’s better if you solve the problem from its root by checking if there’s a conflict and reaching out to the theme developer as well.

Cheers!
Thread Starter 1337x
(@1337x)

3 years, 8 months ago

Thanks @babylon1999 for the assistance. You are right, it does seem to be a problem with the theme. I use Astra Pro and the theme is responsible for the mini cart in the header when you use Astra’s header options. I have found that this used their own implementation of the Elementor Cart widget in the header however, it didn’t allow me to do any customizations on it besides a few basic tweaks. I ended up making my own header using Elementor Pro which allowed me to edit it to my liking and this seems to have done the trick and resolved my issue.

Margaret S. woo-hc
(@margaretwporg)

3 years, 8 months ago

Hi @1337x

Good to know it is now resolved!

If you found our support helpful, we’d love if you could leave us a review:
https://ww.wp.xz.cn/support/plugin/woocommerce/reviews/

Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Editing Cart Dropdown’ is closed to new replies.

Tags