Docs

[Samuel B]

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:
http://imgur.com/oyWKF8C

(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 B]

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 B]

Awesome, thanks Tom!

[Rad]

Thanks for helping Tom! 🙂

[Mark M]

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

[Friech]

Hi There,

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

Thanks!

[Mark M]

Hi,

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

Regards,

Mark

[Thai]

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

[Wild-Speed]

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>

[Rupok]

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-Speed]

Thank you.

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

[Darshana]

@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-Speed]

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

[Rue Nel]

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-Speed]

The icon only works with

content: "\f291" !important;

It’s good now, Thanks!

[Author]

Posts