php - 在 WooCommerce 中将数量输入字段更改为下拉列表

Question

我在 function.php 中使用了以下内容，它在单个产品页面上效果很好。我遇到的问题是在购物车页面上，当您选择不同的数量时，它不会自动更新购物车。有任何想法吗？

function woocommerce_quantity_input( $args = array(), $product = null, $echo = true ) {
  
   if ( is_null( $product ) ) {
      $product = $GLOBALS['product'];
   }
 
   $defaults = array(
      'input_id' => uniqid( 'quantity_' ),
      'input_name' => 'quantity',
      'input_value' => '1',
      'classes' => apply_filters( 'woocommerce_quantity_input_classes', array( 'input-text', 'qty', 'text' ), $product ),
      'max_value' => apply_filters( 'woocommerce_quantity_input_max', -1, $product ),
      'min_value' => apply_filters( 'woocommerce_quantity_input_min', 0, $product ),
      'step' => apply_filters( 'woocommerce_quantity_input_step', 1, $product ),
      'pattern' => apply_filters( 'woocommerce_quantity_input_pattern', has_filter( 'woocommerce_stock_amount', 'intval' ) ? '[0-9]*' : '' ),
      'inputmode' => apply_filters( 'woocommerce_quantity_input_inputmode', has_filter( 'woocommerce_stock_amount', 'intval' ) ? 'numeric' : '' ),
      'product_name' => $product ? $product->get_title() : '',
   );
 
   $args = apply_filters( 'woocommerce_quantity_input_args', wp_parse_args( $args, $defaults ), $product );
  
   // Apply sanity to min/max args - min cannot be lower than 0.
   $args['min_value'] = max( $args['min_value'], 0 );
   // Change 6 to max quantity
   $args['max_value'] = 0 < $args['max_value'] ? $args['max_value'] : 6;
 
   // Max cannot be lower than min if defined.
   if ( '' !== $args['max_value'] && $args['max_value'] < $args['min_value'] ) {
      $args['max_value'] = $args['min_value'];
   }
  
   $options = '';
    
   for ( $count = $args['min_value']; $count <= $args['max_value']; $count = $count + $args['step'] ) {
 
      // Cart item quantity defined?
      if ( '' !== $args['input_value'] && $args['input_value'] >= 1 && $count == $args['input_value'] ) {
        $selected = 'selected';      
      } else $selected = '';
 
      $options .= '<option value="' . $count . '"' . $selected . '>' . $count . '</option>';
 
   }
     
   $string = '<div class="quantity"><span>Qty</span><select name="' . $args['input_name'] . '">' . $options . '</select></div>';
 
   if ( $echo ) {
      echo $string;
   } else {
      return $string;
   }
  
} 

标签： phpjquerywordpresswoocommercecart

Answer 1

注意：首先，出于多种原因，您永远不应该覆盖 WooCommerce 核心文件。所以是禁止的。

作为woocommerce_quantity_input()函数调用模板文件global/quantity-input.php，您可以通过您的子主题覆盖该模板。

要了解如何覆盖模板，请仔细阅读：通过 WooCommerce 中的主题覆盖模板。

现在，从您的网站上删除所有相关的数量更改和代码（恢复一切如前）。

然后将位于 WooCommerce 插件 > 模板 > 全局中的文件复制 到您的子主题到“woocommerce”文件夹>“全局”子文件夹中。quantity-input.php

完成后，打开/编辑它，并将模板内容替换为：

<?php
/**
 * Product quantity inputs
 *
 * This template can be overridden by copying it to yourtheme/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/
 * @package WooCommerce\Templates
 * @version 4.0.0
 */

defined( 'ABSPATH' ) || exit;

if ( $max_value && $min_value === $max_value ) {
    ?>
    <div class="quantity hidden">
        <input type="hidden" id="<?php echo esc_attr( $input_id ); ?>" class="qty" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $min_value ); ?>" />
    </div>
    <?php
} else {
    /* translators: %s: Quantity. */
    $label = ! empty( $args['product_name'] ) ? sprintf( esc_html__( '%s quantity', 'woocommerce' ), wp_strip_all_tags( $args['product_name'] ) ) : esc_html__( 'Quantity', 'woocommerce' );
    ?>
    <div class="quantity">
        <?php do_action( 'woocommerce_before_quantity_input_field' ); ?>
        <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_attr( $label ); ?></label>
        <?php
        if ( is_cart() ) :
        ?>
        <input
            type="hidden"
            id="<?php echo esc_attr( $input_id ); ?>"
            class="<?php echo esc_attr( join( ' ', (array) $classes ) ); ?>"
            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' );
        ?>" />
        <?php
        endif;

        $options = ''; // Initializing

        for ( $i = $min_value; $i <= $max_value; $i += $step ) :
            $selected = ( '' !== $input_value && $input_value >= 1 && $i == $input_value ) ? 'selected' : '';
            $options .= '<option value="' . $i . '"' . $selected . '>' . $i . '</option>';
        endfor;
        // Change input name on select field
        $attr_name = is_cart() ? 'data-name' : 'name';
        ?>
            <select <?php echo $attr_name; ?>="<?php echo $input_name; ?>"><?php echo $options; ?></select>
        <?php do_action( 'woocommerce_after_quantity_input_field' ); ?>
    </div>
    <?php
}

现在需要一些 jQuery 代码，才能在购物车页面上运行。

// jQuery - cart jQuery script for quantity dropdown
add_action( 'woocommerce_after_cart', 'cart_quantity_dropdown_js' );
function cart_quantity_dropdown_js() {
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $(document.body).on('change blur', 'form.woocommerce-cart-form .quantity select', function(e){
            var t = $(this), q = t.val(), p = t.parent();
            $(this).parent().find('input').val($(this).val());
            console.log($(this).parent().find('input').val());
        });
    });
    </script>
    <?php
}

此代码位于活动子主题（或活动主题）的functions.php文件中。

---

现在要将最大数量限制为 6，添加以下代码：

// Restricting product max quantity to 6  
add_filter( 'woocommerce_quantity_input_args', 'woocommerce_quantity_input_args_callback', 10, 2 );
function woocommerce_quantity_input_args_callback( $args, $product ) {
    $args['max_value'] = 6;

    return $args;
}

// Restricting product variation max quantity to 6
add_filter( 'woocommerce_available_variation', 'filter_woocommerce_available_variation', 10, 3);
function filter_woocommerce_available_variation( $data, $product, $variation ) {
    $data['max_qty'] = 6;

    return $data;
}

此代码位于活动子主题（或活动主题）的functions.php文件中。

现在它可以在任何地方工作 （在 Storefront 主题下的最后一个 WooCommerce 版本上测试）。