Javascript 将图像悬停在 WooCommerce 单一产品中时替换标题

发布于09月02日

我想要替换WooCommerce中悬停在the product image上的产品标题，而不是标题本身.我很感激任何人的建议，因为我找不到任何与我的问题有关的答案.

我试过使用CSS:hover、::after和::after:hover，但我无法更改产品标题文本，因为悬停操作实际上与图像相关，而不是标题.所以我被困住了，不确定如何解决这个问题.

推荐答案

更新(code improvement: enable the feature in product shortcode and blocks)

对于WooCommerce单一产品页面，您可以使用以下选项来更改产品标题，当您将产品图像"悬停"时:

add_action('woocommerce_before_single_product_summary', 'single_product_script_js' );
function single_product_script_js() {
    // Here set the text replacement for the product title
    $text = __("Text replacement", "woocommerce");
    
    wc_enqueue_js("const productTitle  = $('.product_title').html(), textReplacement = '{$text}';
    $('body').on('mouseover mouseout', '.woocommerce-product-gallery__image', function(e) {
        $('.product_title').html(e.type === 'mouseover' ? textReplacement : productTitle);
    });");
}

代码位于您的子主题的unctions.php文件中(或在插件中).经过测试，效果良好.

初始答案代码:

add_action('wp_footer', 'wp_footer_product_script_js' );
function wp_footer_product_script_js() {
    if( is_product() ) :
    // Here set the text replacement for the product title
    $text = __("Text replacement", "woocommerce");
    ?>
    <script>
    jQuery(function($) {
        const productTitle  = $('.product_title').html(),    
            textReplacement = '<?php echo $text; ?>';
        $('body').on('mouseover mouseout', '.woocommerce-product-gallery__image', function(e) {
            $('.product_title').html(e.type === 'mouseover' ? textReplacement : productTitle);
        });
    });
    </script>
    <?php
    endif;
}