Question 1952 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WooCommerce Coupon field auto expand on checkout page – WordPress

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    //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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search