Hiding WooCommerce order details on checkout page until Coupon has been submitted successfully

Viewed 22

Essentially what I'm trying to do is make the coupon field required for submission on the checkout page. I did some digging on the WooCommerce core files, and saw that the checkout form and coupon form is separate, so I couldn't find a way to combine them together.

My workaround was to hide the order details section on the checkout page (which includes the submission button for the order) until the coupon has been submitted. The problem with this is the section will still be revealed, even if the coupon is invalid. So, I am trying to show the order details section only if the "Coupon code applied successfully" string is detected on the page.

I'm not too sure how the WooCommerce alert that appears with the submitting the coupon form works -- is it adding this element to the page with JS? If so, how can I use jQuery to find this element and perform an action after it has been added to the page? Thanks in advance for the help.

This is the code I have at the moment, just for hiding and reveal the order details based on submission of the coupon form.

(function($) {
  $(document).ready(function() {
    $("#order_review").hide();
  });
  $(document).ready(function() {
    $(".checkout_coupon").submit(function(event) {
      $("#order_review").show();
    });
  });
})(jQuery)
0 Answers
Related