Woocommerce: Change text on order button

Question

I am using WooCommerce for a nonprofit website and want to change the "Place Order" button text to say "Place Donation". The button is defined in WooCommerce's payment.php file:

<?php echo apply_filters( 'woocommerce_order_button_html', 
    '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" 
    id="place_order" value="' . esc_attr( $order_button_text ) . 
    '" data-value="' . esc_attr( $order_button_text ) . '" />' ); ?>

I added the following to my functions.php file in the child theme:

function custom_order_button_text($order_button_text){
    $order_button_text = 'Place Donation';

    return $order_button_text;
}
add_filter('woocommerce_order_button_text', 'custom_order_button_text');

It momentarily seems to work, but changes back to 'Place Order' before the page finishes loading. The output HTML ends up as:

<input type="submit" class="button alt" name="woocommerce_checkout_place_order" 
id="place_order" value="Place order" data-value="Place Donation">

*Update: I turned off javascript and found that the button then said "Place Donation." I then found a script in woocommerce/assets/js/frontend/checkout.js as part of payment_method_selected

if ( $( this ).data( 'order_button_text' ) ) {
    $( '#place_order' ).val( $( this ).data( 'order_button_text' ) );
} else {
    $( '#place_order' ).val( $( '#place_order' ).data( 'value' ) );
}

Not sure the best way to override this. Any ideas?

score 5 · Answer 1 · answered Oct 06 '18 at 10:11

5

You can change the "Place Order" button text to say "Place Donation" using simple woocommerce hook as below..

/* Add to the functions.php file of your theme/plugin */

add_filter( 'woocommerce_order_button_text', 'wc_custom_order_button_text' ); 

function wc_custom_order_button_text() {
    return __( 'Place Donation', 'woocommerce' ); 
}

Hope this will help to someone else. Thanks

answered Oct 06 '18 at 10:11

Ibnul Hasan

431
5
13

this is being applied for all products, how to make this used only for products price > $0 ? – Srinivas08 Oct 04 '20 at 15:03
@Srinivas08 - This is not for products page in fact. It's for Place Order button text change which is on Checkout page only. What are you actually looking for ? – Ibnul Hasan Oct 08 '20 at 06:56
I want to show as Buy Package for all products, for Free Products ($0 value) , this is external product btw , I want to show Get Free Package ... – Srinivas08 Oct 11 '20 at 07:45
You can do it with the code below add_filter( 'woocommerce_product_single_add_to_cart_text', 'wps_custom_add_to_cart_text', 10, 2 ); add_filter( 'woocommerce_product_add_to_cart_text', 'wps_custom_add_to_cart_text', 10, 2 ); function wps_custom_add_to_cart_text( $text, $product ) { if ( $product->get_price() <= 0 ) { return __( 'Get Free Package', 'textdomain' ); } else return __('Buy Package', 'textdomain'); return $text; } – Ibnul Hasan Oct 12 '20 at 14:48
This worked , earlier I was using 20 lines of codes for this, and still It didn't worked on product page. my code was seperated for archive, shop, cart pages. This code is working for all the pages – Srinivas08 Oct 13 '20 at 11:47
late reply, @Srinivas08 really nice to see it worked ! – Ibnul Hasan Dec 12 '22 at 04:48

score 3 · Accepted Answer · answered Feb 03 '17 at 16:05

3

Just came across the same issue myself. What I did to solve it is close to your solution.

Instead of dequeueing it completely I dequeued it and uploaded the excact same script to my child theme + commented out

 `/* if ( $( this ).data( 'order_button_text' ) ) {
    $( '#place_order' ).val( $( this ).data( 'order_button_text' ) );
} else {
    $( '#place_order' ).val( $( '#place_order' ).data( 'value' ) );
}*/ `

The PHP:

`add_action('wp_enqueue_scripts', 'override_woo_frontend_scripts');
function override_woo_frontend_scripts() {
    wp_deregister_script('wc-checkout');
    wp_enqueue_script('wc-checkout', get_template_directory_uri() . '/../storefront-child-theme-master/woocommerce/checkout.js', array('jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n'), null, true);
}    `

answered Feb 03 '17 at 16:05

billy

68
6

Thanks @Freddynøkken. This works, and I'm happy to accept as the answer. With the caveat that we'll need to be careful about future WooCommerce updates that might change the original file. – dpruth Feb 03 '17 at 21:06
Thank you! Yes I'm gonna keep an eye on that in future updates. – billy Feb 06 '17 at 08:10
That the only way right now to change the button text. Worked perfectly – Abdalla Arbab May 30 '18 at 17:47

bramchi · Answer 3 · 2019-09-19T13:43:36.463

Your attempts to change the button text are valid, but WooCommerce has a nasty bit of JavaScript that overrules it all, as you discovered.

What I did to avoid that, is change the order button's ID using a filter in the functions.php file, so the faulty WooCommerce JavaScript doesn't affect it.

function so37729878_update_order_button_id( $button_html ) {
    $button_html = str_replace( 'id="place_order"', 'id="place_order_updated_to_fix_translation"', $button_html );
    return $button_html;
}
add_filter( 'woocommerce_order_button_html', 'so37729878_update_order_button_id' );

This way you don't have to swap out any WooCommerce scripts. The order form still gets submitted properly, although I'm not 100% sure if other behaviour breaks with this approach.

I like this solution better! Just be sure to copy WooCommerce's CSS rules for `#place_order` to your theme's stylesheet and obviously make the selector the new ID. — William Beaumont, Apr 10 '22 at 19:07

score 0 · Answer 4 · answered Oct 09 '19 at 07:13

You can replace text using this method.

add_filter( 'woocommerce_order_button_html', 'custom_button_html' );

function custom_button_html( $button_html ) {
    $button_html = str_replace( 'Place order', 'Submit', $button_html );
    return $button_html;
}

score 0 · Answer 5 · answered Feb 05 '22 at 20:06

0

I solved this by using CSS:

#place_order { 
    font-size: 0px !important;
}

#place_order::after {
  content: 'Place Donation';
  font-size: 15px;
}

answered Feb 05 '22 at 20:06

akmalmzamri

1,035
1
15
31

Ernesto Toledo · Answer 6 · 2023-07-11T02:20:35.243

Also with CSS, without changing text size:

.woocommerce-cart .wc-proceed-to-checkout a{      
    color: rgba(0, 0, 0, 0);    
}
    
.woocommerce-cart .wc-proceed-to-checkout a:hover{    
            color: rgba(0, 0, 0, 0);    
    }
        
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after {    
          position:absolute;    
            content: 'Donate'; 
            left: 0px;
            right: 0px;
            margin: 0 auto;
            color: rgba(0, 0, 0, 1);    
}

Woocommerce: Change text on order button

6 Answers6

Linked