Adding a second Add to Cart button on your WooCommerce product pages can help improve the user experience, especially for stores with lengthy product descriptions or multiple purchasing options. This guide will show you how to add an additional Add to Cart button to your WooCommerce product pages using custom code in your theme’s functions.php file. This second button can be particularly useful for enhancing visibility and accessibility, ensuring customers have an easy way to make a purchase without scrolling back to the top.
Before proceeding, it’s wise to use a child theme to ensure your modifications are preserved through theme updates. If you haven’t created one yet, you can use our free WordPress child theme generator to easily set up a child theme.
Method 1
Step 1: Adding the Second Add to Cart Button
To add a second Add to Cart button, we’ll use a function in your theme’s functions.php file that hooks into an appropriate action in the WooCommerce template. Here’s how to add this button at the bottom of the product page:
/**
* Snippet: How to Add a Second Add to Cart Button on WooCommerce Product Pages – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1479
* Tested with WooCommerce 10.7.0
* "Add a second add to cart button at the bottom of product pages"
*/
function wcsuccess_add_second_add_to_cart_button() {
global $product;
echo '<div class="extra-add-to-cart-button" style="text-align: center; padding: 20px;">';
echo '<form action="' . esc_url($product->add_to_cart_url()) . '" method="post" enctype="multipart/form-data">';
woocommerce_quantity_input(array('min_value' => 1, 'max_value' => $product->get_max_purchase_quantity()), $product);
echo '<button type="submit" class="button alt">' . esc_html($product->add_to_cart_text()) . '</button>';
echo '</form>';
echo '</div>';
}
add_action('woocommerce_after_single_product', 'wcsuccess_add_second_add_to_cart_button');
This code creates a form with a quantity input and an Add to Cart button and places it after the product’s details on single product pages. It uses WooCommerce functions to handle the cart URL and button text, ensuring compatibility with various product types.
Step 2: Styling the Second Add to Cart Button
To ensure that the second Add to Cart button matches your site’s aesthetics and stands out to users, add some CSS to your theme’s style sheet or through the WordPress customizer. Here’s an example of basic styling:
.extra-add-to-cart-button {
background-color: #f9f9f9;
margin-top: 20px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
}
.extra-add-to-cart-button .button {
padding: 10px 30px;
font-size: 16px;
color: white;
background-color: #333;
border: none;
border-radius: 5px;
}
.extra-add-to-cart-button .button:hover {
background-color: #555;
}
This CSS will give the second Add to Cart button a distinctive, easily clickable appearance with a subtle shadow for better visibility.
Method 2
Using the built-in woocommerce_template_single_add_to_cart function
/**
* Snippet: How to Add a Second Add to Cart Button on WooCommerce Product Pages – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1479
* Tested with WooCommerce 10.7.0
* "Add a second add to cart button at the bottom of product pages using built in add to cart button"
*/
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_single_add_to_cart', 9999 );When deciding between custom coding an additional Add to Cart button on WooCommerce product pages and using the built-in woocommerce_template_single_add_to_cart function, the best approach depends on your specific needs and the level of customization you desire.
Using woocommerce_template_single_add_to_cart
Pros:
- Consistency: Utilizing the
woocommerce_template_single_add_to_cartfunction ensures that the button behaves consistently with WooCommerce’s default settings and styles. This can be particularly important for maintaining a uniform user experience across your site. - Compatibility: This function is designed to work seamlessly with different product types (simple, variable, grouped, etc.), automatically adjusting the Add to Cart button based on the product’s specific attributes and variations.
- Ease of Use: It requires less custom coding, reducing the potential for bugs and errors. It also means that you’re less likely to encounter issues during WooCommerce updates, as you’re using a core function that is likely to be maintained and supported in future releases.
Cons:
- Limited Customization: While it’s convenient, using this function offers less flexibility if you want to add custom features or significantly alter the button’s appearance or behaviour beyond standard options.
Custom Coding a Second Add to Cart Button
Pros:
- Flexibility: Custom coding allows you to design and position the button exactly as you want. You can add custom functionalities, styles, and even integrate it with other plugins or scripts to enhance its capability.
- Control: You have complete control over the button’s HTML structure and can easily add additional elements like icons, tooltips, or custom labels.
Cons:
- Complexity: Custom coding requires a higher level of development skill and understanding of WooCommerce and WordPress hooks and filters. Incorrect coding can lead to bugs and potentially affect the stability and security of your site.
- Maintenance: Custom solutions may require more maintenance over time, especially with updates to WooCommerce or WordPress that could affect how your custom code interacts with the platform.
Recommendation
If your needs are straightforward and you want to ensure maximum compatibility and ease of maintenance, using woocommerce_template_single_add_to_cart is likely the best approach. This method is particularly effective if you simply want to replicate the existing functionality of the Add to Cart button elsewhere on your product page without additional modifications.
However, if you require a highly customized solution — such as a button with different actions, styles that do not match WooCommerce’s defaults, or additional interactive elements — then custom coding the button might be necessary.
Conclusion
By adding a second Add to Cart button to your WooCommerce product pages, you improve the shopping experience by making it easier for customers to make a purchase decision from any point on the page. This feature is especially useful for products with extensive details, specifications, or for stores where upselling and cross-selling are important.
Remember, when making modifications to your theme, using a child theme is crucial to prevent losing your changes after a theme update. Our free WordPress child theme generator is an excellent resource to help you manage these changes effectively.
Implementing this second Add to Cart button not only enhances functionality but also potentially increases conversion rates by keeping the purchase option continually in view as customers explore product details.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
