0

Trying to do something I thought would be relatively simple.

Here is the default woocommerce "Place order" button

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

and Font Awesome has this lock icon <i class="fa fa-lock"></i>

All I am trying to do is add this icon within the button, as such:

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

Things I have tried:

1.

Overriding the payment.php template in my child theme: child-theme/woocommerce/checkout/payment.php.

changed line 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 ?>

(just simply added the <i class="fa fa-lock"></i> before Place order)

So I go to checkout, confirm it is loading my template in my child theme -- and look at the button.

No change.

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

  1. via functions

    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;
     }
    

Same thing -- I go back to checkout.

Right above the checkout button I see my 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)

So it literally shows the correct HTML in the var_dump, but right below it, is the button,

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

No change.

I've also tried changing it directly in the function, but for some reason it is not rendering the correct output for the icon! Meaning ignoring the icon html all together.

I can change the text of the button, add stuff before or after it... but for some reason I cannot add this icon html within it.

Very weird, I do not understand it.

Why is this button being so stubborn and how can I add the font awesome icon to the button?

2 Answers 2

0

I guess I can just do this with CSS pseudo elements

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

and shows the icon before.

0

Try this in the functions.php file,

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 (change it according to what you want)

/* 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 */

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.