Change button text after product selection

hi @ninsu

You will probably need to write some JavaScript. What have you tried?

function wpb_woo_change_order_button_text() {
return 'Dodaj do koszyka';
}
add_filter( 'woocommerce_order_button_text', 'wpb_woo_change_order_button_text' );

Code above worked for single product page.

In the inspector of browser this element looks like:

<a  data-quantity="1" class="button product_type_variable add_to_cart_button cfvsw_ajax_add_to_cart cfvsw_variation_found" data-product_id="972" data-product_sku="1-5-1-1" aria-label="Wybierz opcje dla ?Skarpety Buddies!”" aria-describedby="This product has multiple variants. The options may be chosen on the product page" rel="nofollow" data-product_name="Skarpety Buddies!" data-price="39" data-add_to_cart_text="Add to Cart" data-select_options_text="Wybierz opcje" data-variation_id="980" data-selected_variant="{&quot;attribute_skarpety-rozmiar&quot;:&quot;43-46&quot;}">Add to Cart</a>

If I change text of <a> attribute it changes text on button, but don’t know how to implement it permanently.
Also I tried edit some CSS, but without success.

button product_type_variable.add_to_cart_button.data-add_to_cart_text {
	content: 'TEST';
}

Let me clarify something. Are you trying to say that you want the button to say “Dodaj do koszyka” until someone chooses a size, then you want the text to change?

Exactly like that

Fun, but I don’t think the DOM is set up for you to be able to do that with CSS. I still think this would be much easier and more reliable (most the time) with JS, because browsers just aren’t all allowing people to essentially navigate DOM with CSS (which is what you’d need, using .cfvsw-swatches-option.cfvsw-selected-swatch as a trigger).

jQuery( document ).ready( function($) {
    let default_text = $( ".cart button" ).text(); // you might need to be more specific with this selector
    $( document ).on( "click", ".cfvsw-swatches-option", function() {
        if ( $( ".cfvsw-selected-swatch" )  ) { // or use hasClass()
            $( ".cart button" ).html( "New button text" );
        } 
    });
    $( document ).on( "click", ".reset_variations", function() {
        $( ".cart button" ).html( default_text );
    });
}); 

Here’s some example jQuery I wrote that might work “out-of-the-box.” I don’t usually write code for free but I have a thing for MTB and socks so I made an exception today. Any changes you’ll need to make on your own or with assistance of your developer.

Thank you. I really appreciate that. Unfortunately, didn’t work for me. I tried to be more specific and did some changes to the code but with no result.

Where did you put the code, or how did you enqueue it? It should go in the footer. It works in the browser console for your site, so I know it pretty much should work unmodified if installed correctly.

I put it through some code plugin as a JS.

• This reply was modified 1 year, 4 months ago by ninsu.
• This reply was modified 1 year, 4 months ago by ninsu.

https://imgur.com/MHhsQN9

Works as delivered. Without it installed on your site I cannot help you further.

Yeah. I did the same. I tried two different browsers – nothing happend. That’s weird. Gotta figure it out somehow.