Title: Postal Code and CSS
Last modified: February 4, 2021

---

# Postal Code and CSS

 *  Resolved [Phet Maly](https://wordpress.org/support/users/phet-maly/)
 * (@phet-maly)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/)
 * Hey guys,
 * I’m working on a Canadian E-com where the client doesn’t need the postal code
   field. Plus, this field seems to be having issues being rendered visually…
 * Please see screen capture: [https://tinyurl.com/yyvlrxd7](https://tinyurl.com/yyvlrxd7)
 * 1) Can this field be deactivated completely?
    2) Do I just need to adjust the
   CSS to show the field properly?
 * FYI, all is up to date (plugins, core, etc.)
 * Thanks,
    Phet
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fpostal-code-and-css%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Thread Starter [Phet Maly](https://wordpress.org/support/users/phet-maly/)
 * (@phet-maly)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/#post-14015303)
 * Does anyone have a clue? Please help
 *  [3 Sons Development](https://wordpress.org/support/users/3sonsdevelopment/)
 * (@3sonsdevelopment)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/#post-14026186)
 * Hi [@phet-maly](https://wordpress.org/support/users/phet-maly/),
 * That’s a great question. Square does require the postcode field to process payments
   in Canada, the US, and the UK. Removing the field would prevent customers from
   being able to process payments.
 * [https://developer.squareup.com/docs/payment-form/cookbook/sqpaymentform-customization#remove-the-postal-code-requirement](https://developer.squareup.com/docs/payment-form/cookbook/sqpaymentform-customization#remove-the-postal-code-requirement)
 * You’ll want to leave the postcode even if it’s not a need for the specific business
   in order to process the payments.
 * Let me know if you have any questions.
 *  Thread Starter [Phet Maly](https://wordpress.org/support/users/phet-maly/)
 * (@phet-maly)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/#post-14026553)
 * So, I imagine it’s a CSS issue…?
 *  Plugin Support [Damianne P (a11n)](https://wordpress.org/support/users/drwpcom/)
 * (@drwpcom)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/#post-14030550)
 * Hi [@phet-maly](https://wordpress.org/support/users/phet-maly/).
 * > 2) Do I just need to adjust the CSS to show the field properly?
 * It’s a bit unclear to me what the issue is with the field. Perhaps it’s hidden
   under the selection. Can you clarify please?
 *  Thread Starter [Phet Maly](https://wordpress.org/support/users/phet-maly/)
 * (@phet-maly)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/#post-14032476)
 * Hi,
 * If you look at my screenshot closely, we can see that the asterisk * (that marks
   a required field) is visible, but it’s overlapping the text:
    [https://www.awesomescreenshot.com/image/6102116?key=caea948169132d6574ebb6b884bb64bb](https://www.awesomescreenshot.com/image/6102116?key=caea948169132d6574ebb6b884bb64bb)
 * After inspecting the code, we can see that the <label> and <iframe> is generated
   in the code. But we can not visually see the postal code field in the layout 
   design:
    [https://www.awesomescreenshot.com/image/6102142?key=db5ef917df975641f41bf0e0caa9b685](https://www.awesomescreenshot.com/image/6102142?key=db5ef917df975641f41bf0e0caa9b685)
 * Thus, my question #2.
 * Thanks,
    Phet
 *  Plugin Support [Damianne P (a11n)](https://wordpress.org/support/users/drwpcom/)
 * (@drwpcom)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/#post-14040005)
 * Hi [@phet-maly](https://wordpress.org/support/users/phet-maly/). None of the 
   images that you shared load for me. Each link gives a 404 error. Please try again
   to demonstrate the issue if it persists. It would be helpful to see the issue
   on your site as well so please share the link.
 *  Thread Starter [Phet Maly](https://wordpress.org/support/users/phet-maly/)
 * (@phet-maly)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/#post-14052620)
 * Sorry about that! I’ve done some “spring cleaning” and deleted those screeshot…
 * Here is a video capture of what I’m refering to: [https://www.awesomescreenshot.com/video/2760484?key=45da91efb8191218d80201ba350f96e3](https://www.awesomescreenshot.com/video/2760484?key=45da91efb8191218d80201ba350f96e3)
 * Hope this better explain what I’m trying to say…
 * Thanks for your time!
    Phet
 *  Plugin Support [Damianne P (a11n)](https://wordpress.org/support/users/drwpcom/)
 * (@drwpcom)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/#post-14057458)
 * Ah I see. It looks like you’ve hidden the field but not the required indicator.
   You can use CSS to hide it or modify your existing customization.
 * As my colleague previously advised, you may have issues processing payments without
   the postal code, so you’ll want to monitor for any issues.
 *  Thread Starter [Phet Maly](https://wordpress.org/support/users/phet-maly/)
 * (@phet-maly)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/#post-14058313)
 * The problem seems to come from the theme (Enfold).
 * The postal code <div> has the class named “hidden” and the theme has css attached
   to this class.
 * I’ve added this to the my custom CSS to override it.
 *     ```
       .form-row.form-row-wide.wc-square-credit-card-card-postal-code-parent.hidden,
       .form-row.form-row-wide.wc-square-credit-card-card-postal-code-parent.wc-square-credit-card-hosted-field-parent.hidden {
           position: initial;
           visibility: initial;
       }
       ```
   
 * That solved my problem.
 * Thanks,
    Phet

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Postal Code and CSS’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce-square/assets/icon-256x256.png?rev=3234354)
 * [WooCommerce Square](https://wordpress.org/plugins/woocommerce-square/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce-square/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce-square/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce-square/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce-square/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce-square/reviews/)

## Tags

 * [Postal Code](https://wordpress.org/support/topic-tag/postal-code/)

 * 9 replies
 * 3 participants
 * Last reply from: [Phet Maly](https://wordpress.org/support/users/phet-maly/)
 * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/postal-code-and-css/#post-14058313)
 * Status: resolved