WooCommerce产品数量的选项如图所示，这是一个HTML5的数字输入框，代码表现为
<input type="number" id="***" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" placeholder="" inputmode="numeric"> |
这样的输入框可以让用户输入任意数字，直接把一定数量的产品加入购物车。但在一些场合下，用户其实还是更希望有个下拉菜单形式的输入框，从而可以直接选择想要购买的数量。这种场合比较适用于购买数量不多，或者日常库存不多的产品，比如不超过20件的情况。因为如果数量一多，恐怕整个屏幕高度都不够下拉列表的数字显示，反而会对用户造成更大的不方便。
下来菜单其实就是一个select元素，替换掉原来的数字框，在商品页面的前后页面表现是这样的：
同时，在购物车里也有一个数字框需要替换，替换的前后页面表现是这样的：
要实现这个修改，需要到WooCommerce的templates文件夹，找到 global/quantity-input.php 文件，把它复制到 主题目录/woocommerce/global/ 位置，然后打开进行修改。
在这个文件中，找到属性为type=”number”的input元素，大致就是这样一段代码：
把这一段替换为：
<?php //数字20指如果商品没有规定最大购买数量，则显示最大购买20个 $max_value = esc_attr( 0 < $max_value ? $max_value : 20 ); $options = ''; for ( $count = $min_value; $count <= $max_value; $count = $count+$step ) { $selected = $count === $input_value ? ' selected' : ''; $options .= '<option value="' . $count . '"'.$selected.'>' . $count . '</option>'; } echo '<select name="' . esc_attr( $input_name ) . '" title="' . _x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) . '" class="qty" >' . $options . '</select>'; ?> |
如此就同时实现了在商品页面和购物车页面两处商品数量选框的替换。
本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/2602.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。
本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。