How to Add a Custom Add to Cart Button in WooCommerce (3 Easy Methods)

A custom Add to Cart button in WooCommerce is one you edit through code, a plugin, or the block editor to change its text, color, icon, or destination instead of using the plain default button. You can have one working in under ten minutes.

The default button says “Add to Cart” and nothing else. Fine for a generic store. Not so fine if you sell courses, pre-orders, or anything where “Add to Cart” doesn’t match what the customer is actually doing.

This guide walks through the editing the template file, using hooks and filters, installing a plugin, and working inside the block editor. Pick the one that fits your comfort with code, then follow the steps below.

Why Customize the Add to Cart Button?

Three real reasons, not marketing fluff.

• It matches the action: “Book Course” makes more sense than “Add to Cart” for an online class. “Pre-order” tells the customer exactly what they’re getting into. Words matter more than people think.
• It matches your brand: A neon green button on a minimalist beauty store looks wrong. Color and shape should feel like part of the same site, not a plugin default added awkwardly.
• It can lift conversions: Not guaranteed. But a clearer label and a button that stands out from the page background usually helps more than it hurts. Small changes like this are part of a wider eCommerce user experience strategy, not a fix on their own.

Worth knowing before you start: The Add to Cart button on a product page is different from a custom button placed on the cart page itself, like a “continue shopping” or “apply coupon” button. If that’s what you’re after instead, the process for a custom button on the cart page is a separate guide.

Method 1: Edit the Template File

This gives you the most control. It also carries the most risk if you skip the setup step.

Never edit WooCommerce’s core template files directly. An update will wipe your changes without warning, and there’s no way to get them back afterward. You need a child theme first. You can confirm the current template structure in the official WooCommerce code reference before you start.

Here’s the process:

1. Create a child theme (or activate one you already have).
   
2. Find the file at woocommerce/templates/single-product/add-to-cart/simple.php.
   
3. Copy it into your child theme, keeping the same folder path: yourtheme-child/woocommerce/single-product/add-to-cart/simple.php.
   
4. Open the copied file and edit the HTML around the button.
   

A basic edit to add an icon before the button text looks like this:

<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt">
    <?php echo esc_html( $product->add_to_cart_text() ); ?>
</button>

Change the text inside the <button> tag, or wrap it with your own markup. Save the file, clear any cache, and check the product page.

Limitation: This method only works for simple products out of the box. Variable and grouped products use different template files, so you’d need to repeat the process for each one separately.

Method 2: Use Hooks and Filters

This is the method most WooCommerce developers reach for first. No template files touched, so nothing breaks when WooCommerce updates.

To change the button text on a single product page:

1. Go to Appearance → Theme File Editor.
   
2. Then Go to functions.php in your child theme.
   
3. Add this at the bottom of the file:

add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_cart_button_text' );
function custom_cart_button_text() {
    return __( 'Buy Now', 'woocommerce' );
}

3. Save. Refresh the product page.
   

To change the text on shop and category pages too, use a second filter:

add_filter( 'woocommerce_product_add_to_cart_text', 'custom_cart_button_text_archive' );
function custom_cart_button_text_archive() {
    return __( 'Buy Now', 'woocommerce' );
}

Both snippets go in the same functions.php file. You can run different text on each page type, or the same text everywhere. Your call.

Want different text for different products? Wrap the return statement in a conditional check against the product ID or category, and return a different text depending on which one matches. This is also the cleanest way to handle a store that sells a mix of physical goods and pre-orders side by side, without switching plugins for each product type.

Method 3: Use a Free Plugin for a Custom Add to Cart Button in WooCommerce

If code makes you nervous, a plugin gets you most of the same result through a settings screen instead of a functions file.

1. Go to Plugins → Add Plugin in your WordPress dashboard.
   
2. Install and Activate Custom Add to Cart Button Label and Link for WooCommerce from WordPress plugin directory.
   
3. Go to Appearance → Customize.
   
4. Inside Customize Tab, WooCommerce → Cart.
   
5. Set your button text, color, and icon in the live preview panel.
   
6. Click Publish.
   

Most tutorials skip the icon step entirely, or assume you already have an icon library loaded. Don’t assume Font Awesome is on your site. Check first. If it isn’t there, use the plugin’s built-in icon picker instead of hardcoding an icon class that quietly won’t render.

Method 4: Style the Button with CSS

Text is one thing. Color and shape are another. Neither of the first two methods touches how the button actually looks on the page.

Go to Appearance → Customize → Additional CSS and add:

.single_add_to_cart_button {
    background-color: #2ecc71;
    color: #ffffff;
    border-radius: 4px;
    padding: 12px 24px;
}

These styles the button on the single product page. For the button on shop and category pages, target a different class:

.add_to_cart_button.button {
    background-color: #2ecc71;
    color: #ffffff;
    border-radius: 4px;
}

Swap in your own colors and spacing. Publish, then check both page types, since they use separate classes and one change won’t automatically carry over to the other.

Add an Add to Cart Button Anywhere with a Shortcode

Sometimes you want a buy button outside the shop entirely, inside a blog post or a landing page. WooCommerce has a built-in shortcode for exactly that.

1. Find the product ID under Products → All Products (it shows below the product name on hover).
   
2. Add this shortcode wherever you want the button to appear: [add_to_cart id="123"]
   
3. Replace 123 with your actual product ID(Obtain Product id from the URL of the product).
   

Drop it into a page, a post, or a widget. It renders the full working button, price included, wherever you place it. No separate setup needed beyond having the right product ID.

Skip the Cart Page and Go Straight to Checkout

Every extra click between “Add to Cart” and payment is a chance for someone to abandon the order. If you sell one or two products, or you’re running a single-product landing page, sending the customer straight to checkout can cut that extra effort down.

You don’t need a paid plugin for this. Add the filter below to functions.php:

add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_to_checkout' );
function redirect_to_checkout() {
    return wc_get_checkout_url();
}

This sends every add-to-cart click straight to checkout, skipping the cart page entirely. Fine for single-product stores. Not ideal if your customers regularly buy more than one item per order, since they’ll land on checkout before they’ve finished browsing the rest of your catalog(product list).

Editing the Button on a Block Theme

If your theme uses the WordPress block editor and you’re running WooCommerce 8.3 or later, the template-file method above may not apply the way you expect.

Block themes render the Cart and Checkout as blocks, not classic PHP templates, and the file path from Method 1 may not even exist in your setup. WooCommerce’s own store editing documentation covers how these blocks work if you want the full picture.

Here’s what to do instead:

1. Go to Appearance → Editor.
   
2. Open the single product template.
   
3. Click directly on the Add to Cart block to Customize the button.
   

Deep styling control is still limited here compared to CSS or a dedicated plugin. For anything beyond color and text, the CSS method from Method 4 still works on block themes, since it targets the same basic class names regardless of which template system renders the page.

Fixing Common Problems

• Button text isn’t changing: Clear your page cache and any object cache plugin. The filter only affects new page loads, not cached ones already saved before you made the change.
• Custom CSS isn’t applying: Open your browser’s dev tools and inspect the button directly. Check whether your theme or another plugin is loading a more specific CSS rule that’s quietly replacing yours.
• Changes vanished after a WooCommerce update: This only happens if you edited the original template file directly instead of copying it to a child theme first. There’s no way to recover those changes once they’re gone. Set up the child theme now to stop it happening again.

If none of this feels worth the afternoon it takes to debug, our WooCommerce development services team handles this kind of customization directly, along with anything more involved than a single button.

Conclusion

A custom Add to Cart button in WooCommerce comes down to four methods, each suitable to a different skill level. Template file editing gives full control but needs a child theme and comfort with PHP.

Hooks and filters are the safest middle ground for text changes. A plugin works if you want zero code touched at all. And if you’re on a block theme, the block editor handles the basics without opening a single PHP file.

Start with the method that matches your current setup, not the one that sounds most impressive. A working “Buy Now” button today beats a perfect custom template you never get around to finishing.

Frequently Asked Questions (FAQs)