How to change add to cart button text for specific variable products on single page in WooCommerce

All we need is an easy explanation of the problem, so here it is.

I have a few variable products on my website. Among those only on a few specific products, I have added two variations on those products one is "carbon fiber" and other is "unpainted" now what I want is when user clicks on 2nd variation which is "unpainted" the text of add to cart button should change from "add to cart" button to "made to order. I have updated my question to be more specific
Below is the code First part code is jQuery to display the variations on my single product page and the second to change the name of variations for specific products:

 window.addEventListener('load', (event) => {



var initialvalue=jQuery('#pa_choose-option').val();
if(initialvalue=="carbon-fibre")
jQuery('.single_variation_wrap .single_add_to_cart_button').html("Add To 
Cart");

jQuery('#pa_choose-option').on('change', function() {
console.log("here");
var initialvalue=jQuery('#pa_choose-option').val();
if(initialvalue!="carbon-fibre")
jQuery('.single_variation_wrap .single_add_to_cart_button').html("Made 
to Order");
 else
jQuery('.single_variation_wrap .single_add_to_cart_button').html("Add To 
Cart");

});


});


add_filter( 'woocommerce_product_single_add_to_cart_text', 
'custom_addtocart_button_text', 10, 2 ); 
function custom_addtocart_button_text( $button_text, $product ) {
// 1st product
if ( $product->get_id() == 6577 ) {
    $button_text = __( 'jawad', 'woocommerce' );
} 
// 2nd product
elseif ( $product->get_id() == 6570 ) {
    $button_text = __( 'kiani', 'woocommerce' );
}
return $button_text;
}

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You can use show_variation trigger. try the below code.

function change_add_to_cart_text_based_on_variation(){
    global $post;
    
    $specific_ids = array( 6594, 6577 );

    if( is_product() && in_array( $post->ID, $specific_ids ) ){
        ?>
        <script type="text/javascript">
            (function($){
                $( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
                    if( variation.attributes['attribute_pa_choose-option'] == 'unpainted' ){
                        jQuery('.single_variation_wrap .single_add_to_cart_button').html( "Made to Order" );
                    }else{
                        jQuery('.single_variation_wrap .single_add_to_cart_button').html( "Add To Cart" );
                    }
                } );

                $( document ).on('click', '.reset_variations', function(event) {
                    event.preventDefault();
                    jQuery('.single_variation_wrap .single_add_to_cart_button').html("Add To Cart");
                });

            })(jQuery);
        </script>
        <?php
    }
}
add_action( 'wp_footer', 'change_add_to_cart_text_based_on_variation', 10, 1 );

Tested and works.

How to change add to cart button text for specific variable products on single page in WooCommerce

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply