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

Question

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

我可以通过从

修改数量-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 的插件，它运行良好。我怎样才能使用它把代码放到我的网站上？

我找到了一个 post，其中提到使用过滤器 here 在 WooCommerce 中覆盖模板文件，但我不熟悉它，因为我是 Wordpress / WooCommerce 的新手

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

欢迎提出任何建议。

Answer 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 文件。已测试并有效。

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

Override WooCommerce global template quantity-input.php for better quantity input experience on mobile

php

wordpress

input-field

woocommerce

product-quantity