Размещение значка замка на кнопке “Оформить заказ” в WooCommerce (WordPress ‘игнорирует’ изменения…)

Пытаюсь сделать что-то, что, как я думал, будет относительно простым.

Вот кнопка “Оформить заказ” по умолчанию в woocommerce

<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

и у Font Awesome есть этот значок замка <i class="fa fa-lock"></i>

Все, что я пытаюсь сделать, это добавить этот значок внутрь кнопки, так:

... data-value="Place order"><i class="fa fa-lock"></i> Place order</button>

То, что я пробовал:

1.

Переопределение шаблона payment.php в моей дочерней теме: child-theme/woocommerce/checkout/payment.php.

изменил строку 52 —

<?php echo apply_filters( 'woocommerce_order_button_html', '<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '"><i class="fa fa-lock"></i> ' . esc_html( $order_button_text ) . '</button>' ); // @codingStandardsIgnoreLine ?>

(просто добавил <i class="fa fa-lock"></i> перед Place order)

Так что я иду к чекауту, подтверждаю, что загружается мой шаблон в моей дочерней теме — и смотрю на кнопку.

Никаких изменений.

<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

2. через функции

   add_filter( 'woocommerce_order_button_html', 'misha_custom_button_html' );
   
    function misha_custom_button_html( $button_html ) {
        echo '<pre>';
        var_dump(html_entity_decode($button_html));
        echo '</pre>';
     return $button_html;
    }
   

Та же история — я возвращаюсь к чекауту.

Прямо над кнопкой чекаута я вижу свой var_dump

'<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order"><i class="fa fa-lock"></i> Place order</button>' (length=190)

Так что он буквально показывает правильный HTML в var_dump, но прямо под ним находится кнопка,

<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

Никаких изменений.

Я также пробовал изменить его непосредственно в функции, но по какой-то причине он не рендерит правильный вывод для значка! Это значит, что HTML значка игнорируется вовсе.

Я могу изменить текст кнопки, добавить что-то перед ней или после, … но по какой-то причине я не могу добавить этот HTML значка внутрь.

Очень странно, я этого не понимаю.

Почему эта кнопка такая упрямая и как я могу добавить значок Font Awesome к кнопке?

Думаю, я могу сделать это с помощью псевдоэлементов CSS

#place_order::before {
    content: "\f023";
    font-family: FontAwesome;
}

и он показывает значок перед кнопкой.

Попробуйте это в файле functions.php,

add_filter( 'woocommerce_order_button_html', 'customize_order_button_html' );

function customize_order_button_html( $button_html ) {
    $order_button_text="Place Order";
    $button_html="<button type="submit" class="place-order-button button alt" . esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ) . '" name="woocommerce_checkout_place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '"><i class="fa fa-lock" aria-hidden="true"></i>' . esc_html( $order_button_text ) . '</button>'; // @codingStandardsIgnoreLine
    return $button_html;
}

CSS (измените его в соответствии с вашими желаниями)

/* START - Checkout Page */
.place-order-button {font-size:20px!important;margin-top: 20px!important;float: right!important;background: #fdb933 !important;color: #000000!important;border-radius: 5px!important;box-shadow: 0 2px 5px 0 rgba(213,217,217,.5)!important;}
.place-order-button:hover {background: #fdac0c!important;}
.place-order-button i {padding-bottom: 6px;margin-right: 10px;font-size: 22px;}
/* END - Checkout Page */