Add Body Class Based on WC Payment Method

This code adds a custom body class when using the WooCommerce checkout page block based on the payment method toggled. In this example, we add a custom body class named payment-cod-cheque-active when either Check payments or Cash on delivery payment methods are chosen.

Code Installation

There’s 2 steps :

1. Add the following PHP code to your child themes functions file.

add_action('wp_enqueue_scripts', 'custom_enqueue_script');
function custom_enqueue_script() {

    if ( is_checkout() ) {
    
        wp_enqueue_script('custom-checkout-js', get_stylesheet_directory_uri() . '/checkout.js', array('jquery'), null, true);
    }
    
}

2. Create a file named checkout.js in your child themes root directory and add the following jQuery to the file.

You can then use CSS in your child themes style.css file which is rendered only when specific payment methods are toggled on the checkout page.

Example :

.payment-cod-cheque-active {
  /*  Add Your CSS Declarations Here */
}

Tested using a child theme for the Twenty Twenty Four default block theme for WordPress.

Here’s the result :