Change Pay Button on Checkout Based on Woocommerce Chosen Payment Method

Change Pay button on checkout based on Woocommerce chosen payment method

This can be done with the following code (where you will set your payment gateway IDs and the corresponding desired button text):

add_filter('woocommerce_order_button_text', 'custom_order_button_text' );
function custom_order_button_text( $order_button_text ) {
    $default = __( 'Place order', 'woocommerce' ); // If needed
    // Get the chosen payment gateway (dynamically)
    $chosen_payment_method = WC()->session->get('chosen_payment_method');

    // Set your payment gateways IDs in EACH "IF" statement
    if( $chosen_payment_method == 'bacs'){
        // HERE set your custom button text
        $order_button_text = __( 'Bank wire payment', 'woocommerce' ); 
    } elseif( $chosen_payment_method == 'ry_ecpay_atm'){
        // HERE set your custom button text
        $order_button_text = __( 'Place order via ECPay', 'woocommerce' ); 
    }
    // jQuery code: Make dynamic text button "on change" event ?>
    <script type="text/javascript">
    (function($){
        $('form.checkout').on( 'change', 'input[name^="payment_method"]', function() {
            var t = { updateTimer: !1,  dirtyInput: !1,
                reset_update_checkout_timer: function() {
                    clearTimeout(t.updateTimer)
                },  trigger_update_checkout: function() {
                    t.reset_update_checkout_timer(), t.dirtyInput = !1,
                    $(document.body).trigger("update_checkout")
                }
            };
            t.trigger_update_checkout();
        });
    })(jQuery);
    </script><?php

    return $order_button_text;
}

Code goes in function.php file of your active child theme (or theme). Tested and works.

Change Pay button with image on checkout based on Woocommerce chosen payment method

As in the frontend the button text will be changed by using .text() function of jQuery, adding html like img tag won't work here.

I suggest instead though to you use javascript with jQuery. It should be something like this:

$( document.body ).on( 'payment_method_selected', function(){
    var selectedPaymentMethod = $( '.woocommerce-checkout input[name="payment_method"]:checked' ).attr( 'id' );
    $( '#place_order' ).find('.payment-icon');
    $( '#place_order' ).prepend('<span class="payment-icon '+ selectedPaymentMethod +'"></span>'); // or any element like from font-awesome.
});
$( document.body ).trigger( 'payment_method_selected' ); // this will trigger on page load, act as initialize the icon.

The script above will add a span tag with classes payment-icon and an ID of the selected payment method. You can then use css to add your icon as background in this span.

How to change woocommerce checkout button for payment gateway?

When you use add_filter, you'll always need to return the content you would like to filter or modify. Therefore, in your case, the code would look like this below.

add_filter( 'woocommerce_order_button_html', 'custom_order_button_html');
function custom_order_button_html( $button ) {

    // The text of the button
    $order_button_text = __(' order', 'woocommerce');

    // HERE you make changes (Replacing the code of the button):
    $button = '<div id="custom_Checkout_Button"></div>';

    // Return the modified/filtered content
    return $button;
}

You can find more usage examples here.

Change checkout submit button text for a specific payment method in WooCommerce

You can do it like this:

add_filter( 'woocommerce_available_payment_gateways', 'woocommerce_available_payment_gateways' );
function woocommerce_available_payment_gateways( $available_gateways ) {
    if (! is_checkout() ) return $available_gateways;  // stop doing anything if we're not on checkout page.
    if (array_key_exists('paypal',$available_gateways)) {
        // Gateway ID for Paypal is 'paypal'. 
         $available_gateways['paypal']->order_button_text = __( 'Request a Quote', 'woocommerce' );
    }
    return $available_gateways;
}

This code example is for paypal. For reference of the gateway IDs, please check WooCoomerce > Settings > Checkout > Gateway display order

Custom class checkout submit button text for a specific payment method in WooCommerce

You can do this by javascript. you can check payment_method on the change of radio button.

Get selected payment method using :checked.

var payment_method = $('input[name=payment_method]:checked').val();

You can also check on page load which payment method is selected using
the updated_checkout javascript trigger.

$( 'body' ).on( 'updated_checkout',function( data ){
    console.log( data );
} );

Use the change event to get the selected payment method.

$(document).on( 'change', 'input[name="payment_method"]', function(){
    console.log( $(this).val() );
});

Check the below code. code goes in your active theme functions.php file.

function add_checkout_js(){
    ?>
    <script type="text/javascript">
        (function($){
            
            var payment_method = $('input[name=payment_method]:checked').val();
            
            ChnageButtonTextBasedOnPaymentMethod( payment_method );

            $( 'body' ).on( 'updated_checkout',function( data ){
                ChnageButtonTextBasedOnPaymentMethod( payment_method );
            } );
            
            $(document).on( 'change', 'input[name="payment_method"]', function(){
                ChnageButtonTextBasedOnPaymentMethod( $(this).val() );
            });

            function ChnageButtonTextBasedOnPaymentMethod( payment_method ){
                if( payment_method == 'bacs' ){
                    $('#place_order').addClass('custom-class');
                    $('#place_order').val('Order Pay');
                    $('#place_order').attr('data-value','Order Pay');
                    $('#place_order').html('Order Pay <img style="display: unset;" src="">');
                }else{
                    $('#place_order').removeClass('custom-class');
                    $('#place_order').val('Place order');
                    $('#place_order').attr('data-value','Place order');
                    $('#place_order').text('Place order');
                }
            }
            
        })(jQuery);
    </script>
    <?php
}

add_action( 'wp_footer', 'add_checkout_js', 10, 1 );

Tested and works(Sorry for the low quality)

Hide Place Order button for specific payment methods in Woocommerce

Update: It's a bit less complicated than you thought, but needs some jQuery to refresh checkout… Try the following instead:

add_filter('woocommerce_order_button_html', 'remove_place_order_button_for_specific_payments' );
function remove_place_order_button_for_specific_payments( $button ) {
    // HERE define your targeted payment(s) method(s) in the array
    $targeted_payments_methods = array('cheque');
    $chosen_payment_method     = WC()->session->get('chosen_payment_method'); // The chosen payment

    // For matched payment(s) method(s), we remove place order button (on checkout page)
    if( in_array( $chosen_payment_method, $targeted_payments_methods ) && ! is_wc_endpoint_url() ) {
        $button = ''; 
    }
    return $button;
}

// jQuery - Update checkout on payment method change
add_action( 'wp_footer', 'custom_checkout_jquery_script' );
function custom_checkout_jquery_script() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('form.checkout').on('change', 'input[name="payment_method"]', function(){
            $(document.body).trigger('update_checkout');
        });
    });
    </script>
    <?php
    endif;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

Related: Change Pay button on checkout based on Woocommerce chosen payment method

How to change woocommerce checkout page payment mode options?

you need to look in to review-order.php inside checkout folder, then look for this part of code:

foreach ( $available_gateways as $gateway ) {
                    ?>
    <li class="payment_method_<?php echo $gateway->id; ?>">
        <input id="payment_method_<?php echo $gateway->id; ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />
        <label for="payment_method_<?php echo $gateway->id; ?>"><?php echo $gateway->get_title(); ?> <?php echo $gateway->get_icon(); ?></label>
        <?php
            if ( $gateway->has_fields() || $gateway->get_description() ) :
                echo '<div class="payment_box payment_method_' . $gateway->id . '" ' . ( $gateway->chosen ? '' : 'style="display:none;"' ) . '>';
                    $gateway->payment_fields();
                echo '</div>';
            endif;
        ?>
    </li>
<?php
}

erase this and change for this code:

echo '<select name="payment_method">';
    foreach ($available_gateways as $gateway) { ?>
         <option value="<?php echo esc_attr( $gateway->id ); ?>"><?php echo $gateway->get_title(); ?> </option>
   <?php  }
echo '</select>';

---

Related Topics