Customizing your WooCommerce store can give your users a more streamlined and user-friendly shopping experience. One simple but powerful customization is adding an “Add to Cart” button programmatically—without relying on heavy plugins or complicated page builders.

In this guide, you’ll learn exactly how to insert a WooCommerce Add to Cart button anywhere on your website using simple code snippets. Whether you want to show it on a landing page, your homepage, or a custom template, we’ll walk you through the steps.

You’ll also discover a no-code alternative at the end using Floating Awesome Button (FAB) – the perfect tool for non-tech-savvy users who want a clean, modern way to engage visitors and drive more actions on their site.

Prerequisites

Before we start adding the WooCommerce Add to Cart button programmatically, make sure you have the following:

1. A WordPress Website with WooCommerce Installed Ensure that WooCommerce is installed and activated. You also need at least one published product to test the Add to Cart button.
2. Access to Your Theme Files or Child Theme You will be editing template files or inserting code. It’s highly recommended to use a child theme to avoid losing changes during theme updates.
3. Basic PHP and WordPress Knowledge You don’t need to be an expert developer, but a basic understanding of PHP and how WordPress themes work will help you follow along.
4. A Code Editor or File Manager You can use an FTP client, your hosting file manager, or a plugin like WP File Manager. Alternatively, use the built-in Theme File Editor in WordPress (Appearance → Theme File Editor).

Once you’ve got everything ready, let’s explore when and why you might want to add the button programmatically.

Understanding the Use Case

Adding the WooCommerce Add to Cart button programmatically isn’t just a fun coding exercise—it solves real-world business and design problems.

When Should You Add the Button Programmatically?

• On a Custom Landing Page: You’re running a campaign and want to feature a product with a direct call-to-action.
• On the Homepage: Highlight a best-seller without sending users to a separate product page.
• In a Custom Template: Your theme includes custom product grids or modules not handled by default WooCommerce templates.
• For Speed Optimization: You want minimal plugin usage to keep things light and fast.
• To Create a Unique Experience: Your UX design needs more flexibility than what page builders offer.

By doing it programmatically, you stay in control—placing buttons exactly where you need them and customizing the behavior to fit your store.

Now that you understand the ‘why’, let’s begin

Add to Cart Button Using Product ID (Basic Example)

Let’s start with a simple method to add a WooCommerce Add to Cart button programmatically using the product ID. This is great for showing the button on any page, post, or template.

Basic PHP Snippet:

<?php echo do_shortcode('[add_to_cart id="123"]'); ?>

Replace 123 with the ID of your WooCommerce product.

Where to Place This Code:

You can insert this code in:

• A custom template like front-page.php
• Page template files like page.php or single.php
• Widget areas using a PHP widget plugin
• Your theme’s functions.php with output hooks (with proper escaping)

How to Find Product ID:

1. Go to WooCommerce → Products.
2. Hover over a product name.
3. The product ID will appear below the title (e.g., “ID: 123”).

Result:

This button will:

• Automatically adopt your WooCommerce theme styling.
• Redirect to cart or remain on the same page depending on your WooCommerce settings.

It’s a clean, fast, and reliable way to add the button without installing any plugins.

Display Button in a Custom Template File

Now that you know how to add the button using the product ID, let’s embed it inside a custom WordPress template file. This gives you full control over placement and styling.

Step-by-Step Guide:

1. Create a Custom Page Template (Optional)

If you want a new layout:

• Go to your theme folder (preferably child theme).
• Create a new file, e.g., page-add-to-cart.php.

Paste this at the top of the file:

<?php
/**
 * Template Name: Add to Cart Page
 */
get_header(); 
?>

2. Insert the Add to Cart Code

Inside your custom template, paste:

<?php
$product_id = 123; // Change this to your product ID
echo do_shortcode('[add_to_cart id="' . $product_id . '"]');
?>

3. Save and Upload

• Save your file.
• Upload it to your theme directory (if editing locally).
• Create a new page in WordPress and assign the new template.

No-Code Alternative: Floating Awesome Button (FAB)

Not a developer? Don’t want to touch code? No worries—Floating Awesome Button (FAB) is the easiest no-code solution to create beautiful, interactive buttons that drive action on your website. FAB (Floating Awesome Button) lets you add stunning floating buttons that stay visible as users scroll. It’s like having a personal assistant on your site—always ready to help visitors take action.

Here is step by step how to add Add to Cart button with no code with FAB :

Step 1: Install and Activate the FAB Plugin

1. Go to your WordPress dashboard.
2. Navigate to Plugins → Add New.
3. Search for Floating Awesome Button.
4. Click Install Now, then Activate.

Step 2: Create a New Floating Add to Cart Button

1. After activation, go to FAB → Add New FAB.
2. Search for “WooCommerce Add to Cart” then click + Add New

Step 3: Customize the Button Appearance (Optional)

• Choose a button icon (e.g., shopping cart).
• Set a label like “Add to Cart” or “Buy Now”.
• Select colors to match your branding.
• Position the button (bottom-right is a common choice).
• Toggle visibility options to show on product pages only, or globally.

Step 4: Save and Test

• Click Publish to activate the floating button.
• Visit your product page to see the FAB in action.
• Test it on desktop and mobile to ensure smooth performance.

And that’s it—no coding, no headaches. Just a beautifully floating Add to Cart button working for you 24/7.

Conclusion: Add to Cart Your Way—With or Without Code

Adding a WooCommerce “Add to Cart” button programmatically allows you to customize and control how your products are presented and purchased. Whether you’re embedding a simple button into your theme, using shortcodes inside templates, or creating a fully custom add-to-cart flow using PHP, WooCommerce gives you the flexibility to build a shopping experience that fits your business needs. However, if you’re not comfortable with code or simply want a faster way to improve user interaction on your site, you can use FAB to create the add to cart button.