Add Mouse over Cart dropdown to Uber Menu Pro / integrity

[fantasy_5]

Hi,

I am trying to add a shopping cart mouse over card view where there is a view cart button and checkout button visible when the shopping cart has items in it and you moude over the cart icon on the uber menu. I followed some steps in this link, but I am stuck and not sure what to do next. Can you please assist me. Here is the link to the instructions I was following. I can’t seem to get past number 4 after the widget is added. I do not see the additional instructions in the settings. Now I am seeing this message above the menu.

[fantasy_5]

Here is the link with instructions

https://sevenspark.com/docs/ubermenu-3/woocommerce/cart-mega-menu

Here is a link to a post I also found here. I’m not certain whether or not it’s something that is needed. I found it through a topic here https://stackoverflow.com/questions/61725547/open-popup-on-click-add-to-cart-woocommerce

[fantasy_5]

Hi,

After some rereading and testing I was able to figure it out. Is it possible to assist me with a little styling? I want to change the view cart and checkout button colors to black with white text. I would also like to change the mini cart border color to a darker gray or black because it a little light and increase the font size for the wording and numbers. For example the dollar amount ans number of items is a bit small.

This CSS is not really doing the trick.

.woocommerce-mini-cart__buttons buttons .button wc-forward .button checkout wc-forward {
	font-size: 15px;
	color: black;
    
}

.woocommerce-mini-cart cart_list product_list_widget {
	color: black;
    
}

[fantasy_5]

Also is there a way to increase the size of the number of items and search icon so it matches the font size of everything else on the menu? It

's very small on mobile. How do I get the number of items and search icon to appear a little bit further right of the cart? For example: cart 1 item
I’m using gray for the cart button blackground and the menu is black so it appears to be a bit cut off.

[tristup]

Hi @fantasy_5,

What you are trying to acheive here required some complex custom CSS code, which is beyond the scope of Theme Support. I would suggest you hire a developer who can assist you in doing the customization, or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[fantasy_5]

Hi, @tristup

Were you granted the opportunity to read all of the messages within this thread? I have already figured out how to add the mini cart to the menu. I did provide some css code and pointed out the fact that it’s not working properly.

I need assistance adjusting the code. I also asked about increasing the size of the item link and search icon and how to shift it a bit to the right because it is small on desktop but tiny on mobile. I have been a customer for many years and the support has been phenomenal. What I’m asking should not require me hiring someone else or getting One. If someone here can assist me that would be great.

[fantasy_5]

Hi, @tristup

I figured out how to edit the colors for the background and buttons for the mini cart and now it looks like this:
If you can assist with adjusting the code to add a space between the view cart and checkout button that would be awesome.

Additionally, I have figured out how to increase the size of the font for item list and dollar amounts. Can you assist with font size increase for the subtotal line? Also, I would still like to know how to shift the search and items count a bit to the right because it still appears cut off from where the cart menu link is positioned.
/* Change mini cart background color */
.widget_shopping_cart_content {
background-color: #f0f0f0;
}

/* Style the “View Cart” button */
.widget_shopping_cart_content .buttons .button.wc-forward {
background-color: #000000;
color: #fff;
border-radius: 5px;
font-size: 13px;
}
}

I used this CSS to change the size of the item count for the cart and search icon size:

.x-cart .inner {
font-size: 15px;
}

.x-icon-search {
font-size: 15px;
}

/* Change mini cart font size */
.cart_list .mini_cart_item {
font-size: 13px;
}

[tristup]

Hi @fantasy_5,

Glad to know that you are able to figure it out. Regarding the custom CSS code help, that is beyond the scope of Theme Support as I mentioned in my previous comment.

Thanks

[fantasy_5]

Hi @tristup

That’s simply not true as I have been a member of this community for years. If you do not want to help I would rather you say so. Even with the code I have provided here you refuse to assist, but thanks. I’ll start a separate thread and maybe I can get help rather than replies with no assistance…

[tristup]

Hi @fantasy_5,

Sorry for the confusion here. But unfortunately, custom CSS code is out of scope. Still, if you find any problem in the CSS, you can add it here. I will check and, if allowed, will try to help you with that.

Thanks