Editing Cart Dropdown

Hi @bkemal,

I followed the link and proceeded as per your instruction. Please check the following screenshots:

Link to image: https://d.pr/i/NnGgDq

Link to image: https://d.pr/i/mBKPyY

I’m not quite sure what changes you are looking for as you haven’t mentioned, which color should be used for the button, and how the styling of the cart page should look.

Please share us more information to point you in the right direction.

Could you also please share a copy of your site’s System Status to understand how your site is currently configured? You can find it via WooCommerce > Status.
Select “Get system report” and then “Copy for support”.? Once you’ve done that, paste it here in your response.

Thanks!

Hello,

sorry for the late reply and any confusion.

The elements which I am talking about are within the header menu when hovering over the cart (see image provided) https://ibb.co/HXQmvMf

As you can see within the image, the checkout dropdown buttons do not match the theme at all.

Apologies for any confusion,

thanks,
Burkay

Hi Burkay,

Thank you for the clarification, the screenshot was definitely helpful to understand your problem.

It looks like the button colors are coming from the elementor plugin. Here is a custom CSS that you can add in your WP-Admin > Appearance > Customize > Additional CSS to change the color of the buttons.

.wcmenucart-toggle-drop_down a.elementor-button.elementor-button--view-cart.elementor-size-md {
    background: #dd3333;
}
.wcmenucart-toggle-drop_down a.elementor-button.elementor-button--checkout.elementor-size-md {
    background: #dd3333;
}

Hello,

Thanks for the css works perfectly and just as I needed!!

Would it be possible if you could give me the CCS to ensure that it has a hover effect. Ideally I would like it to be white border and clear background, with white writing.

And when hovered over for the border to turn red and remain with the white writing.

Thank you for your help once again, it is greatly appreciated!

I’m glad the CSS worked for you. I’m not quite sure if I understand your requirement for the hover effect.

You mentioned you would like a white border and clear background with font-color white. Do you mean the cart icon with number of products in the cart area?

And when hovered over for the border to turn red and remain with the white writing.

Not sure which section.

In order to give you the best possible answer, it would be great if you can share screenshots or give us more information in detail to be able to assist you with the CSS

Hello,

So now that the button colour has changed. I would like it to replicate the other buttons on the page. At the moment the cart dropdown buttons in the header menu are currently set to red because of the CSS you have provided which is great.

But instead, can we have it so that it is changed to white border, white writing and clear background. And when hovered over for it to change to red border, white writing, and clear background.

So just to make it clearer, I need css code to ensure that the menu cart dropdown buttons change to similar styles which are on the website, instead of it being solid red. I need it to have a clear background, White border and white writing. And once the button is hovered over in the cart drop down menu, I need it to change to clear background, red border and white writing.

The images shows how I want the cart menu dropdown to be.

https://ibb.co/1M9tJmM
https://ibb.co/4F47g3j
https://ibb.co/ct6Hzsw

Thank you once again,
Burkay

Hi there,

Here is some custom CSS code for your dropdown cart menu, replace the previous CSS with following to create the cart buttons like below image:

Link to image: https://d.pr/i/VESO9Y

.wcmenucart-toggle-drop_down .current-shop-items-dropdown.owp-mini-cart.clr {
    background: transparent;
}
.wcmenucart-toggle-drop_down .elementor-menu-cart__products.woocommerce-mini-cart.cart.woocommerce-cart-form__contents {
    background: #fff;
}
.wcmenucart-toggle-drop_down .elementor-menu-cart__subtotal {
    background: #fff;
}
.wcmenucart-toggle-drop_down a.elementor-button.elementor-button--view-cart.elementor-size-md {
    background: transparent;
    border: 3px solid #fff;
    text-transform: uppercase;
    margin-bottom: -8px;
}
.wcmenucart-toggle-drop_down a.elementor-button.elementor-button--checkout.elementor-size-md {
    background: transparent;
    border: 3px solid #fff;
    text-transform: uppercase;
}

Hover effect, add the below code for button hover effect, make sure these codes are below the above codes:

Link to image: https://d.pr/i/XRXzTV

.wcmenucart-toggle-drop_down a.elementor-button.elementor-button--view-cart.elementor-size-md:hover {
    background: #2d2d2d;
    border: 3px solid #f21404;
}
.wcmenucart-toggle-drop_down a.elementor-button.elementor-button--checkout.elementor-size-md:hover {
    background: #2d2d2d;
    border: 3px solid #f21404;
}

I hope the code works for you.

• This reply was modified 4 years, 4 months ago by Tseten a11n.
• This reply was modified 4 years, 4 months ago by Tseten a11n.
• This reply was modified 4 years, 4 months ago by Tseten a11n.
• This reply was modified 4 years, 4 months ago by tobifjellner (Tor-Bjorn “Tobi” Fjellner).
• This reply was modified 4 years, 4 months ago by Tseten a11n.
• This reply was modified 4 years, 4 months ago by Jan Dembowski.

Hi @tibetanitech
A quick tip for you: You can mark a “code block” by putting three consecutive backticks at start and end. I just did it for you in your response above.

@tobifjellner thanks for approving my reply and for the tips. There are two different sets of codes. I’ll edit the reply again and hopefully, it will work ??

PERFECT!

Thank you so much for your help, I appreciate your time and commitment. Have helped out a lot, and solved the issue.

Hello again,

So on the desktop it works perfect and just how I want it. But I checked how it looked on mobile and tablet, and it looks like the original, which is not what I want.

Can you please provide the CSS to ensure that it replicates the desktop style for mobile and tablet.

Attached is an image of how it looks on mobile.

https://ibb.co/sgmmncm

Thanks,
Burkay

Here are the codes that you can use for your mobile cart design:

.oceanwp-cart-sidebar {
    background: #2d2d2d !important;
}
.oceanwp-cart-sidebar .elementor-menu-cart__footer-buttons a {
    background: #2D2D2D;
    border: 3px solid #fff;
    text-transform: uppercase;
}
#oceanwp-cart-sidebar-wrap .owp-cart-title {
    color: #fff;
}
.oceanwp-cart-sidebar .elementor-menu-cart__footer-buttons a:hover {
    background: #2D2D2D;
    border: 3px solid #f21404;
    text-transform: uppercase;
}
#oceanwp-cart-sidebar-wrap .divider {
    background-color: #f21404;
}

I hope that works.

• This reply was modified 4 years, 4 months ago by Tseten a11n.

Once again PERFECT!

Thank you for your assistance, this has solved the issue. Just how I wanted it. Great work!

Take care,
Burkay