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>
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?
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>
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?
I guess I can just do this with CSS pseudo elements
#place_order::before {
content: "\f023";
font-family: FontAwesome;
}
and shows the icon before.
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 */