WooCommerce allows you to customize the checkout page, such as for managing shipping and payment methods, among other things. One such customization involves modifying the payment method title based on the selected shipping option. This can be achieved by utilizing a custom function that hooks into the woocommerce_gateway_title filter. By implementing this function, you can dynamically adjust payment method titles based on specific conditions, such as the chosen shipping method.
This post will guide you on how to change the payment method title based on shipping method in WooCommerce.
Where to Add Custom Code in WooCommerce?
It is advisable to add the code snippets to the functions.php file of your child theme. Access the file directly from Appearance->Theme File Editor->Locating the child theme’s functions.php from the right sidebar. You can also access it from your theme’s directory file. Insert the following code snippet in functions.php. The alternative & easy option is to install & activate the Code Snippets plugin. You can then add the code as a new snippet via the plugin.
Solution: Change Payment Method Title based on Shipping Method in WooCommerce
Consider a scenario where a store offers two different shipping methods – local pickup and same-day delivery, and also provides the COD (Cash on Delivery) payment method. In this case, the store owner intends to modify the title of the COD payment method based on the chosen shipping method. For instance, for local pickup, they wish to change the title from “COD” to the “Pay Later” option.
Below is the code snippet for the above scenario.
function ts_woocommerce_gateway_title( $title, $payment_id ) { // Only on checkout page and for COD if ( is_checkout() && ! is_wc_endpoint_url() && $payment_id === 'cod' ) { // Get chosen shipping methods $chosen_shipping_methods = (array) WC()->session->get( 'chosen_shipping_methods' ); // Compare if ( in_array( 'local_pickup:1', $chosen_shipping_methods ) ) { $title = __( 'Pay Later', 'woocommerce' ); } else { $title = __( 'Same Day Delivery', 'woocommerce' ); } } return $title; } add_filter( 'woocommerce_gateway_title', 'ts_woocommerce_gateway_title', 10, 2 );
Output
When the customer selects local pickup, the payment method title changes from “Cash on Delivery” to “Pay Later” options.
In the below scenario, the shipping method (Local Pickup) and payment method titles (Cash on Delivery) remain unchanged until an option is selected.
Code Explanation
1. Function Definition:
This defines a function named ts_woocommerce_gateway_title that takes two parameters: $title (the current payment method title) and $payment_id (the ID of the payment method).
2. Condition Check:
This checks whether the current page is the checkout page, the URL is not an endpoint (like the order received page), and the payment method is Cash on Delivery (COD).
3. Get Chosen Shipping Methods:
This retrieves the chosen shipping methods from the WooCommerce session and converts them to an array.
4. Compare Shipping Methods:
This block of code checks the chosen shipping methods and updates the payment method title accordingly:
- If the chosen shipping method includes ‘local_pickup:1’, the title is set to ‘Credit Card on Delivery’.
- If none of the above conditions match, the title is set to ‘Same Day Delivery’.
5. Return the Updated Title:
This returns the updated payment method title.
6. Hook the Function:
This hooks the ts_woocommerce_gateway_title function to the woocommerce_gateway_title filter with a priority of 10 and 2 parameters.
Conclusion
The code snippet provided enables automatic updating of payment method title based on selected shipping methods at WooCommerce checkout. Moreover, it is possible to customize the checkout page by replacing the default Payment Gateway title in WooCommerce, without having to apply any specific conditions.