WooCommerce Coupon field auto expand on checkout page - php

Question

The bounty expires in 12 hours. Answers to this question are eligible for a +50 reputation bounty.
Nik7 is looking for an answer from a reputable source.
I try to auto-expand the coupon field on the WooCommerce checkout page. By default, the customer has to click "Do you have a coupon? Click here!". But we would like to have that field always visible. I tried with js but it is not working. However, I would like to have a pure PHP approach if this is possible.
add_action( 'wp_footer', 'woocommerce_show_coupon', 99 );
function woocommerce_show_coupon() {
echo '
<script type="text/javascript">
jQuery(document).ready(function($) {
$(\'.checkout_coupon\').show();
});
</script>
';
}
Does someone have an idea how I can do that in a smart way?
Cheers

Answer 1

//Adding CSS inline style to an existing CSS stylesheet
function mujuonly_add_inline_css() {
$mustlogin_custom_css = "
.woocommerce-form-coupon {
display:block !important;
}
";
//Add the above custom CSS via wp_add_inline_style
wp_add_inline_style( 'woocommerce-inline', $mustlogin_custom_css ); //Pass the variable into the main style sheet ID
}
add_action( 'wp_enqueue_scripts', 'mujuonly_add_inline_css' ); //Enqueue the CSS style

Answer 2

You can overridden by copying it to yourtheme/woocommerce/checkout/form-coupon.php the code below:
if ( ! wc_coupons_enabled() ) { // #codingStandardsIgnoreLine.
return;
}
?>
<form class="checkout_coupon woocommerce-form-coupon" method="post" style="display:block">
<p><?php esc_html_e( 'If you have a coupon code, please apply it below.', 'woocommerce' ); ?></p>
<p class="form-row form-row-first">
<label for="coupon_code" class="screen-reader-text"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label>
<input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" id="coupon_code" value="" />
</p>
<p class="form-row form-row-last">
<button type="submit" class="button<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ); ?>" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_html_e( 'Apply coupon', 'woocommerce' ); ?></button>
</p>
<div class="clear"></div>
</form>

Answer 3

add_filter( 'woocommerce_coupons_enabled', '__return_true' );
add_filter( 'woocommerce_checkout_coupon_message', '__return_false' );
add_action( 'wp_head', 'expand_checkout_coupon_field' );
function expand_checkout_coupon_field() {
echo '<style>.checkout_coupon { display: block !important; }</style>';
}

Answer 4

One way to achieve this is to override the form-coupon.php template file that's responsible for rendering the coupon field on the checkout page. Here's how you can do it:
Create a new folder named woocommerce in your theme directory if it doesn't already exist.
Copy the form-coupon.php file from the wp-content/plugins/woocommerce/templates/checkout directory to the woocommerc directory in your theme.
Edit the form-coupon.php file and replace the code inside the div with the checkout_coupon class with the following code:
<div class="checkout_coupon">
<?php wc_print_notice( apply_filters( 'woocommerce_checkout_coupon_message', esc_html__( 'Have a coupon?', 'woocommerce' ) . ' ' . esc_html__( 'Click here to enter your code', 'woocommerce' ) . '' ), 'notice' ); ?>
<form class="checkout_coupon_form" method="post" style="display:block">
<p class="form-row form-row-first">
<input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" id="coupon_code" value="" />
</p>
<p class="form-row form-row-last">
<button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_html_e( 'Apply coupon', 'woocommerce' ); ?></button>
</p>
<div class="clear"></div>
</form>
</div>
This will show the coupon field by default on the checkout page without requiring the customer to click the "Do you have a coupon? Click here!" link.
Keep in mind that modifying the template files directly may be overwritten if WooCommerce is updated, so it's a good practice to create a child theme and modify the template file there instead.