Now i am trying to remove "Remove Item Icon" (small cross next to product) on the cart. But if i am disabling it through setting , it is getting removed for all products. Instead i just want to remove for one item.
Thanks Elvin, I understand what you are saying, but I have a plugin that allows product quatities to be changed or products deleted on the checkout page so that solves that issue. Is there any way to put something in the functions.php file that changes the hardcoded esc_url( wc_get_cart_url() ) so it goes to checkout instead?
The "problem" is that since the two buttons are so close together when a user is logged-in (only then the menu has a dropdown) and has a product in his cart, the cart dropdown menu overlaps with the usermenu dropdown when the user is moving his mouse between the two elements.
I recommend going with the second approach or taking the user to the shopping cart page. Tooltips/ drop-downs might not be a good idea when a user has added multiple items to their shopping cart. A side flyout/ page gives more real estate space for displaying their cart contents. Also agreed with Martyn about tablet users. Here are two examples of platforms with very heavy usage showing effective use of side flyout panel and full page experience.
I would then change the behaviour so that the dropdown only appears upon click. Your first example image seems good - I presume the red button reads "Proceed to Checkout"? You should also add some control to close this dropdown menu, perhaps an X in the corner, but make sure this is obviously visually separate form the cart items so that it is not mistaken for a Delete Item icon. I think the red "X" you currently have for deleting an item could be replaced with a bin/trash icon. An "X" is commonly interpreted as "Cancel" whilst a trash can means "Delete/Remove". I know this isn't directly related to your question but thought it was worth mentioning.
You could also go down the route of your V2 image when a user clicks the Cart icon. Your Version 2 is nearly there, but there needs to be more of a visual link between the Cart icon and the side menu. Having a slight arrow making it seem like a callout, and positioning the icon further to the left, closer to the border of the Cart menu, would definitely help.
In case you are building an ecommerce store with the Divi theme and have installed the WooCommerce plugin, you probably see a shopping cart icon in your secondary menu. In this article I will explain how you can get rid of it. You may not need it or have other plans with your website.
Also, to hide the shopping cart icon only on a certain page of your website, just add this custom CSS code to the custom CSS field for that particular page. You will find it in the page settings > Advanced > Custom CSS.
582128177f