Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #3169008
Adding selected variant in title
Closed

Comments

  •  1
    Ramdanlal started the conversation
    November 17, 2022 at 12:07am

    Hi, i am using WPC Sticky Add To Cart for WooCommerce. Love it.

    But it would be better if when I select a variant of a product the product name changes accordingly.

    Now the image only changes. But I need the title to change aswell showing the variant selected.

    Could I tweak the source code? Can you instruct me? Thank you.

    Thanks. 

  •  767
    Janilyn replied
    November 17, 2022 at 11:13am

    Hi Ramz,

    Thank you for contacting WPClever Support Forum. 

    We’ve received your ticket and assigned one of our developers to help you with that. 

    He’ll be looking into your question and responding with specific instructions as soon as possible. 

    Please stay patient as we're having very heavy workloads, it might take some time for our developers to reach back.

    Best regards.

    Janilyn T. - WPClever Support Agent

  •  153
    Henry replied
    November 17, 2022 at 3:57pm

    Please send me your web link. I will write code and test it.

    Best regards,
    Henry N.

  •  1
    Ramdanlal replied
    November 18, 2022 at 2:13am

    hi Henry,

    Thanks. Here you go: https://pastebin.com/gamPv8ab

    Additionally it would be amazing if you could make the image - see attachment - clickable. Because the source is a full size image. 

    Thank you.

  •  153
    Henry replied
    November 20, 2022 at 5:43am

    Hi,

    Please add the below custom code (How to add custom code?)

    // Wpclever team support ticket-3169008
add_action( 'woocommerce_after_single_product', function(){
    global $product;
    if( $product && $product->is_type('variable') ) {
    ?>
    <script type="text/javascript">
    (function($) {
        $(document).ready(function(event){
            $('.wpcsb-product-name').each(function(){
                $(this).attr('data-name', $(this).text());
            });
        });
        $(document.body).on('found_variation', function(e, t) {
            var $form_cart = $(e['target']).closest('form.cart');
            
            if( $form_cart.length && typeof t['attributes'] !== undefined ) {
                var attributes = Object.keys(t['attributes']).map((key) => [t['attributes'][key]]);
                var variation_text = attributes.join(', ');
                if( variation_text !== '' && $(this).attr('data-name') !== '' ) {
                    $('.wpcsb-product-name').each(function(){
                        var me = $(this);
                        var html = me.attr('data-name') + '<span class="wpcsb-custom-name">' + ' - ' + variation_text + '</span>';
                        
                        me.html( html );
                    });
                } else {
                    $('.wpcsb-product-name').each(function(){
                        var me = $(this);
                        
                        me.html( me.attr('data-name') );
                    });
                }
            }
        });
        $(document).on('reset_data', function(e) {    
            var $form_cart = $(e['target']).closest('form.cart');
            
            if( $form_cart.length ) {
                $('.wpcsb-product-name').each(function(){
                    var me = $(this);
                    me.html( me.attr('data-name') );
                });
            }
        });
    })(jQuery);
    </script>
    <?php
    }
}, PHP_INT_MAX );

    + Product: https://www.fairtradepalestine.org/product/fairtrade-olijfolie-zeep-uit-palestina/

    Best regards,
    Henry N.

  •   Ramdanlal replied privately
  •  153
    Henry replied
    November 22, 2022 at 2:39am

    Hi,

    Could you make it compatible with ProductX? It's a popular Woocommerce addon to build custom pages.

    Please see this custom page: https://pastebin.com/DJBi7Mvy

    ---------

    + Sorry but it seems that I don’t get your question right.

    Best regards,
    Henry N.

  •   Ramdanlal replied privately
  •  153
    Henry replied
    November 24, 2022 at 2:06am

    Hi,

    Try this:

    Please add the below custom code (How to add custom code?)

    // Wpclever team support ticket-3169008
add_action( 'woocommerce_after_single_product', function(){
    ?>
    <script type="text/javascript">
    (function($) {
        $(document).ready(function(event){
            $('.wpcsb-product-name').each(function(){
                $(this).attr('data-name', $(this).text());
            });
        });
        $(document.body).on('found_variation', function(e, t) {
            var $form_cart = $(e['target']).closest('form.cart');
            
            if( $form_cart.length && typeof t['attributes'] !== undefined ) {
                var attributes = Object.keys(t['attributes']).map((key) => [t['attributes'][key]]);
                var variation_text = attributes.join(', ');
                if( variation_text !== '' && $(this).attr('data-name') !== '' ) {
                    $('.wpcsb-product-name').each(function(){
                        var me = $(this);
                        var html = me.attr('data-name') + '<span class="wpcsb-custom-name">' + ' - ' + variation_text + '</span>';
                        
                        me.html( html );
                    });
                } else {
                    $('.wpcsb-product-name').each(function(){
                        var me = $(this);
                        
                        me.html( me.attr('data-name') );
                    });
                }
            }
        });
        $(document).on('reset_data', function(e) {    
            var $form_cart = $(e['target']).closest('form.cart');
            
            if( $form_cart.length ) {
                $('.wpcsb-product-name').each(function(){
                    var me = $(this);
                    me.html( me.attr('data-name') );
                });
            }
        });
    })(jQuery);
    </script>
    <?php
}, PHP_INT_MAX );

    + Product for test: https://www.fairtradepalestine.org/product/fairtrade-olijfolie-zeep-uit-palestina/

    Best regards,
    Henry N.

  •   Ramdanlal replied privately
  •  153
    Henry replied
    November 25, 2022 at 8:54am

    To avoid wasting your time, 

    Please send me your website credentials (wp-admin link, username, password) then I can check and fix this issue for you.

    + Or try to add the below custom code (How to add custom code?):

    // Wpclever team support ticket-3169008
add_action( 'wp_footer', function(){
    ?>
    <script type="text/javascript">
    (function($) {
        $(document).ready(function(event){
            $('.wpcsb-product-name').each(function(){
                $(this).attr('data-name', $(this).text());
            });
        });
        $(document.body).on('found_variation', function(e, t) {
            var $form_cart = $(e['target']).closest('form.cart');
            
            if( $form_cart.length && typeof t['attributes'] !== undefined ) {
                var attributes = Object.keys(t['attributes']).map((key) => [t['attributes'][key]]);
                var variation_text = attributes.join(', ');
                if( variation_text !== '' && $(this).attr('data-name') !== '' ) {
                    $('.wpcsb-product-name').each(function(){
                        var me = $(this);
                        var html = me.attr('data-name') + '<span class="wpcsb-custom-name">' + ' - ' + variation_text + '</span>';
                        
                        me.html( html );
                    });
                } else {
                    $('.wpcsb-product-name').each(function(){
                        var me = $(this);
                        
                        me.html( me.attr('data-name') );
                    });
                }
            }
        });
        $(document).on('reset_data', function(e) {    
            var $form_cart = $(e['target']).closest('form.cart');
            
            if( $form_cart.length ) {
                $('.wpcsb-product-name').each(function(){
                    var me = $(this);
                    me.html( me.attr('data-name') );
                });
            }
        });
    })(jQuery);
    </script>
    <?php
}, PHP_INT_MAX );

    Best regards,
    Henry N.

  •  1
    Ramdanlal replied
    November 26, 2022 at 1:18pm

    Hi Henry,

    The last code you sent worked! Thanks for your effort!!! 

    You can mark this thread as resolved.