Woocommerce: Change text on order button

2 Views

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:

Read More
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?

Post Views: 2

Related posts

Leave a Reply

6 comments

  1. 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

  2. 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);
}    `

  3. 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.

  4. 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;
}

  5. I solved this by using CSS:

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

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

  6. 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);    
}