[Samuel BParticipant]

Hey guys,

I have been searching for hours but can’t find a way to remove the little cart logo/icon from the ‘add to cart’ button.

Here’s a picture of my button at the moment:

(as you can see, I’ve changed the text to ‘check it out’)
How can I remove the little shopping cart icon next to the text?

Thanks
Sam

[Tom BParticipant]

It’s not quite the cleanest fix but if you put

.woocommerce .button.product_type_simple:before, .woocommerce .button.single_add_to_cart_button:before, .woocommerce-page .button.product_type_simple:before, .woocommerce-page .button.single_add_to_cart_button:before {
    content: "";
}

into the custom css section of the customizer it should have the desired effect.

[Samuel BParticipant]

Awesome, thanks Tom!

[RadModerator]

Thanks for helping Tom! 🙂

[Mark MParticipant]

I am looking for a way to do this and the above fix is not working anymore.

Ideally the fix would be some way of doing it in the functions.php in my child theme. I have already managed to change the button text in there via adding this code. Just need to work out how to remove the cart icon now.

// Change the add to cart text on single product pages
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );    // 2.1 +
function woo_custom_cart_button_text() {
        return __( 'Request A Sample', 'woocommerce' );
}

[FriechModerator]

Hi There,

The CSS code above still works on our end. Would you mind providing us the site URL?

Thanks!

[Mark MParticipant]

Hi,

My mistake it does work after clearing my cache, sorry.

Regards,

Mark

[ThaiModerator]

You’re most welcome.
If you need anything else, please let us know 🙂

[Wild-SpeedParticipant]

Instead of removing, How can I replace the default shoppingcart icon? For example I’d like to use the fontawesome shopping basket for my ‘add to cart’ buttons:

<i class=”fa fa-shopping-basket”></i>

[RupokMember]

Hi @wild-speed

Thanks for updating. You ca add the CSS to your Child Theme‘s style.css :

.woocommerce .button.product_type_simple:before, .woocommerce .button.single_add_to_cart_button:before, .woocommerce-page .button.product_type_simple:before, .woocommerce-page .button.single_add_to_cart_button:before {
    content: "\f291";
}

Hope this helps.

Cheers!

[Wild-SpeedParticipant]

Thank you.

The button shows ‘f291’ with this code and not the icon.

[DarshanaModerator]

@wild-speed

Please add the above code into your child theme’s style.css file. If you add it into your Customizer’s Custom > CSS area, it will remove the backslash when saving customizer.

Thanks!

[Wild-SpeedParticipant]

I see, that works but it removes the space between the icon and ‘add to cart’ text though, how can I fix that?

[Rue NelModerator]

Hello There,

You can make use of this code instead:

.woocommerce .button.product_type_simple:before, 
.woocommerce .button.single_add_to_cart_button:before, 
.woocommerce-page .button.product_type_simple:before, 
.woocommerce-page .button.single_add_to_cart_button:before {
    content: "\f291";
    margin-right: 5px;
}

Please let us know if this works out for you.

[Wild-SpeedParticipant]

The icon only works with

content: "\f291" !important;

It’s good now, Thanks!

[Author]

Posts