How to remove product image from cart dropdown

Hi how can i remove the product image shown in the mini cart dropdown shown here: https://gyazo.com/3b5ae7000f43cb5e5d48574760bc302c

I have snippers plugin enabled i need some php?

How can i change the add to cart icon on hover shown here: https://gyazo.com/050e41bab40b43995ed67442ac11a373

Regarding: Hi how can i remove the product image shown in the mini cart dropdown shown here: https://gyazo.com/3b5ae7000f43cb5e5d48574760bc302c i also need to remove the link to the product in the mini cart as well as the product image.

Hello,

I saw the videos you attached.

1) To remove the images on the mini cart you need to add the following Custom CSS code in the Global Custom CSS area under Theme Settings >> Custom CSS.

.woocommerce-mini-cart-item.mini_cart_item .cart-item-image {
display: none;
}

2) To change the icon of the add to cart button you need to add the following Custom CSS code in the Global Custom CSS area under Theme Settings Custom CSS.

.wd-add-btn-replace .add-to-cart-loop::before {
content: "\f120";
}

You can change the content according to your requirements.

3) To remove the link of the product on the mini cart item you need to add the following JS code in the Global Custom JS area Under Theme Settings >> Custom JS.

(function($) {    
 $(document).ready(function(){
 $( "li.woocommerce-mini-cart-item > a" ).removeAttr("href");
});
    
})( jQuery );

Best Regards.

Thank you for that. Where can i get the F120 Icons etc from?

Hello,

You can get the icons from the following URL: https://fontawesome.com/v4.7.0/icons/

Best Regards.

It doesn’t work.
Please see here https://gyazo.com/6e24d5c4ecca4cf8f4693bb4f66163a8

wd-add-btn-replace .add-to-cart-loop::before {
content: “\ f019”;
}

I changed the code from f120 to f019 shown here: https://gyazo.com/21953e801959650fc058a2fac2f073d7 on https://fontawesome.com/v4.7.0/icons/

the unicode f120 works but the f019 doesn’t, i got this from https://fontawesome.com/v4.7.0/icons/

Hello,

I have fixed the issue on your website and the icon is displayed absolutely fine on my end.

I have created a child-theme on your website and added the following code in the header.php file and the icons are working.

<script src="https://use.fontawesome.com/a9e8be7baf.js"></script>

Please clear cache and check back.

Best Regards.

Works perfect thank you.

How can I change the “Return to shop” name to “Return to Downloads,” on the mobile cart menu? I have managed to achieve this on the desktop version with a snippet however it does not change on mobile. Please find attached screenshots for desktop and mobile.

Also since removing the image from the cart, it looks silly when in the mobile version, please find attached screenshot. Is there any way this can be fixed with CSS. The content is aligned to the right as shown in image.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshots you attached.

1) To translate the return to shop text you need to install and use loco translate WordPress plugin. Then you need to choose the correct path to translate the string according to your requirements.

You can watch the video in our documentation on how to translate strings using loco translate for further help: https://www.youtube.com/watch?v=D3NsDdMzsls

2) For the mini cart on mobile Please elaborate how you want it to align to check it myself and help you out accordingly.

Best Regards.

1) To translate the return to shop text you need to install and use loco translate WordPress plugin. Then you need to choose the correct path to translate the string according to your requirements.

You can watch the video in our documentation on how to translate strings using loco translate for further help: https://www.youtube.com/watch?v=D3NsDdMzsls

I created a staging website to test these settings before deploying them on my live version. I followed the steps in the https://www.youtube.com/watch?v=D3NsDdMzsls exactly as mentioned and it does not work.

However i managed to update this https://gyazo.com/29453f36c48d8e5ca945074661fa0b19 from shopping cart to shopping basket.

Other strings such as Your cart is currently empty shown here https://gyazo.com/da7e57fb8ac0910e3fc3379f80042028 does not change to Your Basket is currently empty.

Please see here: https://gyazo.com/4560ee1b1fcb04ffed4b76143b7afcd5

I have also tried to change return to shop string shown in the cart page to, return to downloads and that does not change.

I will leave the admin login credentials in the private area.

2) For the mini cart on mobile Please elaborate how you want it to align to check it myself and help you out accordingly.

Now this setting is for my live website and not the staging one as mentioned above. you will find these credentials within this topic on other comments shown above.

As shown here https://gyazo.com/3684cc7e6b75c1e2c573fe8da4b5b3d6 you can see that the title, price and quanity information is alighed to the right however i would like this to be strectehd and aligned to the center. This occured when i removed the image from the cart using the below snippet.

add_filter( ‘woocommerce_cart_item_thumbnail’, ‘__return_false’ )

If i remove the snipped it looks like this: https://gyazo.com/1066dae63230bac56f2fe9a91b2efa8c However id no not want the image.

Hello,

I saw the screenshots you attached.

1) It seems that you are not choosing the correct path to translate the strings.

You need to Go to Loco Translate >> Plugins >> WooCommerce.

Screenshots for Clarification: https://ibb.co/m5G9yhv
https://ibb.co/hDKD7qJ

Result: https://ibb.co/xLV7fj2

2) It seems that it is the code snippet that is causing the issue on your website. Please remove the code snippet and use the CSS I provided to hide the image.

Best Regards.

I have tried the below code but it does not work.
First i removed the snippet and then added the below code to global css options. cleared wp rocket cache and browser cache but no luck.

.woocommerce-mini-cart-item.mini_cart_item .cart-item-image {
display: none;
}

Hello,

I have visited your website and the product image is removed from the MiniCart on the mobile.

Screenshot for Clarification: https://ibb.co/qFy61Pg

Please deactivate cache plugin, clear browser cache and check back.

Best Regards.

Hi the reason the image is not showining in the mini cart is because i have the below snippet active as the css code you provided did not work. I cleared WP roket cache, cleared my browser cache and purged my CDN.

add_filter( ‘woocommerce_cart_item_thumbnail’, ‘__return_false’ )

Hello,

We are Glad that you resolved the issue by yourself. You are Great!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts