How to style/edit buttons in mini-cart

Support
#1

Hey there,

I’m using Pro theme and WooCommerce, and I’m currently working on a new header that includes a Cart Dropdown element. I went through all the options in the Header Builder, but I can’t seem to find a way to style or edit the buttons within the cart dropdown (there are two buttons - “View Cart” and “Checkout” - screenshot here: https://i.imgur.com/CMQ3mZC.png)

Can you guys tell me how to target these? More specifically, here’s what I’m trying to do:

  1. Customize the look of the buttons.
  2. Maybe remove the “View Cart” button altogether and just have the “Checkout” button take up the entire space.

Thanks!

#2

Hi,

To customize it, you can add the code below in Header > CSS

.x-masthead .x-dropdown .buttons .x-anchor {
    display:none;
}

.x-masthead .x-dropdown .buttons .checkout.x-anchor {
   display:block !important;
   width:100%;
}

For the colors and font size, you can change it under Cart Buttons > Design

Thanks

#3

Awesome, thanks! I swear I tried those options in the Header Builder before and they didn’t work, but everything seems to be fine now.

I have one more question for you: right now, the Cart Dropdown appears when the menu item “Cart” is clicked. Can you show me how to make it appear on hover instead?

Thanks!

#4

Hi There,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may try contacting a developer for this kind of customizations.

Thanks for understanding.

#5

Hello @pukupals,

As my colleague replied that feature to toggle in between hover and click event for cart item is not available in Pro and further customization falls outside the scope of support we offer. However I think it’s a handy feature and I am taking this as a feature request and will add the same in our issue tracker. For now if you would like to achieve that yourself, please take a look at following thread on Stackoverflow:

https://stackoverflow.com/questions/40550989/remove-click-event-for-wordpress-menu-item-with-child

Thanks.

#6

Awesome, thanks for the additional information and adding as a feature request! Would certainly be a nice little option in the Header Builder!

#7

You’re most welcome.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.