Say goodbye to fear of conflicts between theme and plugin during major WooCommerce updates.
Remove Font Type Storefront Woocommerce Install To TheTo take your WooCommerce Storefront install to the next level, have a look at the WooCommerce Storefront extension catalog.
However, the link to Remove and on mouse over, the red circle are still shown. Possibly I have enough content for another 2 years However, the other day a premium WooCommerce student asked me for some feedback on his custom CSS so I had to give it priority The request was: whats the easiest way to change the little iconbutton on the Cart page that has the function of removing items from the cart (yes, that ugly white cross on a red circle) How to change the Remove this item icon on the WooCommerce Cart page Table of Contents Change the Remove this item Icon Default WooCommerce Change the Remove this item Icon Storefront Theme Change the Remove this item Icon Other Themes Change the Remove this item Icon Default WooCommerce In default WooCommerce, and using a theme that does not apply its own style to the Cart (for example, 2017 theme), the remove icon is not an icon In fact, its a simple x (as per the x character) with a 1px border and 100 border radius, which makes it look like an x with a circle around it: The x character with a 1px border and 100 border radius to fake the remove icon WooCommerce Cart So, you can use simple CSS (you can learn more from the following paragraph even if it is for Storefront theme) to override it. To achieve this, you need to add some code to the of your themes header.php file: Change the Remove this item Icon Storefront Theme Before giving you the solution, Id like to show you a series of screenshots. Remove Font Type Storefront Woocommerce How To Change TheIn this way, you can find out how to change the Menu Cart icon, the Add to cart icon (if any) and all the other icons that are added by your theme or plugins In fact, my solution is specific to the Storefront theme and each theme is different. So youll need to adapt your CSS to your specific case. Lets Inspect the Remove this item icon via Google Chrome First, we want to understand what is actually generating this icon. ![]() The Remove this item is a link (a href) with some CSS styling; but there is no sign of the iconimage Inspect allows us to study the HTML and CSS of the inspected element. However, nothing seems to tell us where the white cross red circle comes from. Welcome to the world of CSS pseudo-elements Heres what happens when I highlight the::before in the HTML window instead. CSS content and font-family Well, in a few words, the icon is being generated by a CSS content call. FontAwesome So, somewhere around WooCommerce HTML (or my themes, Storefront), this FontAwesome is getting called. This means we can reuse this and see if it provides more icons So, lets go to and look for REMOVE icons: Looking for other REMOVE icons on the FontAwesome website Lets pick one, for example the trash icon: FontAwesome trash icon specs And write down the Unicode: f1f8 6. Custom CSS: override the original icon with one line of code Now that youve picked the icon and know its Unicode, go to your custom CSS and add this one line. Custom CSS: also change the icon color with another one liner. Hopefully, one of the above 2 methods will work for you and can be applied to your specific case Related posts: WooCommerce: Hide Shipping Rates if Free Shipping Available WooCommerce: Display Total Weight Cart Checkout WooCommerce: See Whats Inside the Cart Array (printr) WooCommerce: Edit Add to Cart Min, Max Step Quantity WooCommerce: Force Cart to Specific Amount (Deposit) WooCommerce: Change Add to Cart Quantity into a Select Drop-down ZWooCommerce: Sort Cart Items Alphabetically AZ WooCommerce: Put Cart Checkout on the Same Page WooCommerce: Set Min Purchase Amount for Specific Product WooCommerce: Redirect to Checkout on Add to Cart Where to add this snippet You can place PHP snippets at the bottom of your child theme functions.php file (before if you have it). CSS, on the other hand, goes in your child theme style.css file. ![]() I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7. If you think this code saved you time money, feel free to join 10,000 WooCommerce Weekly subscribers for blog post updates or 250 Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance:) Need Help with WooCommerce Customization Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins via your child theme. Watch me code and learn by example Rodolfo Melogli Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis soccer balls and, of course, wood fired oven pizza. Category: WooCommerce Tips Tags: Cart Page, CSS, FontAwesome Post navigation Previous post: From 0 to 208,838 Website Visitors: WCBelfast 2016 Content Marketing Slides Video Next post: WooCommerce: Add a Custom Search Bar in the HeaderFooter 26 thoughts on WooCommerce: Change the Remove this Item Icon Cart Sriram April 16, 2020 Worked like a charm.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |