Those who own an online store always want to make shopping easy for their customers. You are no different.
What if they had the option to add a product to their cart? Or buy it right away? It would save them time and make their shopping experience smoother. By adding two buttons, for example, "Add to Cart" and "Buy Now," you can give customers more control. Or maybe other buttons that can make your customer shopping easier.
Today, I'll show you how to easily add these buttons to your WooCommerce product page. Let’s make your store even better!
7 Steps To Add Two Buttons to the WooCommerce Product Page
Just simply follow these easy and simple steps,
1. Access Your WordPress Dashboard
First, log in to your WordPress admin panel. Here, you’ll make the changes.
Read the relevant article, How to Protect Wp-login.php and Plugins.php?
2. Create a Child Theme (Optional but Helpful)
Before you make any changes, try to create a child theme.
Why?
Your main theme will be safe. If your theme gets updated later, you won’t lose the changes you made. If you already have a child theme, skip this.
3. Find the Product Page Template
Next, go to
Appearance > Theme File Editor
Search for the single-product.php file. If you can’t find it, check inside a folder. Most often, it is named WooCommerce. Product page templates are stored in this section.
4. Add the Button HTML
Now, it's time to add the buttons. For example, you may want to add the “Add to Cart” button. In the product template, there should already be a code. If not, then add two buttons, the “Add to Cart” and the "Buy Now" button, next to it. Add the button HTML where you want them to appear: above or below the product description.
Here’s an example:
<div class="WooCommerce-buttons">
<button type="submit" class="single_add_to_cart_button button alt">Add to Cart</button>
<a href="https://your-site.com/checkout" class="buy-now-button button">Buy Now</a>
</div>Replace the link (https://your-site.com/checkout) with your actual checkout page link. This makes the "Buy Now" button take the user straight to the checkout.
5. Customize the Button Actions
If the Add to Cart button is already set up by WooCommerce. Now, there is no need to change that. For the Buy Now button, all you need to do is link it to the checkout page. This skips the cart. And lets the customer buy the product faster.
6. Style the Buttons
You want the buttons to look nice, right? You can add some simple CSS to style them. Check this example:
.woocommerce-buttons .buy-now-button {
background-color: #ff6600;
color: white;
padding: 10px 20px;
margin-left: 10px;
border-radius: 5px;
}
.woocommerce-buttons .single_add_to_cart_button {
background-color: #4CAF50;
}You can add this CSS by going to
Appearance > Customize > Additional CSS
Or directly in the theme's style file.
7. Test the Buttons
Finally, check your product page. Make sure the "Add to Cart" button works as usual. Then, click the "Buy Now" button to see if it takes you to the checkout.
Conclusion
Now that you’ve added the "Add to Cart" and "Buy Now" buttons, your WooCommerce store is more user-friendly. Customers can choose how they want to shop, whether they’re browsing or ready to buy. This small change can make a big difference in their shopping experience. It’s simple, but it helps you keep your customers happy and coming back. Try it out.
