WooCommerce 数量减号和加号图标未显示

Question

我在 WooCommerce 产品页面上显示

+

和

-

数量图标时遇到一些问题。

经过大量研究，我发现由于某种奇怪的原因，WordPress 为有问题的对象提供了错误的类名（设置

'fas fa-plus-circle'

而不是

'fa fa-plus-circle'

），这就是它不显示图标的原因。

我已经尝试了一千种方法，在主题文件编辑器中使用 JavaScript 和 PHP 将类更改为正确的类（有关信息，我正在使用 Astra 主题）。

我还尝试使用 Elementor 的 HTML 小部件修复它，但我也无法使其像那样工作。

如果有任何帮助，我将非常感激。

Answer 1

如果有多个数量字段，例如在产品循环（存档页面...）或购物车页面中，以下代码将处理多个加号/减号 FontAwesome 图标...此 jQuery 代码已排队并适用于“减号圆”和“plus-circle”FontAwesome 图标。

代码将选择器类

fas

替换为

fa

，以表示“减号圆”和“加号圆”FontAwesome 图标：

add_action('template_redirect', 'fontawesome_5_free_quantity_buttons_js', 10);
function fontawesome_5_free_quantity_buttons_js() {
    wc_enqueue_js("$('i.fa-minus-circle,i.fa-plus-circle').each( function(index) {
    if( $(this).hasClass('fas') && ! $(this).hasClass('fa') ) {
        $(this).removeClass('fas').addClass('fa');
    }
    });");
}

代码位于子主题的functions.php 文件中（或插件中）。已测试并有效。

说明：生成这些加/减 FontAwesome 图标的插件或自定义代码使用 FontAwesome 6 free (

fas

)... WooCommerce 默认启用并使用 FontAwesome 5 Free (

fa

) .