WooCommerce custom add to cart button: Best free & pro plugins

WooCommerce custom add to cart button plugin

Discover the best free and premium WooCommerce custom add to cart button plugins, and how to choose the right one for your store.

One of the most important features of any e-commerce store is the "add to cart" button, which allows customers to easily add items to their shopping cart and continue shopping. While WooCommerce offers a default add to cart button, many businesses may want to customize this button to appeal to their customers more effectively. In this article, I will explore the best free and pro plugins available for customizing the WooCommerce add to cart button. I'll also help you choose the one that's right for your business.

To give you plenty of options, I'll focus on three plugins which take different approaches to customizing the add to cart button:

  1. WooCommerce Custom Add to Cart Button (free plugin) - Change the 'Add to Cart' button text, replace the add to cart text with an icon, or add an icon alongside the button text.
  2. Express Shop Page (premium plugins) - Extend the add to cart button on the shop page by adding quantity and variation pickers.
  3. WooCommerce Product Table (premium plugin) - Make it quicker and easier to add products to the cart by listing them in a fast one-page order form. It comes complete with multiple add to cart buttons, quantity fields and variation pickers for true one-page shopping. Use it alone or with the free WooCommerce Custom Add to Cart Button plugin.

Keep reading to learn more about these options, and choose which one(s) to install on your store for the best results.

Why customize the WooCommerce add to cart button?

There are lots of reasons why store owners might want an option in WooCommerce to upgrade the add to cart button.

For example:

  • Do you feel that the 'add to cart' text wording doesn't quite fit with your brand? For example, a lot of WooCommerce store in the UK change the button text to 'add to basket'. Think about what custom add to cart text would work better for you.
  • Are you using another plugin to change the function of the WooCommerce add to cart button? This could be through a course bookings plugin, events plugin, add to quote plugin, etc. If so, you might want to reword the Add to Cart text with something more relevant, such as 'Buy Now', 'Enrol Now', 'Book a Place', 'Add to Quote' or 'Make an Enquiry'.
    WooCommerce Custom Add to Cart Button plugin
  • Are your customers frustrated by the basic add to cart buttons on the Shop page, which don't let you change quantities or choose variations? If so, then you might want to extend these using a plugin like WooCommerce Express Shop Page. This brings all the usual product options onto the shop page, instead of having standalone add to cart buttons.
  • If you've used our Product Table plugin to create a WooCommerce order form, then you might want to remove the Add to Cart text and replace it with a simple cart icon for each product.
    Icon only add to cart buttons
    A website using the free Custom Add to Cart Button plugin with WooCommerce Product Table
  • Or maybe you just want to change the capitalization of the add to cart text, for example from lowercase to uppercase or vice versa.

Whatever your reason for wanting to change the add to cart link in WooCommerce, you can do it with the free WooCommerce Custom Add to Cart Button plugin.

Option 1: Change the add to cart text and add an icon

WooCommerce Custom Add to Cart Button is a 100% free WordPress plugin for customizing the add to cart button. It comes with all the essential features for customizing the WooCommerce add to cart button text and adding a cart icon:

  • Change the wording of the WooCommerce add to cart button text.
  • Add a high definition (retina) WooCommerce cart icon alongside the text.
  • Hide the add to cart text and just have an icon.

It's super-simple and lightweight, so it won't weigh down your site.

Here are some examples of the plugin in action:

How to create WooCommerce custom add to cart buttons

  1. Log into the WordPress Dashboard and go to Plugins → Add New.
  2. Search for 'WooCommerce Custom Add to Cart Button'.
  3. Install and activate the plugin of this name by Barn2 Media.
  4. Go to Appearance → Customizer → WooCommerce → Add to Cart. Here, choose the options for your custom WooCommerce add to cart buttons.

As you can see, the plugin is incredibly simple to use. There are full usage instructions on the official WooCommerce Custom Add to Cart Button plugin page on wordpress.org, but that's basically it!

Option 2: Add quantity and variation pickers to the Shop page add to cart button

WooCommerce Express Shop Page plugin

WooCommerce puts add to cart buttons on your main product listing pages, such as the main Shop page and your category pages. However, these are pretty useless as they come! That's because clicking the add to cart button only adds 1 of each product to the cart - there's no way to choose a quantity. It's even worse for variable products, which show a 'Select options' button linking to the single product page.

It's much better to allow customers to choose quantities and variations directly on your Shop and category pages.

Fortunately, you can easily do this with the WooCommerce Express Shop Page plugin. It adds variation dropdowns and quantity pickers to the shop page like this:

Add quantity and variations to WooCommerce shop page plugin

As you can see, customizing the basic add to cart button in this way makes it much easier to add products to the cart.

For best results, use Express Shop Page with the free WooCommerce Custom Add to Cart Button plugin to change the button text and add an icon.

Option 3: Create one-page order forms with custom add to cart buttons

Gutenberg for WooCommerce Product Table block

So far, we've discovered two plugins for customizing the WooCommerce add to cart button. These create a custom button without changing the overall layout of your products.

The WooCommerce Product Table plugin takes things to the next level. It takes your products and displays them in a quick one-page order form for faster shopping.

Use it alone, or with WooCommerce Custom Add to Cart Button to create a WooCommerce order form with cart icons.

WooCommerce Product Table is a powerful solution for taking your custom add to cart buttons to the next level. This plugin offers a unique approach to product displays by creating a table format. This allows customers to purchase products directly from the main shop page. As a result, there's no need to click through to individual product pages.

Why should I use custom add to cart buttons in a product table?

Product tables are a good addition to your store because:

  • There are a variety of purchasing options. These include the ability to select product variation and choose quantities. As a result, customers can quickly add products to the cart directly from the order form. This enhances the customer experience by streamlining the purchasing process. It also helps to increase conversions by reducing the number of clicks required to make a purchase.
  • You can also add WooCommerce custom fields to the product table, such as SKU, weight, and dimensions. Add multiple columns to provide customers with additional information.
  • It is highly customizable, with a range of options to control the appearance and functionality of the product table. You can choose which columns to display in the table, enable filters and sorting, and even add product search functionality.

As you can see, this gives you a lot of conversion-boosting flexibility compared the default WooCommerce shop page. Bringing the full range of add to cart options to the main shop page can help to increase conversions. The end result: driving more sales for your business.

Which WooCommerce add to cart plugin should I use?

In conclusion, customizing the WooCommerce add to cart button is a crucial step in improving the shopping experience for your customers. By using the free WooCommerce Custom Add to Cart Button plugin, you can easily change the button text and add an icon, helping to improve the design and functionality of your website.

Additionally, the WooCommerce Product Table plugin takes things one step further by bringing the full range of add to cart options directly onto the shop page. This allows customers to purchase products without having to navigate to individual product pages.

While each of these plugins offers its own unique set of features, they work best when used together. Combine them to create a highly customized and streamlined shopping experience for your customers. This will help to conversions and drive more sales for your business.

So why wait? Try them out today and see the difference they can make for your WooCommerce store!

28 Comments

  1. Hello! I would like all my add to cart buttons to be the same size, no matter if it's a single or variable product. How do I do this?

    • Hi, Danielle. Thanks for your comment. If you know how, you can manually style all your add to cart buttons to be the same size (e.g width) by adding custom CSS to your theme's Customizer. You can also ask your developer to implement this on your site for you.

      • Hey! I don't have a developer. I'm building it on WordPress OceanWP with Elementor. I'm watching videos to learn how to edit. I don't code with CSS. Is there a common code I could use?

        • Hi again, Danielle. Thanks for your reply. The custom CSS to use can vary in the front-end (e.g. from theme to theme), and if you're using a page builder/editor as these can also affect the styling/CSS.

          If you don't have a developer who can do this for you, then I recommend that you post a job on Codeable where their pre-approved WordPress experts will send you a quote. We have partnered with them to provide plugin customization for our customers. Codeable have several developers who are experienced in customizing our plugins - to request a quote from them, select Domagoj Kovacevic, Domenico Nusca, Krasen Slavov, Onur Demir, Liam Bailey, Nitin Yawalkar and Felipe Elia as your preferred experts.

          I hope this helps point you in the right direction.

  2. I need + - as add to cart to select product can any one suggest how this can be implemented I took reference from goodeggs.com Please direct

    • Hi, Ankita. Thanks for the reference. I took a look at the Good Eggs site and see that what they've done is simply to change the default "Add to cart" text in the add to cart button and instead use the "+" character/sign/symbol. This is exactly what our WooCommerce Custom Add To Cart Button allows you to do.

      Let me know if you have any other questions. You can get in touch with us quicker via our free plugin's Support Forum. Thanks.

    • Hello, Takroo. Thanks for your comment and for the image showing your dream, I appreciate it. You can use WooCommerce Product Table to display a quantity picker/selector in the add to cart column (see our front-end demo), while the subtotal for the quantity of items will be displayed in the cart page, after adding the products.

      Should you have any other questions, we can get back to you much quicker if you were to please fill up a form in our Support Center. Thanks!

  3. Does this plugin allow to add an extra button next to the existing Add to Cart button? I want to have another button so customers can also buy on Amazon if they want to. If you don't have this feature, could you please consider adding it? Thanks!

    • Hi, Eddie. This is beyond what the plugin is designed to do, and you could achieve it by using our product table plugin, WooCommerce Product Table, to display custom links in the table – either as clickable text or as buttons, icons or images. These links can link to any URL, such as to Amazon. Cheers.

  4. I just installed this plug in cos I loved the idea of showing only the basket icon, customized it through my theme customiser (as required) However, when I chose tthis option, the button is empty. I have tweaked my button colours in my theme to be sure there is a clear contrast, yet I cannot see the basket icon.
    What am I doing wrong?

    • Hi again, Ulonka.

      As a follow up to my previous reply, please note that our plugin allows you to change or customize the text or wording of the WooCommerce Add to Cart button, as well as the option to show/hide the text and/or the default cart icon. It does not include an option to change/customize icons nor colours. The issue you're experiencing could be due to the theme. You can test or isolate this by temporarily switching to a default WordPress theme (such as Twenty Seventeen) and check if the issue persists.

      I hope this helps! Many thanks.

    • Hi, Ulonka.

      Thanks for getting in touch and for using WooCommerce Custom Add To Cart Button. I suggest that you first try isolating where the error might be by reverting to displaying plain text in the add to cart button. If that displays, then it could be the icon you're using - try using a different icon.

      I hope this helps. Should the issue persist, please could you contact us via our free plugin's Support Forum and include a link to your site where we can see the issue to investigate it further.

      Best regards.

  5. Same problem here, done exactly as you say but nothing is happening.

    • Hi, Kevin. Sorry to hear it. So that we may assist you best, please could you create a new topic in the plugin's Support Forum and describe your concern in more detail, e.g. at which point are you stuck, what you've done exactly so far, and what the expected output is. Many thanks.

  6. I have downloaded the plugin and activated it, but the Customizer does not show up on my sidebar menu, nor can i access its settings via my plugins menu. How do i access the woocomerce custom add to cart button plugin once it's activated?

    • Hi Brigitte,

      You get to the Customizer from the WordPress admin under the Appearance > Customize menu. From there go to "WooCommerce", then "Add to Cart Buttons".

  7. hi,

    please can your plugin change the button text on a per-product level?

    i would like different products to have different texts. would that be possible with your plugin?

    thank you

    • Hi Timi, unfortunately the plugin doesn't have this feature. I have added it to our feature request list and will let you know if we develop this in future. We add new features based on a combination of demand, difficulty and impact.

  8. Choose different add to cart icons allowing for custom shopping cart icons would be a great option!! Also if there were a way for the button itself to signify that if had been pressed with a tick or something... Rather than the user having to check the cart that would be an amazing feature.

  9. Can it show up in a search? For instance, if I put "birdwatching" into a search on a site, and a book on birdwatching comes up in the search, is it possible to have the add to cart button show up on the search result?

    • This free plugin only changes your existing add to cart buttons, it doesn't change where they appear. You might be interested in our other plugin, WooCommerce Product Table. It lets you list products in a table layout anywhere on your site, with add to cart buttons. If you're happy to modify template files in your theme then you can use the product table layout on the product search results page (NOT the global WordPress search results, as these list other types of content and not just WooCommerce products). The instructions for using product tables with add to cart buttons on the search results page are here.

  10. Why Woo custome add cart button not show on text panel? I use Woocommerce 3.3.5
    Please help me

    • Hi Kim, have you installed and activated the WooCommerce Custom Add to Cart Button plugin? When the plugin is active, you should see its settings in the Customizer.

Please share your thoughts...

Your email address will not be published. Required fields are marked *