WooCommerce Payment method add text or price

Question

I'm looking for a solution to add some text or price on payment methods. Every payment method needs unique text like on a screenshot. Does anybody have idea how to achive this via functions.php or how this is added?

Answer 1

You will have to overwrite the payment-method.php template by copying it from:

wp-content/plugins/woocommerce/templates/checkout/payment-method.php

to your child theme at:

wp-content/themes/your-child-theme/woocommerce/checkout/payment-method.php

Then add a custom action hook into the <label> element in that template like this:

<label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>">
    <?php do_action( 'wc_before_payment_method_label', $gateway->id ); ?>
    <?php echo $gateway->get_title(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?> <?php echo $gateway->get_icon(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?>
</label>

You can then use that wc_before_payment_method_label action to add an additional <span> to the gateway label for each payment method.

add_action( 'wc_before_payment_method_label' , 'add_payment_gateway_fee_label', 10, 1 );
function add_payment_gateway_fee_label( $id ) {

    $custom_label = array(
        'bacs'      => 1,
        'cheque'    => 1.5,
        'cod'       => 2,
        'paypal'    => 2.5,
    );

    echo array_key_exists( $id, $custom_label ) ? sprintf( '<span class="custom-gateway-label">%s</span>', wc_price( $custom_label[$id] ) ) : '';
}

You can then apply some extra CSS styling to your child theme's style.css to make it work for your specific setup. I've added some quick CSS styling that, in combination with Storefront, made it look look like this on desktop:

CSS:

.custom-gateway-label {
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 10px;
    background: #ccc;
    float: right;
    font-size: 0.8em;
}