Created
February 24, 2017 18:09
-
-
Save helgatheviking/6abe7385c23ba4238710ba6d1ccc5181 to your computer and use it in GitHub Desktop.
Add plus and minus buttons to WooCommerce quantity inputs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Product quantity inputs with plus/minus buttons | |
* | |
* Save this template to your theme as woocommerce/global/quantity-input.php. | |
* | |
* HOWEVER, on occasion WooCommerce will need to update template files and you | |
* (the theme developer) will need to copy the new files to your theme to | |
* maintain compatibility. We try to do this as little as possible, but it does | |
* happen. When this occurs the version of the template file will be bumped and | |
* the readme will list any important changes. | |
* | |
* @see https://docs.woocommerce.com/document/template-structure/ | |
* @author WooThemes | |
* @package WooCommerce/Templates | |
* @version 2.5.0 | |
*/ | |
if ( ! defined( 'ABSPATH' ) ) { | |
exit; // Exit if accessed directly | |
} | |
if ( $max_value && $min_value === $max_value ) { | |
?> | |
<input type="hidden" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $min_value ); ?>" /> | |
<?php | |
} else { | |
?> | |
<div class="quantity"> | |
<input class="minus" type="button" value="-"> | |
<input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" /> | |
<input class="plus" type="button" value="+"> | |
</div> | |
<?php | |
} |
Thanks for the Vanilla, @samholguin
@samholguin Thanks for the vanilla!
Based on the html structure above, the plusBtns forEach should have:
const input = btn.previousElementSibling;
and the minusBtns forEach should have:
const input = btn.nextElementSibling;
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Vanilla for those that may need: