在 Woocommerce 可变产品页面上运行 jQuery 脚本答案

【问题标题】：Run a jQuery script on Woocommerce variable product pages在 Woocommerce 可变产品页面上运行 jQuery 脚本
【发布时间】：2021-02-02 19:29:34
【问题描述】：

我有这个 jQuery，它可以更改 WooCommerce 产品页面的产品变体。它在 FireFox 控制台中工作得很好，但是当我添加它时它对页面没有影响。为了让它最后加载，我将代码放在页脚中。在此之后没有任何加载。可能是 WooCommerce 自己的 jQuery 在页面加载后加载了我要定位的元素（？）。我不知道，但我已经与它抗争了很长时间，是时候寻求帮助了。

jQuery('.variations select option').each(function() {
    if ( jQuery(this).is(':disabled') ) {
        jQuery(this).css('display','none');
    }
});

谢谢

【问题讨论】：

请在下面的答案中提供一些反馈。

标签： php jquery wordpress woocommerce product

【解决方案1】：

您需要在DOM 完全加载后选择元素，对于 jQuery，您只需将代码放在事件处理程序中即可准备好文档，如下所示。在大多数情况下，WordPress 将 HTML 结构放置在较低的位置是不够的。

jQuery(document).ready(function(){
    jQuery('.variations select option').each(function() {
        if ( jQuery(this).is(':disabled') ) {
            jQuery(this).css('display','none');
        }
    });
});

【讨论】：

【解决方案2】：

要仅针对产品变体单页，您可以使用以下钩子函数，使用您的 jQuery 重新访问代码（等待 DOM 完全加载）：

add_action( 'woocommerce_after_variations_form', 'jquery_script_after_variations_form' );
function jquery_script_after_variations_form() {
    ?>
    <script type="text/javascript">
    (function($){
        $('.variations select option').each( function() {
            if ( $(this).is(':disabled') ) {
                $(this).css('display','none');
            }
        });
    })(jQuery);
    </script>
    <?php
}

代码位于活动子主题（或活动主题）的functions.php 文件中。它应该可以工作。

【讨论】：