Doesn’t work in Customer Payment Page

By the way, the Customer Payment Page permalink is like, for example, https://mydomain.com/checkout/order-pay/2427/?pay_for_order=true&key=wc_order_s7afr68asf6r8

WooCommerce conditional tag for this page uses is_wc_endpoint_url( 'order-pay' )

I found within “/assets/js/frontend/wc-checkout-terms-popup.js” on line 5 is $( document.body ).bind( 'updated_checkout', this.terms_update ); that binds the ‘updated_checkout’ trigger to the ‘terms_update’ function.

The ‘updated_checkout’ trigger is apparently found in “/woocommerce/assets/js/frontend/checkout.js”, which is within the ‘update_checkout_action’ function. Unfortunately, I cannot find any trigger for the Customer Payment Page.

I’ll appreciate it if you can shed some light on this issue. Thanks in advance.

At long last, I managed to work out a solution to get the Terms and Conditions content to popup in the Order Pay page.
Add the following snippet into the active theme’s functions.php

// Trigger 'updated_checkout' event in Order-Pay page. Add action at priority 300.
function wctp_trigger_updated_checkout_order_pay() {
	if ( is_wc_endpoint_url( 'order-pay' ) ) {
	?>
	<script>
	  jQuery(function($) {
	    $( 'body' ).trigger( 'updated_checkout' );
	  });
	</script>
	<?php
	}
}
add_action( 'wp_footer', 'wctp_trigger_updated_checkout_order_pay', 300 );

I hope this solution will be useful for someone. ??

Jason,

Thanks for this, I was suffering from the same problem and your fix appears to work.

One question though, do you have any issues when checking out on a mobile device? I notice when using the order-pay endpoint on a phone that the popup doesn’t respect the device’s window size.

@pthpndr, thanks for pointing this matter out. I didn’t test it out on any mobile device, which I missed out completely.

After digging through the source codes, I found the function tb_position() in /wp-includes/js/thickbox/thickbox.js is pre-setting the position and size of the modal popup. Also, the TB_WIDTH variable defaults to 630 pixels as the width parameter has no value.

The solution I can think of is to add a jQuery that triggers after the popup is visible, and re-adjust the width for both #TB_window and #TB_ajaxContent in accordance to the device’s window size. Give me some time to figure this out, and I’ll update this post with the necessary source codes.

I’ve tried a few jQuery scripts, and all of them failed. Wasted 3 days trying to figure out why the modal popup size cannot be altered. Even applying CSS was in vain.

Eventually, I came across this GitHub page, which I hope may work. I’m yet to find the time to test it out.

Perhaps you can take the lead to try it out first @pthpndr

• This reply was modified 6 years, 6 months ago by Jason Wong.

I’m not the greatest when it comes to jQuery so I looked at a different approach. For a test I tried hardcoding the modal window size to see what was the difference between the checkout page and the order-pay page.

If you look at the image you’ll see where the thickbox gets appended to the URL: Good & bad URL’s

As a test I inserted a forward slash before the appended portion and it now obeys the modal size in all situations (wc-checkout-terms-popup.js).

var href = '/#TB_inline?width=' + width + '&height=' + height + '&inlineId=wc-terms-and-conditions-popup';

I know this is more of a workaround than a fix but I am not sure what the proper solution should be.

@pthpndr

I’ve tested the JS function from the GitHub, and sadly it doesn’t work.
In the end, I’ve concatenated my original jQuery script to the following.

// Trigger 'updated_checkout' event in Order-Pay page. Add action at priority 300.
function wctp_trigger_updated_checkout_order_pay() {
	if ( is_wc_endpoint_url( 'order-pay' ) ) {
?>
  <script>
  jQuery(function($) {
    $( 'body' ).trigger( 'updated_checkout' );

    /* trigger when window has resized */
    $(window).resize(function() {
      var termsLink = document.getElementsByClassName('wc-checkout-terms-open-modal')[0];
      var termsUrl = termsLink.getAttribute('href');

      var newWidth = $(window).width();	// get current width of browser viewport

      // if newWidth is less than 650 pixels
      if (newWidth < 650) {
        var popupWidth = newWidth - 20;
        termsNewUrl = termsUrl.replace(/width=([^&]+)/, "width=" + popupWidth);
        termsLink.setAttribute('href', termsNewUrl);
      }
    //  alert(termsNewUrl);
    });

    /* trigger when page is ready */
    $(window).load(function() {
      var termsLink = document.getElementsByClassName('wc-checkout-terms-open-modal')[0];
      var termsUrl = termsLink.getAttribute('href');

      var newWidth = $(window).width();	// get current width of browser viewport

      // if newWidth is less than 650 pixels
      if (newWidth < 650) {
        var popupWidth = newWidth - 20;
        termsNewUrl = termsUrl.replace(/width=([^&]+)/, "width=" + popupWidth);
        termsLink.setAttribute('href', termsNewUrl);
      }
    //  alert(termsNewUrl);
    });

  });
  </script>
<?php
	}
}
add_action( 'wp_footer', 'wctp_trigger_updated_checkout_order_pay', 300 );

It overwrites the width for the popup window when it detects the viewport width is less than 650 pixels. Although the HREF for the Terms and Conditions anchor gets overwritten, it’s unfortunate that the parameters aren’t parsed. There’s a definite problem with the tb_parseQuery function in thickbox.js as the parameter values are always set at default.

This requires further investigation as to why tb_parseQuery isn’t parsing the HREF parameter values.

I noticed the modal popup is also broken in the Checkout page when viewed on a mobile device. By applying the above snippet, it solves the problem. Unfortunately, it isn’t working in the Order Pay page.

By the way, please amend the following lines of code from

      // if newWidth is less than 650 pixels
      if (newWidth < 650) {
        var popupWidth = newWidth - 20;

to

      // if newWidth is less than 630 pixels
      if (newWidth < 630) {
        var popupWidth = newWidth - 50;

I’m still trying out a few approaches to get it working, but all were in vain. Gosh! This is driving me nuts …

@pthpndr I tried out what you discovered, and it was the answer to our problem.

The following snippet is what I’ve put together for the “Order Pay” page, which eventually worked.

// Trigger 'updated_checkout' event in Order-Pay page. Add action at priority 300.
function wctp_trigger_updated_checkout_order_pay() {
	if ( is_wc_endpoint_url( 'order-pay' ) ) {
?>
  <script>
  jQuery(function($) {
    $( 'body' ).trigger( 'updated_checkout' );

    /* when checkout terms anchor tag is clicked */
    $('a.wc-checkout-terms-open-modal').click(function() {
      var termsLink = document.getElementsByClassName('wc-checkout-terms-open-modal')[0];
      var termsUrl = termsLink.getAttribute('href');

      var newWidth = $(window).width();	 // get current width of browser viewport
      var popupWidth = 600;  // reset to default value minus 30px

      // if newWidth is less than 630 pixels
      if (newWidth < 630)  popupWidth = newWidth - 50;

      termsNewUrl = termsUrl.replace(/width=([^&]+)/, "width=" + popupWidth);
      termsNewUrl = termsNewUrl.replace("#TB_inline", "/TB_inline");
      termsLink.setAttribute('href', termsNewUrl);

      tb_show( "Terms & Conditions", termsNewUrl );  // re-initiate tb_show()
    });

  });
  </script>
<?php
	}
}
add_action( 'wp_footer', 'wctp_trigger_updated_checkout_order_pay', 300 );

What a huge relief !! I hope it’ll work for you too.

Woo-hoo! Works for me too, and only affects mobile.
Thanks again for this.

You’re welcome, @pthpndr

Don’t forget to add the other snippet for the “Checkout” page.