覆盖 WooCommerce 全局模板 quantity-input.php 以获得更好的移动端数量输入体验答案

【问题标题】：Override WooCommerce global template quantity-input.php for better quantity input experience on mobile覆盖 WooCommerce 全局模板 quantity-input.php 以获得更好的移动端数量输入体验
【发布时间】：2019-03-07 15:27:45
【问题描述】：

我希望 WooCommerce 在使用移动设备时更好地处理数量字段输入。我希望移动浏览器显示一个数字键盘，而不是显示一个完整的键盘供用户输入数量字段。

我可以通过修改quantity-input.php来实现

pattern="<?php echo esc_attr( $pattern ); ?>"
inputmode="<?php echo esc_attr( $inputmode ); ?>"

到

pattern="[0-9]*"
inputmode="numeric"

在

wp-content/plugins/woocommerce/templates/global/quantity-input.php

但显然直接修改 WooCommerce 的 php 文件是一个糟糕的想法，所以我需要一些关于这种修改的最佳实践的指导。

我一直在 Wordpress 中使用一个名为 Code Snippet 的插件，它运行良好。我怎样才能通过代码把它放到我的网站上？

我发现一篇文章提到使用过滤器 here 在 WooCommerce 中覆盖模板文件，但我不熟悉，因为我是 Wordpress / WooCommerce 新手

似乎要走的路是使用过滤器wc_get_template_part 和/或woocommerce_locate_template，但我不知道该怎么做。

欢迎提出任何建议。

【问题讨论】：

标签： php wordpress woocommerce input-field product-quantity

【解决方案1】：

您可以简单地使用woocommerce_quantity_input_args 专用过滤器挂钩，例如：

add_filter( 'woocommerce_quantity_input_args', 'filter_quantity_input_args_callback', 10, 2 );
function filter_quantity_input_args_callback( $args, $product ) {
    $args['pattern']   = '[0-9]*';
    $args['inputmode'] = 'numeric';

    return $args;
}

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

或者用这两个过滤器钩子代替（效果相同）：

add_filter( 'woocommerce_quantity_input_pattern', 'filter_quantity_input_pattern_callback', 10, 1 );
function filter_quantity_input_pattern_callback( $input_pattern ) {
    return '[0-9]*';
}

add_filter( 'woocommerce_quantity_input_inputmode', 'filter_quantity_input_inputmode_callback', 10, 1 );
function filter_quantity_input_inputmode_callback( $inputmode ) {
    return 'numeric';
}

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

【讨论】：