Topic: Unable to customise mini cart

[email protected]
May 1, 2025 at 4:07 am

Hi GP, I’m hoping you can help. I recently purchased your premium theme plugin and am testing it on our staging site, but for some reason, I am struggling to customise the mini cart.

Most likely, it is me doing something wrong but maybe you can shed some light on the issue for me.

I would like the mini cart to be next to the primary navigation menu, with c2d44e box around it. The icon and text need to be white and the font size needs be the same as the rest of the menu. However every time I try to change the colours in the customise, nothing happens.

Please, can you have a look and point me in the right direction? I have added the url to the private information box
[email protected]
May 1, 2025 at 4:21 am

Just a quick update, I have switched the site to flexbox instead of float, and this appears to have helped. is there a way of drawing a box around it so that it looks the same as the menu items?

Ying

May 1, 2025 at 8:54 am

Hi there,

Try adding this CSS:

span.menu-bar-item.wc-menu-item a.cart-contents {
    line-height: 40px;
    border: 1px solid #c2d44e;
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
    align-items: center;
    width: 38px;
    height: 40px;
    padding: 0;
}
a.cart-contents.shopping-cart:hover {
    background-color: #c2d44e;
    color: #333;
    padding: 0;
}

[email protected]
May 2, 2025 at 12:13 am

Thank you for looking at this, I think you’re on the right track, the alignment is out though
https://ibb.co/j9xNcc3L
[email protected]
May 2, 2025 at 12:17 am

I’ve increased the width to 100px and the margin-bottom to 5px and that seems to have done the trick

Ying

May 2, 2025 at 8:20 am

Try use this updated CSS:

span.menu-bar-item.wc-menu-item a.cart-contents {
    line-height: 40px;
    border: 1px solid #c2d44e;
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
    align-items: center;
    min-width: 38px;
    height: 40px;
    padding-block: 0;
    width: auto;
    padding-inline: 10px;
}

}
a.cart-contents.shopping-cart:hover {
    background-color: #c2d44e;
    color: #333;
    padding: 0;
}

[email protected]
May 6, 2025 at 12:46 am

Thank you Ying that works really well. I need a bit more space between the cart icon/price and the green border, so that it looks more like the other menu items
Ying
May 6, 2025 at 8:48 am

Updated the CSS 🙂
[email protected]
May 6, 2025 at 11:28 pm

Perfect, thank you!
Ying
May 7, 2025 at 8:02 am

No Problem 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Unable to customise mini cart