根据属性值选择更改可变 woocommerce 产品的标题

Question

当有人选择变量时，我想更改 Woocommerce 变量产品标题。我想将选定的变体添加到标题。 我已经使用了这个Change WooCommerce variable product title based on variation 代码它对于从 product->attributes 添加的属性非常有效。但是我希望它适用于我们在添加产品时添加的自定义产品属性。

我尝试了上面链接中提供的代码，但它不适用于自定义产品属性。它返回一个空值。 colorr 是我使用自定义产品属性添加的属性名称 这是我的代码。任何帮助都将受到高度评价

add_filter( 'wp_footer','custom_product_title_script' );
function custom_product_title_script(){
    global $post;

    // Only single product pages
    if( ! is_product() ) return;

    // get an instance of the WC_Product Object
    $product = wc_get_product($post->ID);

    // Only for variable products
    if( ! $product->is_type( 'variable' ) ) return;

    // Here set your specific product attributes in this array (coma separated):
    $attributes = array('colorr');

    // The 1st loop for variations IDs
    foreach($product->get_visible_children( ) as $variation_id ) {

        // The 2nd loop for attribute(s)/value
        foreach($product->get_available_variation( $variation_id )['attributes'] as $key => $value_id ){
            $taxonomy = str_replace( 'attribute_', '', $key ); // Get the taxonomy of the product attribute

            // Just for defined attributes
            if( in_array( $taxonomy, $attributes) ){
                // Set and structure data in an array( variation ID => product attribute => term name )
                $data[ $variation_id ][$taxonomy] = get_term_by( 'slug', $value_id, $taxonomy )->name;
            }
        }
    }

    ?>
        <script type="text/javascript">
            (function($){
                // variables initialization
                var variationsData = <?php echo json_encode($data); ?>,
                    productTitle = $('.product_title').text(),
                    color = 'colorr';
                console.log(variationsData);

                // function that get the selected variation and change title
                function update_the_title( productTitle, variationsData, color ){
                    $.each( variationsData, function( index, value ){
                        if( index == $('input.variation_id').val() ){
                            $('.product_title').text(productTitle+' - '+value[color]);
                            console.log('TITLE UPDATED');
                            return false;
                        } else {
                            $('.product_title').text(productTitle);
                        }
                    });
                }

                // Once all loaded
                setTimeout(function(){
                    update_the_title( productTitle, variationsData, color );
                }, 300);

                // On live event: select fields
                $('select').blur( function(){
                    update_the_title( productTitle, variationsData, color );
                });
            })(jQuery);
        </script>
    <?php
}

Answer 1

不知道你为什么使用 php，这完全是前端任务 - 所以应该使用前端 js。
请将此 js 添加到 外部 javascript 文件（注入 js inline 的做法非常糟糕，尤其是 jquery - 它会阻止 defer optimization） 它是如何工作的：

1. 获取默认标题文本到 var
2. 收集所有选择的变体并添加到默认标题文本
3. 为标题设置新文本

jQuery( document ).ready( function( $ ) {
    var title_text = $( '.product-type-variable .product_title' ).text(); // get default title
    function add_variation_txt_to_title() {
        var new_title_text = '';
        $( '.variations select' ).each( function() {
            new_title_text += ' ' + $( this ).find( ':selected' ).val(); // collect all variation selected <options>
        })
        $( '.product-type-variable .product_title' ).text( title_text + new_title_text ); // set new title
    }
    add_variation_txt_to_title(); // call on load
    $( '.variations select' ).change( function() { // call on <select >change 
        add_variation_txt_to_titl();
    })
})

在默认的二十七主题上测试的解决方案。