How To Add Subscribe Button To Woocommerce Blog

WooCommerce can be used with plenty of WordPress themes, and every theme has a different way of laying out and styling the different features. In this post, we will talk about the quantity feature, more specifically about the buttons that we click to increase and decrease the quantity of a product before adding it to the Cart, or while updating the Cart. While in many themes, these buttons are denoted by the "+" and "-" signs to add and reduce the quantity respectively, themes such as the Storefront theme display the up and down arrows for the same, by default (see image below). For such themes, let's explore how to add + and – buttons to the quantity input on the product page in WooCommerce.

add plus + and minus - buttons to the quantity input on the product page in WooCommerce using code snippets and plugins - the default quantity input arrows — The quantity input arrows on the StoreFront Theme when the mouse is hovered on it.

There are multiple ways of doing this i.e. using plugins or code snippets.

Using code snippets to add plus + and minus – buttons to the quantity input on the product page

You can use a simple code snippet consisting of PHP, JQuery and CSS to add plus (+) and (-) buttons in place of the up and down arrows to increase and decrease the quantity respectively. Start with adding the below PHP & JQuery snippets to the functions.php file of your child theme:

add_action( 'woocommerce_after_add_to_cart_quantity', 'ts_quantity_plus_sign' );   function ts_quantity_plus_sign() {    echo '<button type="button" class="plus" >+</button>'; }   add_action( 'woocommerce_before_add_to_cart_quantity', 'ts_quantity_minus_sign' );  function ts_quantity_minus_sign() {    echo '<button type="button" class="minus" >-</button>'; }   add_action( 'wp_footer', 'ts_quantity_plus_minus' );   function ts_quantity_plus_minus() {    // To run this on the single product page    if ( ! is_product() ) return;    ?>    <script type="text/javascript">                  jQuery(document).ready(function($){                           $('form.cart').on( 'click', 'button.plus, button.minus', function() {               // Get current quantity values             var qty = $( this ).closest( 'form.cart' ).find( '.qty' );             var val   = parseFloat(qty.val());             var max = parseFloat(qty.attr( 'max' ));             var min = parseFloat(qty.attr( 'min' ));             var step = parseFloat(qty.attr( 'step' ));               // Change the value if plus or minus             if ( $( this ).is( '.plus' ) ) {                if ( max && ( max <= val ) ) {                   qty.val( max );                }              else {                qty.val( val + step );                  }             }              else {                if ( min && ( min >= val ) ) {                   qty.val( min );                }                 else if ( val > 1 ) {                   qty.val( val - step );                }             }                        });                  });               </script>    <?php }

After adding the above PHP and JQuery code snippets, we will refresh the product page:

add plus + and minus - buttons to the quantity input on the product page in WooCommerce using code snippets and plugins - buttons added to the quantity input using code snippets

You can see that the plus (+) and minus (-) buttons have been added next to the quantity input element. However, we need to add some styles / CSS in order for the buttons to render properly. If you're using popular themes such as the StoreFront theme, you will have an option to add additional CSS by clicking on Customize on the front-end itself.

.single-product div.product form.cart .quantity {     float: none;     margin: 0;     display: inline-block; }

You will see that the buttons now appear on both sides of the quantity input:

add plus + and minus - buttons to the quantity input on the product page in WooCommerce using code snippets and plugins - buttons displayed on both sides of the quantity input using CSS

In this way, you can use code snippets with ease to add these buttons on the product page. However, in order to display plus(+) and minus(-) buttons on the Cart page, it would be a good idea to use plugins which work for both purposes instead of using these code snippets.

Using plugins to add plus + and minus – buttons to the quantity input on the product page and Cart page

In order to add buttons on the product as well as the Cart page, there are two free plugins available:

Qty Increment Buttons for WooCommerce: This is an easy-to-use plugin that renders the buttons on both the product and Cart pages. Additionally, you have an option to render the buttons on the Shop and/or Category pages depending on what you choose under "Archives Display":

add plus + and minus - buttons to the quantity input on the product page in WooCommerce using code snippets and plugins - Choosing whether to display quantity buttons on Shop and Category pages using this plugin

If you want to load the buttons on all pages and not just on the product, Cart, Checkout, Shop and Category pages, you can check the next option i.e. "Load on all pages".

You can see that there are various ways you can style the buttons too. There is also a plugin by the same author known as Ajax Cart Autoupdate for WooCommerce in order to update the Cart real-time i.e. using Ajax, upon increasing or decreasing the quantity.

SMNTS WooCommerce Quantity Buttons: This is also an easy plugin but has very few options in terms of styling. The only advantage it offers over the previous plugin is that it comes with an option of disabling the buttons on either the Cart or the Product page (if there is such a requirement) using just one line of code, as mentioned on the plugin homepage. It also manages to remove the default up and down arrows inside the quantity input element.

In this way, you can use plugins or code snippets based on your requirements to add plus + and minus – buttons to the quantity input in WooCommerce.

Browse more in: Uncategorized