WooC -Move Order Now Button To Under Payment Option (See pic) WordPress

John Cotton answers:

The easiest option would be to override the default form-pay.php template in your theme.

That's where the loop for payment options is and so you could just inject extra HTML in there (customised for each payment option if you wanted to) that displayed exactly as you wished.

Start by copying the /templates/checkout/form-pay.php from the WC plugin folder to /woocommerce/checkout/form-pay.php in your theme folder.

Then edit that copied file as you need to.

Monit Jadhav answers:

Put the code below in your payment-method.php.

its located in yoursite/wp-content/themes/yourtheme/woocommerce/checkout/folder/


<li class="payment_method_<?php echo $gateway->id; ?>">
<input id="payment_method_<?php echo $gateway->id; ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />

<label for="payment_method_<?php echo $gateway->id; ?>">
<?php echo $gateway->get_title(); ?> <?php echo $gateway->get_icon(); ?>
</label>
<?php if ( $gateway->has_fields() || $gateway->get_description() ) : ?>
<div class="payment_box payment_method_<?php echo $gateway->id; ?>" <?php if ( ! $gateway->chosen ) : ?>style="display:none;"<?php endif; ?>>
<?php $gateway->payment_fields(); ?>
</div>
<?php endif; ?>
<div class="form-row place-order">

<noscript><?php _e( 'Since your browser does not support JavaScript, or it is disabled, please ensure you click the <em>Update Totals</em> button before placing your order. You may be charged more than the amount stated above if you fail to do so.', 'woocommerce' ); ?><br/><input type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="<?php _e( 'Update totals', 'woocommerce' ); ?>" /></noscript>

<?php wp_nonce_field( 'woocommerce-process_checkout' ); ?>

<?php do_action( 'woocommerce_review_order_before_submit' ); ?>

<?php echo apply_filters( 'woocommerce_order_button_html', '<input 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 ) . '" />' ); ?>

<?php if ( wc_get_page_id( 'terms' ) > 0 && apply_filters( 'woocommerce_checkout_show_terms', true ) ) : ?>
<p class="form-row terms">
<label for="terms" class="checkbox"><?php printf( __( 'I&rsquo;ve read and accept the <a href="%s" target="_blank">terms &amp; conditions</a>', 'woocommerce' ), esc_url( wc_get_page_permalink( 'terms' ) ) ); ?></label>
<input type="checkbox" class="input-checkbox" name="terms" <?php checked( apply_filters( 'woocommerce_terms_is_checked_default', isset( $_POST['terms'] ) ), true ); ?> id="terms" />
</p>
<?php endif; ?>

<?php do_action( 'woocommerce_review_order_after_submit' ); ?>

</div>
</li>


Note: this will work for woocommerce-release-2.3 it might not work on earlier versions of woocommerce. So make sure you woocommerce and your woocommerce template files up to date.

Let me know if it works for you

Regards

Monit

Jayaram Y answers:

HI,

Here is the demo link: http://dev.igenero.in/tuscan/?product=test (add product to cart and check the checkout page )

Copy woocommerce to your theme directory
Edit the file /woocommerce/templates/checkout/payment-method.php

Replace it with the below code
<?php
/**
* Output a single payment method
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.3.0
*/

if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<li class="payment_method_<?php echo $gateway->id; ?>">
<input id="payment_method_<?php echo $gateway->id; ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />

<label for="payment_method_<?php echo $gateway->id; ?>">
<?php echo $gateway->get_title(); ?> <?php echo $gateway->get_icon(); ?>
</label>
<?php if ( $gateway->has_fields() || $gateway->get_description() ) : ?>
<div class="payment_box payment_method_<?php echo $gateway->id; ?>" <?php if ( ! $gateway->chosen ) : ?>style="display:none;"<?php endif; ?>>
<?php $gateway->payment_fields(); ?>
</div>
<?php endif; ?>
<div class="form-row place-order">

<noscript><?php _e( 'Since your browser does not support JavaScript, or it is disabled, please ensure you click the <em>Update Totals</em> button before placing your order. You may be charged more than the amount stated above if you fail to do so.', 'woocommerce' ); ?><br/><input type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="<?php _e( 'Update totals', 'woocommerce' ); ?>" /></noscript>

<?php wp_nonce_field( 'woocommerce-process_checkout' ); ?>

<?php do_action( 'woocommerce_review_order_before_submit' ); ?>

<?php echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place Order" data-value="Place Order" />' ); ?>

<?php if ( wc_get_page_id( 'terms' ) > 0 && apply_filters( 'woocommerce_checkout_show_terms', true ) ) : ?>
<p class="form-row terms">
<label for="terms" class="checkbox"><?php printf( __( 'I&rsquo;ve read and accept the <a href="%s" target="_blank">terms &amp; conditions</a>', 'woocommerce' ), esc_url( wc_get_page_permalink( 'terms' ) ) ); ?></label>
<input type="checkbox" class="input-checkbox" name="terms" <?php checked( apply_filters( 'woocommerce_terms_is_checked_default', isset( $_POST['terms'] ) ), true ); ?> id="terms" />
</p>
<?php endif; ?>

<?php do_action( 'woocommerce_review_order_after_submit' ); ?>

</div>
</li>


Add this in your css file

.place-order{display:none;}

Then place this script in your footer.php before "<?php wp_footer(); ?>"


<script type="text/javascript">
jQuery(document).ready(function(e)
{
jQuery('.payment_methods').find('.place-order').fadeOut();

if(jQuery("#payment_method_bacs").prop('checked') == true)
{

jQuery(this).parent().find('.place-order').fadeIn();
}

jQuery(document).on('click','#payment_method_bacs',function(e)
{

jQuery('.payment_methods').find('.place-order').fadeOut();
if(jQuery("#payment_method_bacs").prop('checked') == true)
{
jQuery(this).parent().find('.place-order').fadeIn();
}
});

jQuery(document).on('click','#payment_method_cheque',function(e)
{

jQuery('.payment_methods').find('.place-order').fadeOut();
if(jQuery("#payment_method_cheque").prop('checked') == true)
{
jQuery(this).parent().find('.place-order').fadeIn();
}
});

jQuery(document).on('click','#payment_method_paypal',function(e)
{

jQuery('.payment_methods').find('.place-order').fadeOut();
if(jQuery("#payment_method_paypal").prop('checked') == true)
{
jQuery(this).parent().find('.place-order').fadeIn();
}
});

});
</script>



Note: The ID's in the script used must be replaced with the one you are using at payment gateway you are using

Here is the demo link: http://dev.igenero.in/tuscan/?product=test (add product to cart and check the checkout page )

Reigel Gallarde answers:

if you want to use javascript, we can use jQuery like this..

jQuery('.order-review').on('change click','.payment_methods :radio',function(){
if(this.checked)
jQuery(this).closest('li').append(jQuery('#place_order'));
if(jQuery('.klarna-push-pno').is(':visible')) {
jQuery('.klarna-push-pno').before(jQuery('#place_order'));
}
}).change();

[[LINK href="https://vid.me/yRoc"]]check this video[[/LINK]]

Let me know if you have problems...

---