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

A custom Add to Cart button in WooCommerce is the default button with your own text, color, icon or link. You can build one with code, a free plugin or CSS in about 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” does not match what the customer is doing.

This guide covers four methods: a template override, hooks and filters, a free plugin and CSS. We checked each one against the WooCommerce 10.2 button template, the plugin’s WordPress.org page and the WooCommerce docs in October 2026. Sections on block themes, shortcodes and direct checkout follow.

Why Customize the Add to Cart Button?

Customizing the Add to Cart button makes its label match what the shopper is about to do. It also makes the button look like part of your brand. A clearer button that stands out from the page can help more shoppers click it.

• 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. To sell before release day, see the best WooCommerce pre-order plugins.
• 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. A plugin default added awkwardly does not.
• 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. They are not a fix on their own.

Worth knowing: 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

Editing the template file gives you full control over the button markup, including icons and extra wrappers. It also carries the most risk if you skip the child theme step. Use it when hooks and CSS cannot reach the change you need.

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 wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php.
   
3. Copy it into your child theme and keep 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">
    <span class="dashicons dashicons-cart" aria-hidden="true"></span>
    <?php echo esc_html( $product->single_add_to_cart_text() ); ?>
</button>

The <span> line adds a cart icon from Dashicons, the icon set that ships with WordPress. In the 10.2 template the class attribute also adds your theme’s button class. Keep that part of the line and add only the icon.

WordPress loads Dashicons on the front end only for logged-in users, because the admin bar needs them. Add this to your child theme’s functions.php so every shopper sees the icon.

add_action( 'wp_enqueue_scripts', 'custom_load_dashicons' );
function custom_load_dashicons() {
    wp_enqueue_style( 'dashicons' );
}

Save both files, clear any cache and check the product page while logged out.

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

Method 2: Use Hooks and Filters

Hooks and filters change the button text with a few lines of PHP in your child theme. No template files are touched. Nothing breaks when WooCommerce updates. Most WooCommerce developers try this method first for text changes.

To change the button text on a single product page:

1. Go to Appearance > Theme File Editor. On a block theme it sits under Tools > Theme File Editor.
   
2. Open 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? The filter passes the product as a second value. You can check its category with it. This example shows “Book Course” for products in a courses category and the normal text everywhere else:

add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_cart_text_by_category', 10, 2 );
function custom_cart_text_by_category( $text, $product ) {
    if ( has_term( 'courses', 'product_cat', $product->get_id() ) ) {
        return __( 'Book Course', 'your-textdomain' );
    }
    return $text;
}

Change courses to your own category slug. The same check works for a store that sells physical goods and pre-orders side by side.

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

The free Custom Add to Cart Button Label and Link plugin changes the button label, link, colors and icon from a settings screen. It has 2,000+ active installs and version 2.0 on WordPress.org (October 2026). It suits store owners who would rather not edit PHP.

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 the WordPress plugin directory.
   
3. Open the CATCBNL item in the admin menu.
   
4. Set the button label and link for the single product page and the shop page. You can also give one product its own label and URL.
   
5. Pick the text color, background and hover style. Then choose an icon before or after the label.
   
6. Save the settings and check a product page.
   

The free version places an icon before or after the label. The icon picker with size and spacing controls is part of the paid Pro version (October 2026). After you save, check the icon on the live product page while logged out.

Method 4: Style the Button with CSS

CSS changes the color, shape and spacing of the Add to Cart button without touching PHP. The text methods above leave the look of the button alone. A few lines in Additional CSS cover the product page and the shop page.

Go to Appearance > Customize > Additional CSS and add the code below. On a block theme, use Appearance > Editor > Styles > Additional CSS.

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

This CSS 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 and check both page types. 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 when you hover over the row.
   
2. Add this shortcode wherever you want the button to appear: [add_to_cart id="123"]
   
3. Replace 123 with the product ID from step 1. The edit link also shows it after post=.
   

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. It is not ideal if your customers often buy more than one item per order. They land on checkout before they finish browsing the rest of your catalog.

Editing the Button on a Block Theme

On a block theme, WooCommerce pages are built from block templates in the Site Editor. The Add to Cart button there is a block with its own style settings. You change it by clicking it in the template, and no PHP file is involved.

The template override from Method 1 may never run on a block theme. Product pages use the Single Product template, and WooCommerce’s guide to customizing single product pages explains how it is built. The product page button is the Add to Cart + Options block.

Here’s what to do instead:

1. Go to Appearance > Editor > Templates.
   
2. Open the template that shows the button. Pick Single Product for product pages, Product Catalog for the shop or Page: Cart for cross-sells.
   
3. Click the button block. Product pages use Add to Cart with Options and product grids use Add to Cart Button. Set its width and style in the sidebar. Click Save when you are done.
   

Block style settings stay basic compared to CSS or a plugin. For more control, add the CSS from Method 4 under Styles > Additional CSS. Check the button’s class in your browser’s dev tools first, because the newer Add to Cart + Options (Beta) block can use different class names.

Fixing Common Problems

• Button text isn’t changing: Clear your page cache and any object cache plugin. The filter only affects new page loads. It does not change cached pages 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. Skip the one that only sounds most impressive. A working “Buy Now” button today beats a perfect custom template you never get around to finishing.

Frequently Asked Questions (FAQs)