Change WooCommerce variable product title based on variation

大兔子大兔子 提交于 2019-12-06 03:42:40

问题


Im 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? Thankfull for all the help i can get.


回答1:


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.

The code:

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
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Tested and works… you will get something like:



来源:https://stackoverflow.com/questions/47462265/change-woocommerce-variable-product-title-based-on-variation

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!