Category: Development

If you’ve ever ran across the white screen of death using the woocommerce front end billing and shipping editing pages, well i hope this article will come in handy.

Below are a few steps that should help you fix the woocommerce billing and shipping blank page after saving.

1) Copy the “form-edit-address.php” file over to your themes /woocommerce/myaccount directory within your theme.
2) Once you’ve done this add an id to the form, this really can be any naming convention you want. So for this tutorial we’ll call it “edit-address”.
3) After this we’re going to add some jquery to your footer.php page.

    (function($){
        $("#edit-address").submit(function() {
            event.preventDefault();
            return validateForm($(this));
        });

        function validateForm(form){
            var retVal = true,
                re,
                fields = {};

            $.each(form.serializeArray(), function(i, field) {
                var fieldName = field.name;
                var fieldVal = field.value;
                fields[field.name] = field.value;
            });
            var obj = fields;

            var url = window.location.href;
            var postUrl = function(url){
                var someUrl = "";
                if(url.indexOf("billing") > -1) {
                    someUrl = "/my-account/edit-address/billing/";
                } else if (url.indexOf("shipping") > -1) {
                    someUrl = "/my-account/edit-address/shipping/";
                }

                return someUrl;
            };

            $.ajax({
                type: "POST",
                url: postUrl(url),
                data: obj,
                success: function(data) {
                    location.reload();
                },
                error: function() {
                    location.reload();
                },
                dataType: "text/html"
            });
        }
    })(jQuery);

What the above code is doing. The form is being stopped from submitting from the “event.preventDefault();” so we can do what we want with the form. Next the inputs in the form are being created into an object thats going to be sent off to the post later. After we build up the object we then check for wether the page we want to post to is the “billing” or the “shipping” page. Once we get that, we’ll use the new url as the url to post to, and of course the object we built up earlier sends the data to the page. After we’ve sent the data we want to reload the page so we don’t see the blank page.

Thats it, this should fix any problems being had. There is a weird issue with the error property that gets fired off, but it will still save and send the data.