Home › Forums › WoodMart support forum › How to remove product image from cart dropdown

How to remove product image from cart dropdown

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 23, 2020 at 9:25 am #181636

    leejay123
    Participant

    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?

    March 23, 2020 at 9:34 am #181639

    leejay123
    Participant

    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.

    March 23, 2020 at 11:11 am #181654

    Aizaz Imtiaz Awan
    Keymaster

    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.

    March 23, 2020 at 11:45 am #181661

    leejay123
    Participant

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

    March 23, 2020 at 12:33 pm #181680

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

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

    Best Regards.

    March 23, 2020 at 12:36 pm #181682

    leejay123
    Participant

    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/

    March 23, 2020 at 1:03 pm #181694

    leejay123
    Participant

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

    March 23, 2020 at 1:23 pm #181709

    Aizaz Imtiaz Awan
    Keymaster

    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.

    March 23, 2020 at 2:28 pm #181748

    leejay123
    Participant

    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.
    March 24, 2020 at 6:13 am #181847

    Aizaz Imtiaz Awan
    Keymaster

    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.

    March 24, 2020 at 2:16 pm #182010

    leejay123
    Participant

    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.

      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.

    March 25, 2020 at 6:54 am #182130

    Aizaz Imtiaz Awan
    Keymaster

    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.

    March 25, 2020 at 6:23 pm #182324

    leejay123
    Participant

    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;
    }

    March 26, 2020 at 7:13 am #182388

    Aizaz Imtiaz Awan
    Keymaster

    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.

    March 27, 2020 at 11:36 am #182766

    leejay123
    Participant

    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’ )

    March 27, 2020 at 11:54 am #182778

    Aizaz Imtiaz Awan
    Keymaster

    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
Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘How to remove product image from cart dropdown’ is closed to new replies.