根据变化更改WooCommerce变量产品标题 [英] Change WooCommerce variable product title based on variation

问题描述

我正在寻找一些帮助，以使WooCommerce变量产品标题根据版本而更改.在这种特定情况下，我希望在选择颜色时更改标题，例如产品名黑色".

I'm looking for some help getting the WooCommerce variable product title to change based on variations. In this specific case I would like the title to change when a color is selected, like "Productname Black".

有没有简单的代码片段可以使其正常工作?

Is there any easy snippet to get this to work?

推荐答案

更新 2018年2月
以下代码将为所选变体的color属性vakue添加标题，这意味着有很多选择字段(许多属性)，只有在出现变化价格(选定变化)时，彩色文本值才会显示在标题中.它基于PHP和jQuery，因为它是客户端浏览器端的实时事件.

UPDATE FEB 2018
The following code, will add to title the color attribute vakue of the chosen variation, meaning that if there is many select fields (many attributes), the color text value will be displayed in the title only once the variation price will appear (selected variation). its based on PHP and jQuery as it's a live event on client browser side.

代码:

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('pa_color');

    // 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 = 'pa_color';
                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
}

代码会出现在您活动的子主题(或主题)的function.php文件或任何插件文件中.

经过测试，可以正常工作……您会得到类似的东西:

Tested and works… you will get something like:

这篇关于根据变化更改WooCommerce变量产品标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！