Shipping Calculator Labels Not Showing

By default there are placeholders in the fields for the shipping calculator. This can be seen in this template:
https://github.com/woocommerce/woocommerce/blob/3.4.3/templates/cart/shipping-calculator.php

If this template is being overridden in your theme, or if there are translations for these fields that are not applied correctly, this may be the issue.

I do see that the City field is being hidden via CSS and the placeholder is actually working correctly in it when the CSS is removed.

Link to image: https://cld.wthms.co/GDfStc

Did you see that the labels all show up if you just change the quantity and let the JS refresh happen? Why would a JS refresh change anything? Any changes I’ve made have been simple CSS.

There are no translations, and the theme is Storefront, so neither of those are the root cause.

I commented out the CSS hiding the city field, and I was able to reproduce what you saw. That didn’t change the behavior of the other fields.

edit: Is it possible that is static while the other fields are dynamic, i.e. populated via JS based on whether or not a country has been selected?

I realize this is oddball. Any further help in troubleshooting would be greatly appreciated.

• This reply was modified 6 years, 8 months ago by donaldjlove.

@donaldjlove I looked a little deeper and it appears that the placeholder is in the HTML when the page loads:

Link to image: https://cld.wthms.co/6WR2FU

Did you see that the labels all show up if you just change the quantity and let the JS refresh happen? Why would a JS refresh change anything?

I did not previously, but I just did. I am unsure why this would make a difference. What happens if you remove the code to do that automatic refresh, do the placeholders show correctly?

I did find that in the internationalization JS file from WooCommerce is blocked, the placeholders show up correctly. Something must be interfering with the functionality of this file.

Link to image: https://cld.wthms.co/g0RRpQ

Jesse,

Thanks for taking another look.

Removing the auto-refresh PHP script does not change the behavior. The initial load still does not populate those fields with the placeholders.

I’ve got a guy with whom I’m working. I’ll run this by him to see if we can track it down based on what you found with the internationalization JS. I’d like to leave this thread open while we do that if you don’t mind.

Thanks.

Hi @donaldjlove,

I’ve got a guy with whom I’m working. I’ll run this by him to see if we can track it down based on what you found with the internationalization JS. I’d like to leave this thread open while we do that if you don’t mind.

Sure, sounds good! Please let us know if you were able to fix the issue. We usually close threads in about a week of inactivity but happy to keep it open for a while longer in case you still need to.

Thanks for keeping this open. The programmer with whom I’m working sent this back:

Thanks for your patience. I was able to narrow down the problem to a very specific section of code in the file identified in your ticket:

plugins/woocommerce/assets/js/frontend/address-i18n.min.js (this is the hard-to-read minified version, so I am really referencing the next one)
plugins/woocommerce/assets/js/frontend/address-i18n.js

There is a section lines 65-75 that deals with Placeholders. It is attempting to set up the placeholders (in-field labels) for the special dropdowns and instead replaces them with blank values.

Does this help to figure out a potential root cause? Any further guidance or perspective would be helpful.

Thanks!

Hi @donaldjlove

This issue sounds like it could very much be related to the active theme. Do you have any issues after switching to the Twenty Seventeen theme? In addition to switching the theme, try disabling all plugins except for WooCommerce to see if this resolves the issue.

Let us know what you find.

@donaldjlove,

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.