WooCommerce Coupon field auto expand on checkout page

Question

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