Question

我在启用了WooCommerce的WordPress网站的主页内创建了“最新产品”行。我现在想要实现的是在价格条目的任一侧插入一个图标。

我知道如何通过硬编码将<i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i>直接添加到网络文件中，但是我使用了WooCommerce短代码来调用这些产品，因此我不知道如何才能实现这一目标。我使用的短代码是：[recent_products per_page="4" columns="4"]

我是否需要输入 functions.php 文件？

对此事的任何帮助，将不胜感激。

Answer 1

有多种方法可以做到，在这里你得到2个......

1）最简单的方法（假设适用于简单产品）是使用挂在 woocommerce_price_html 过滤器挂钩中的自定义功能来显示您的产品价格这个图标：

add_filter( 'woocommerce_price_html', 'prepend_append_icon_to_price', 10, 2 );
function prepend_append_icon_to_price( $price, $instance ) {
    // For home page only and simple products
    if(is_front_page()){
        // Your icon
        $icon = ' <i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i> ';
        // Prepending and appending your icon around the price.
        $price = $icon . $price . $icon;
    }
    return $price;
}

代码进入活动子主题（或主题）的function.php文件或任何插件文件中。

此代码经过测试并有效。

2）您还可以使用隐藏在 wp_footer 动作挂钩中的自定义函数向jQuery注入您的图标价格：

add_action( 'wp_footer', 'prepend_append_icon_to_price' );
function prepend_append_icon_to_price() {
    if(is_front_page()){
    ?>
        <script>
            (function($){
                var myIcon = ' <i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i> ';
                $('.home .woocommerce .price').prepend( myIcon ).append( myIcon );
            })(jQuery);
        </script>
    <?php
    }
}

代码进入活动子主题（或主题）的function.php文件或任何插件文件中。

此代码经过测试并有效。

为产品价格添加自定义图标

1 个答案: