Woo Product Buy Buttons | Fervor Coding

How to Add Buy Buttons to a WooCommerce Category Page in WordPress

WooCommerce gives you a lot of flexibility when customizing your store, and if you want to add “Buy Now” buttons to category pages, you’re on the right track! This tutorial will show you how to modify the WooCommerce archive-product.php template to display “Buy Now” buttons for specific product categories.

What You’ll Need

Access to your WordPress theme files (via FTP, hosting panel, or the WordPress admin).
A child theme (to avoid overwriting your changes when the theme updates).
Basic understanding of PHP and WooCommerce templates.

Step 1: Set Up a Child Theme (If Not Already Done)

Go to your WordPress root folder.
Navigate to wp-content/themes/ and create a folder for your child theme (e.g., your-theme-child).
Inside your child theme folder, create these files:
- style.css
- functions.php

Contents for style.css:

/*
Theme Name: Your Theme Child
Template: your-theme
*/

Contents for functions.php:

<?php
// Enqueue parent and child theme styles
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
} );

Activate the child theme under Appearance > Themes.

Step 2: Copy the WooCommerce Template to Your Child Theme

WooCommerce templates are located in the plugin folder. You’ll copy the file you want to modify into your child theme.

Go to wp-content/plugins/woocommerce/templates/.
Locate the file archive-product.php.
Copy it into your child theme under a folder named /woocommerce/.
- Final Path: wp-content/themes/your-theme-child/woocommerce/archive-product.php.

Step 3: Edit the Template to Add Buy Buttons

Now let’s edit the copied archive-product.php to add Buy Now buttons for specific categories.

Locate the Product Loop

Inside archive-product.php, look for this code (or similar):

<?php if ( woocommerce_product_loop() ) : ?>

    <?php woocommerce_product_loop_start(); ?>

    <?php while ( have_posts() ) : ?>
        <?php the_post(); ?>
        <?php wc_get_template_part( 'content', 'product' ); ?>
    <?php endwhile; ?>

    <?php woocommerce_product_loop_end(); ?>

<?php endif; ?>

This is where WooCommerce outputs the product loop.

Add Custom Buy Buttons

Inside the product loop, insert your custom code to add a Buy Now button. Replace the part that calls the default product template (wc_get_template_part('content', 'product');) with a custom section.

Here’s an example:

<?php if ( have_posts() ) : ?>
    <div class="products">
        <?php while ( have_posts() ) : the_post(); ?>
            <div class="product">
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail(); ?>
                    <h2><?php the_title(); ?></h2>
                </a>

                <!-- Check if the product belongs to the desired category -->
                <?php
                $categories = wp_get_post_terms( get_the_ID(), 'product_cat', ['fields' => 'slugs'] );
                if ( in_array( 'your-category-slug', $categories ) ) : ?>
                    <!-- Add a Buy Now button -->
                    <a href="?add-to-cart=<?php echo get_the_ID(); ?>" class="button buy-now">
                        Buy Now
                    </a>
                <?php endif; ?>
            </div>
        <?php endwhile; ?>
    </div>
<?php else : ?>
    <p>No products found.</p>
<?php endif; ?>

Explanation:

get_the_ID(): Gets the current product’s ID.
wp_get_post_terms(): Retrieves the product categories.
?add-to-cart=PRODUCT_ID: Adds the product to the cart with a direct link.

Step 4: Style the Button

Add some CSS to style the “Buy Now” button. Place this in your child theme’s style.css file:

.button.buy-now {
  background-color: #28a745;
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
}

.button.buy-now:hover {
  background-color: #218838;
}

Step 5: Test Your Changes

Visit your WooCommerce category page.
Check if the “Buy Now” buttons are displayed for the specific category.
Click the button to ensure the product is added to the cart.

Optional: Redirect After Add to Cart

If you want the “Buy Now” button to redirect directly to the checkout page, add this to your functions.php file:

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

You’re Done! 🎉

Now your WooCommerce category pages have custom “Buy Now” buttons that work only for certain categories. You can adapt this tutorial to fit your store’s needs, like adding different actions or styling.

Bonus adding Quanity button next to buy.

How to Add a Quantity Input Next to the “Buy Now” Button in WooCommerce Category Pages

Adding a quantity input alongside the “Buy Now” button lets your customers buy multiple items in one click. Here’s how you can update your WooCommerce category page template to include this functionality.

Step 1: Update the Product Loop Code

Modify the code in your archive-product.php file to include a quantity input field. Replace the current “Buy Now” section with the following:

<?php if ( have_posts() ) : ?>
    <div class="products">
        <?php while ( have_posts() ) : the_post(); ?>
            <div class="product">
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail(); ?>
                    <h2><?php the_title(); ?></h2>
                </a>

                <!-- Check if the product belongs to the desired category -->
                <?php
                $categories = wp_get_post_terms( get_the_ID(), 'product_cat', ['fields' => 'slugs'] );
                if ( in_array( 'your-category-slug', $categories ) ) : ?>
                    <!-- Add quantity input and Buy Now button -->
                    <form action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post" class="buy-now-form">
                        <input type="hidden" name="add-to-cart" value="<?php echo get_the_ID(); ?>">
                        <label for="quantity-<?php echo get_the_ID(); ?>" class="screen-reader-text">Quantity</label>
                        <input type="number" id="quantity-<?php echo get_the_ID(); ?>" name="quantity" value="1" min="1" class="quantity-input">
                        <button type="submit" class="button buy-now">Buy Now</button>
                    </form>
                <?php endif; ?>
            </div>
        <?php endwhile; ?>
    </div>
<?php else : ?>
    <p>No products found.</p>
<?php endif; ?>

Explanation:

Form Setup:
- The form element posts data to WooCommerce’s cart system using the add-to-cart and quantity parameters.
Hidden Input:
- The add-to-cart hidden field ensures WooCommerce knows which product to add to the cart.
Quantity Input:
- The <input> field allows users to select a quantity. Default value is 1, with a minimum of 1.

Step 2: Style the Quantity Input

Add some CSS to style the quantity input and make it fit well next to the “Buy Now” button. Place this in your style.css file:

.buy-now-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-input {
  width: 60px;
  padding: 5px;
  font-size: 16px;
  text-align: center;
}

.button.buy-now {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.button.buy-now:hover {
  background-color: #0056b3;
}

Step 3: Test the Functionality

Navigate to your WooCommerce category page.
Try selecting different quantities using the input field and click “Buy Now.”
Check the cart to confirm the correct quantity is added.

Optional: Quantity Validation

To ensure users can’t submit invalid quantities (like zero or negative numbers), WooCommerce automatically validates this on the backend. However, you can add a bit of JavaScript for immediate feedback:

document.querySelectorAll(".quantity-input").forEach((input) => {
  input.addEventListener("change", (event) => {
    if (event.target.value < 1) {
      alert("Quantity must be at least 1.");
      event.target.value = 1;
    }
  });
});

You’re All Set! 🎉

Your WooCommerce category pages now have a quantity input alongside the “Buy Now” button, making it easier for customers to buy multiple items at once.