I worked on a problem regarding Woo Commerce and Internet Explorer. My client complained that the Woo Commerce Checkout Page Hangs and goes blank and the customer cannot check out. I tested and tested and did not see a problem.

On testing the sites with various browsers finally I was able to see the problem. It happens on IE installed on Windows 8.  I researched in detail and there has been a lot of talk about this being a problem with Woo Commerce on IE. The reason of the problem is how IE works with Asynchronous javascript.

This is not really a problem of WooCommerce since the same browser can work in different theme (2012) and did not work in my client’s theme. There are a number of possibilities like javascript conflicts, jquery incompatibility. I started looking into what is causeing the Woo Commerce Checkout Page Hangs.

I started my research with the sections that have AJAX and commenting out the code. On commenting out the “Order Review Form” the page started working correctly and I knew I hit GOLD Yayyy !

I think the issue with my client’s website was that there is only one payment method defined which is Paypal. When I looked at the order review form template I saw that the plugin is looping and populating the fields with the various payment methods. Loop caused an alarm since I thought that loop gets stuck on some field being null or not an object. I commented out the Loop and VOILA !! Page still worked.

I simply left the loop commented and put my fields for default payment method on the review order template to make the whole thing work. I reported this to Woo Commerce and my comments and issue can be seen at Woo Commerce Checkout Page Hangs

Here is the fix:

In templates/review-order.php comment out the following code:

<!–
<input type=”radio” id=”payment_method_<?php echo $gateway->id; ?>” class=”input-radio” name=”payment_method” value=”<?php echo esc_attr( $gateway->id ); ?>” <?php checked( $gateway->chosen, true ); ?> />
<label for=”payment_method_<?php echo $gateway->id; ?>”><?php echo $gateway->get_title(); ?> <?php echo $gateway->get_icon(); ?></label>
<?php
if ( $gateway->has_fields() || $gateway->get_description() ) :
echo ‘<div class=”payment_box payment_method_’ . $gateway->id . ‘” ‘ . ( $gateway->chosen ? ” : ‘style=”display:none;”‘ ) . ‘>’;
$gateway->payment_fields();
echo ‘</div>’;
endif;
?>
</li>
–>

I just put the default fields for paypal before my comment:

<li>
<label for=”payment_method_<?php echo $gateway->id; ?>”><?php echo $gateway->get_title(); ?> <?php echo $gateway->get_icon(); ?></label>
<br />
<label for=”payment_method_<?php echo $gateway->id; ?>”><?php echo $gateway->get_description(); ?> </label>

Cheers and Happy Coding !