Add a cart icon to the buttons on your WooCommerce products

There are lots of reasons why you might want to modify your product’s Add to Cart buttons. You can modify the text or add a cart icon to make the buttons more prominent and visible to potential customers on your WooCommerce store.

Depending on how you’re using WooCommerce you might want the button to say something like ‘Add to quote’, ‘Buy Now’, ‘Book Event’, ‘Enrol’ or ‘Make an Enquiry’ to help encourage your customers to purchase with a more direct and specific call to action.

Ensuring your button’s styles stand out can also help, but doing so in ways that doesn’t look awkward against your theme’s styles can be tricky, especially if you’re not a designer.

An easy way to make your buy buttons a little bit more prominent is to add a cart icon.

Add a cart icon with our free plugin

WooCommerce Custom Add to Cart Button is a simple (and free) plugin that adds a few styles and options to allow you to easily modify the purchase buttons on your WooCommerce products.

In addition to allowing you to change the text, our plugin also introduces the option to add a cart icon to your product’s Add to Cart buttons throughout your WooCommerce store.

It will work for pretty much any product that you sell directly through your WooCommerce store and can be downloaded from WordPress.org.

We recently received a question on how to add a Cart Icon to the External products on the WordPress.org forums for our WooCommerce Custom Add to Cart Button plugin, though. Unfortunately, the extension does not allow you to modify the text (or add the icon) on External Products, as this plugin user here was requesting.

Since WooCommerce lets you modify the text on this product type directly, it didn’t seem obvious that people might want to use our plugin to edit this product type.

But it turns out that at least one person wanted to use the plugin to add the icon to their site’s external products. It’s relatively easy to add the icon with a little bit of custom CSS.

So whether you want to use our plugin or not, the remainder of this post will show how you can use CSS and PHP to do what our plugin won’t on external products and to allow you to tweak the buttons without using a plugin, if you’d prefer to do it yourself!

Add a cart icon to your WooCommerce products with CSS

The Add to Cart icon we add to the buy button with our plugin is part of the default WooCommerce icon set. This makes it pretty easy to use them without our plugin by adding some basic CSS. 

The following snippets can be used to add a cart icon to an External Product specifically, but can be easily modified to avoid installing our plugin for any product type.

If your theme uses WooCommerce blocks for the shop archive pages, you can use this to add a cart icon:

.wp-block-button__link.wp-element-button.wc-block-components-product-button__button.product_type_external:before {
display: inline-block;
font-family: WooCommerce;
float: left;
content: "\e01d";
font-weight: 300;
margin-right: 1em;
}

And if your theme uses the legacy shortcodes to render your shop pages, you can use this:

.button.wp-element-button.product_type_external:before {
display: inline-block;
font-family: WooCommerce;
float: left;
content: "\e01d";
font-weight: 300;
margin-right: 1em;
}

Both will add the default WooCommerce icon to your External Product buttons.

Alternatively, you can use the Dashicons cart icon which is also bundled within WordPress by modifying the font-family: to Dashicons and the content: to “\f174”. It looks basically the same, but with a solid icon. 

The only requirements to add a cart icon are font-family: and content:, but the rest can be modified to ensure that your buttons look exactly how you want them to after modification. These specific snippets have been tested with a few default themes to make sure they look good on most sites.

You can also try making some tweaks to make the buttons stand out even more!

Note: you can use this method to add any icon from the WooCommerce or Dashicons sets, including the little partially eaten drumstick. 

Applying this to other product types

If you want to add a cart icon to your products without installing our plugin, you could target the Simple Product Add to Cart button rather than the external product button specifically.

The same snippet applies, but you would just want to target a simple product (or any product type, for that matter), like in this example:

.button.wp-element-button.product_type_simple:before {
display: inline-block;
font-family: WooCommerce;
float: left;
content: "\e01d";
font-weight: 300;
margin-right: 1em;
}

Modifying the text on the Add to Cart button

Modifying the text on the button (without our plugin) should be done using a PHP snippet rather than CSS. The official WooCommerce documentation offers a solution for that, but it’s probably worth noting here that one of their solutions is to recommend our Custom Add to Cart extension.

That being said, for completeness sake, here’s their recommended snippet to tweak the text:

We also have a guide on how to safely add custom PHP snippets to your WooCommerce site if you want help getting this snippet added to your store.

If you have any questions about this or any other modification to your WooCommerce store, let us know!