Кнопка Изменить оплату с изображением при оформлении заказа в зависимости от выбранного способа оплаты Woocommerce

Question

С помощью этой функции я могу изменить текст на кнопке оплаты. Вместо этого я хотел бы вставить небольшое изображение.

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_express',$available_gateways)) {
        // Gateway ID for Paypal is 'paypal'. 
         $available_gateways['paypal_express']->order_button_text = __( 'PAY', 'woocommerce' );

    }
    return $available_gateways;
}

Заранее спасибо за помощь!

Answer 1

Как и во внешнем интерфейсе, текст кнопки будет изменен с помощью функции .text() для jQuery, добавление html подобно тегу img здесь не сработает.

Я предлагаю вместо этого использовать javascript с jQuery. Это должно быть примерно так:

$( 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.

Сценарий выше добавит тег span с классами payment-icon и идентификатором выбранного способа оплаты. Затем вы можете использовать css, чтобы добавить свой значок в качестве фона в этом диапазоне.