WooCommerce 显示 "used for variations" 复选框（自定义产品类型）

Question

我创建了一个名为 vp_extended 的自定义变量产品类型。默认情况下，当我添加名为 "Size" 的属性时，复选框 "Used for variations" 不会显示在属性下。所以当我添加以下代码时：

<?php
function producttype_custom_js() {

    if ( 'product' != get_post_type() ) :
        return;
    endif;
?>
   <script type='text/javascript'>
       jQuery( document ).ready( function($) {

            $('.enable_variation').addClass('show_if_vp_extended').show();

      });
   </script>
<?php 
} 
add_action( 'admin_footer', 'producttype_custom_js' );

复选框正在显示，我可以使用它。问题是，当我选择添加另一个属性（例如性别）时，页面加载了一点，然后两个属性都缺少复选框 "used for variations"。

当我检查 CSS 中的元素时，我可以看到我的 class "show_if_vp_extended" 是添加到 ".enable_variation" class 在 first 元素上，样式表示 display = block（这里都很好）。但是当我将第二个属性添加到产品时，它不会得到我的 class and 第一个元素将 CSS 更改为 "display: none" 但仍然有我的vp-扩展 class.

我在这里错过了什么或做错了什么？

JavaScript函数作用于1个属性时的图片：

选择增加1个属性时的图片：

Answer 1

新添加的属性不在 DOM 中，因此您的代码不会影响它。我相信每次添加属性时您都需要运行您的代码。

类似这样的方法可能有效：

$( 'body' ).on( 'woocommerce_added_attribute', function( event ){
    $('.woocommerce_attribute_data .enable_variation').addClass('show_if_vp_extended').show();
});

或者大量借鉴订阅，这可能更完整：

$('body').on('woocommerce_added_attribute', function(){
    if ($('select#product-type').val()=='vp_extended') {

        $( 'input#_downloadable' ).prop( 'checked', false );
        $( 'input#_virtual' ).removeAttr( 'checked' );

        $('.show_if_variable').show();
        $('.hide_if_variable').hide();
        $('.show_if_vp_extended').show();
        $('.hide_if_vp_extended').hide();
        $( 'input#_manage_stock' ).change();

    }
});

WooCommerce 显示 "used for variations" 复选框（自定义产品类型）

WooCommerce show "used for variations" tickbox (custom product type)

javascript

php

wordpress

woocommerce

hook-woocommerce