Integrating the JavaScript directly into the footer of your WooCommerce pages can be a streamlined way to implement functionality without creating a separate JS file. This method ensures that the script is loaded where it is needed, potentially improving page load times and simplifying site maintenance. In this guide, we’ll show you how to add plus and minus quantity buttons to your WooCommerce product pages by injecting JavaScript directly into the footer using a PHP snippet.
Before you start, it’s advisable to use a child theme to ensure that your modifications are maintained through theme updates. If you haven’t yet created a child theme, you can use our free WordPress child theme generator to do so.
Step 1: Add JavaScript to the Footer
To add the necessary JavaScript to the footer, we’ll use the wp_footer action hook. This approach allows us to include the script on all pages without modifying core files or adding external scripts. Insert the following code into your theme’s functions.php file:
/*
* Snippet: Integrating Plus & Minus Quantity Buttons Directly into the Footer for WooCommerce – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1474
* Tested with WooCommerce 10.7.0
* "Add plus and minus button functionality directly to the footer"
*/
function wcsuccess_add_quantity_buttons_script() {
if (is_product() || is_shop() || is_product_category()) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(document).on('click', '.quantity-plus', function(e) {
e.preventDefault();
var quantityBox = $(this).siblings('input.qty');
var currentQuantity = parseInt(quantityBox.val());
quantityBox.val(currentQuantity + 1);
});
$(document).on('click', '.quantity-minus', function(e) {
e.preventDefault();
var quantityBox = $(this).siblings('input.qty');
var currentQuantity = parseInt(quantityBox.val());
if (currentQuantity > 1) {
quantityBox.val(currentQuantity - 1);
}
});
});
</script>
<?php
}
}
add_action('wp_footer', 'wcsuccess_add_quantity_buttons_script');
This PHP function checks if the current page is either a product page, shop page, or category page before injecting the JavaScript. The script provided enables the functionality of the plus and minus buttons adjacent to the quantity input.
Step 2: Modify the Quantity Input Template
Now that we have our JavaScript ready to be injected, let’s ensure our quantity input includes plus and minus buttons. Update the quantity input with this custom HTML by adding the following function to your functions.php:
/*
* Snippet: Integrating Plus & Minus Quantity Buttons Directly into the Footer for WooCommerce – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1474
* Tested with WooCommerce 10.7.0
* "Customize quantity input to include plus and minus buttons"
*/
function wcsuccess_custom_quantity_input() {
global $product;
$html = '<div class="quantity"><button type="button" class="quantity-minus">-</button>';
$html .= woocommerce_quantity_input(array(), $product, false);
$html .= '<button type="button" class="quantity-plus">+</button></div>';
return $html;
}
add_filter('woocommerce_quantity_input', 'wcsuccess_custom_quantity_input', 10, 2);
This modification hooks into the woocommerce_quantity_input filter, outputting a custom HTML structure for the quantity input that now includes clickable plus and minus buttons.
Conclusion
By integrating this JavaScript directly into the footer and adjusting your quantity input template, you enhance the user experience on your WooCommerce site by making it easier for customers to adjust product quantities. This method keeps your site organized and reduces the number of external script files.
Using a child theme for these modifications is crucial to ensure they are not overwritten during theme updates. If you need to create a child theme, our free WordPress child theme generator is an excellent resource.
With these enhancements, your WooCommerce store will offer a smoother and more intuitive shopping experience, encouraging more interactions and potentially increasing sales.
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
