WooCommerce Plus- und Minus-Schaltflächen

Ich bin Webentwickler und möchte mit WooCommerce meinen eigenen Webshop erstellen. Aber ich habe ein Problem, die Plus- und Minus-Schaltflächen auf der Produktseite werden nicht angezeigt. Weiß jemand, wie man diese Schaltflächen erhält (um vielleicht irgendwo Code hinzuzufügen)?

Du musst die „Mengeneingabe“ von woocommerce in deinem Child-Theme überschreiben. Diese befindet sich unter Plugins -> WooCommerce -> Templates -> Global -> Mengeneingabe. Kopieren Sie den Inhalt aus dieser Datei. Erstellen Sie in Ihrem Theme-Ordner ein ‚WooCommerce‘-Verzeichnis. Erstellen Sie in diesem Verzeichnis einen weiteren Ordner mit dem Namen „global“. Fügen Sie den Inhalt hier ein.

Suchen Sie den Code

<input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />

Fügen Sie darüber diesen Codeabschnitt hinzu

<input class="minus" type="button" value="-">

und dieses Stück darunter

<input class="plus" type="button" value="+">

Ihr Gesamtcode würde so aussehen:

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
?>
<div class="quantity">
<input class="minus" type="button" value="-">
<input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input class="plus" type="button" value="+">
</div>

@RollYourOwnEd Aktualisiertes Javascript, das verhindern kann, dass die Menge in den Minuswert geht:

$('.plus').on('click',function(e){

var val = parseInt($(this).prev('input').val());

$(this).prev('input').val( val+1 );


});
$('.minus').on('click',function(e){

var val = parseInt($(this).next('input').val());
if(val !== 0){
    $(this).next('input').val( val-1 );
} });

Sie müssen hinzufügen .change();

Besser in deinem yourtheme/woocommerce/global/quantity-input.php
Auf diese Weise funktioniert es auch auf der Warenkorbseite.

<script type="text/javascript">
    jQuery(document).ready(function($){
    $('.quantity').on('click', '.plus', function(e) {
        $input = $(this).prev('input.qty');
        var val = parseInt($input.val());
        $input.val( val+1 ).change();
    });

    $('.quantity').on('click', '.minus', 
        function(e) {
        $input = $(this).next('input.qty');
        var val = parseInt($input.val());
        if (val > 0) {
            $input.val( val-1 ).change();
        } 
    });
});
</script> 

Sie müssen dies auch zu Ihrem Javascript hinzufügen:

$('.plus').on('click',function(e){

    var val = parseInt($(this).prev('input').val());

    $(this).prev('input').val( val+1 );


});

$('.minus').on('click',function(e){

    var val = parseInt($(this).next('input').val());

    $(this).next('input').val( val-1 );


});

Zeigen Sie auf der linken Seite die Einheiten (Zahl mit “+” und “-“) an, die für jedes Produkt mit der Schaltfläche “In den Warenkorb” auf der rechten Seite hinzugefügt werden sollen. Geben Sie den folgenden Code ein Funktionen.php Datei und CSS-Code hinzufügen style.css Datei.

//1. Show Buttons
add_action( 'woocommerce_before_add_to_cart_quantity', 'display_quantity_plus' );
function display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}
add_action( 'woocommerce_after_add_to_cart_quantity', 'display_quantity_minus' );
function display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}
//2. Trigger jQuery script
add_action( 'wp_footer', 'add_cart_quantity_plus_minus' );
function add_cart_quantity_plus_minus() {
   // Only 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
}

CSS-Code

.woocommerce div.product .entry-summary .cart div.quantity{
    float: none;
    margin: 0;
    display: inline-block;
}
.woocommerce div.product form.cart .button {
    vertical-align: middle;
    float: none;
}