Region/State is not showing on shipping address box in checkout page

Written by Jigar Patel

Jul 23, 2023

Region/State is not showing on shipping address box in checkout page

If the Region/State field is not showing on the address in the checkout page of your Magento 2 store, it is likely due to configuration issues or customizations. Here are some steps to troubleshoot and resolve the problem:

  1. Check Configuration Settings:
    • Go to the Magento admin panel and navigate to Stores > Configuration.
    • Under General, select General again.
    • Make sure that the “Default Country” and “Allow Countries” options are set correctly based on your store’s location. For example, if your store is in the United States, set the “Default Country” to “United States” and ensure that the United States is included in the “Allow Countries” list.
    • Save the configuration and flush the cache (System > Cache Management) if necessary.
  2. Check Checkout Configuration:
    • In the admin panel, navigate to Stores > Configuration.
    • Under Sales, select Checkout.
    • Look for the “Enable Onestep Checkout” option. If you are using a third-party checkout extension, ensure it is configured correctly.
    • Check if any other custom checkout configurations are affecting the display of address fields.
  3. Check JavaScript Errors:
    • Open the browser console (usually accessed with F12 or right-click and select “Inspect”).
    • Look for any JavaScript errors that might be preventing the Region/State field from loading properly.

when I add a new Address in checkout page, it doesn’t show the Region/State field, but just the city.I don’t know why this is happening, also if I try to checkout with that second address, I got this error Please specify a regionId in shipping address.

So I’m trying to solve these issues.

 

Here’s a step-by-step guide to achieving this.please follow below steps:

 

  1. Firstly, make a copy of the ‘vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js’ file.
  2. Then, navigate to your custom theme directory, located at ‘app/design/frontend/[NameSpace]/[ThemeName]/Magento_Checkout/web/js/view/shipping.js’.
  3. Paste the copied ‘shipping.js’ file into this directory, overwriting the existing file.
  4. Once you’ve done this, locate the ‘saveNewAddress’ function within the ‘shipping.js’ file.
  5. Replace the existing code within this function with the updated code.
/**
      * Save new shipping address
      */
     saveNewAddress: function () {
         var addressData,
             newShippingAddress;

         this.source.set('params.invalid', false);
         this.triggerShippingDataValidateEvent();

         if (!this.source.get('params.invalid')) {
             addressData = this.source.get('shippingAddress');
             // if user clicked the checkbox, its value is true or false. Need to convert.
             addressData['save_in_address_book'] = this.saveInAddressBook ? 1 : 0;
             if(addressData['region_id'] && $('[name="region_id"]').attr("aria-required")){
                 addressData['region'] = $('[name="region_id"]').find("option:selected").attr("data-title");
             }else{
                 addressData['region'] = $('[name="region"]').val();
             }
             // New address must be selected as a shipping address
             newShippingAddress = createShippingAddress(addressData);
             selectShippingAddress(newShippingAddress);
             checkoutData.setSelectedShippingAddress(newShippingAddress.getKey());
             checkoutData.setNewCustomerShippingAddress($.extend(true, {}, addressData));
             this.getPopUp().closeModal();
             this.isNewAddressAdded(true);
         }
     },

 

By following these steps, you should be able to identify and resolve the issue with the Region/State field not showing on the address in the checkout page of your Magento 2 store.

 

Now execute the below command and go to the system configuration page:

php bin/magento s:up
php bin/magento s:d:c
php bin/magento s:s:d -f
php bin/magento c:c

 

I Hope, This instruction will be helpful for you.

If you have any difficulties regarding this blog, do consider posting them in the Comments section below!

I’m here to help.

Thank you!

Jigar Patel

Author

We can help you with

  • Dedicated Team
  • Setup Extended Team
  • Product Development
  • Custom App Development

Schedule a Developer Interview And Get 7 Days Risk-Free Trial

Fill out the form below, and one of our technical experts will reach out to you within 12 hours.

    Google
    |

    4.8

    Google
    |

    4.8

    Google
    |

    4.9

    Google
    |

    4.8

    Google
    |

    4.9

    Copyright © 2024 DOLPHIN WEB SOLUTION. All rights reserved.

    ×

    Hello!

    Click one of our contacts below to chat on WhatsApp

    × How can I help you?
    TO TOP