Ok so we have seen that there have been multiple attempts to fix this shipping input problem on WordPress. I spent sometime this morning looking up a work around that should fix this problem.

First thing you are going to need is jQuery, and a Javascript file that your page will have access to. I put mine in the bottom of my footer so that I have better performance.

To get started, make a copy of the select box from the shipping calculator. My client was only shipping inside the USA so I simply copied the state select box.

Then you are going to want to give it the name and ID of the hidden input that’s in your shipping address form. If you debug that html there is a hidden input, grab the name from there and make it the ID and name of your new select box, and just keep that select box in a text file for now. Mine had the name “collected_data[15]” .

Next you are going to want to comment out the entire section for the shipping calculator.
For my version it was lines 140-161. Those are gone. Nuke those.

Secondly you are going to want to get rid of the state element and replace it with an appended select box that has the same name as the element you are looking for.

That is where you want to use jQuery. Now WordPress was SO smart they didn’t tag the parenting table cell of these inputs. So you are going to want to go to the input labels parent’s sibling cell, and do a sibling tag and then clear the cell, and THEN append the select box from your text file.

It should look like this.

$(".wpsc_checkout_form_15").siblings("td").html("");
$(".wpsc_checkout_form_15").siblings("td").append('Your Select Box HERE');

Now it’s important to make sure all the values match. So that’s why you copy and paste.
You do this on page load and you have a very clean effective way to do this, you can also go back to line 140 and add an H4 header to the form.