Woocommerce payments css issue

[amanjaura]

Hello, We are using woocommerce payments and the input fields for credit card and date are too small compared to theme’s default fields.
How can we fix that issue. Speaking to woocommerce support they said it’s a theme compatibility issue.

[ruenel]

Hello @amanjaura,

Thanks for writing in! I have checked your checkout page and I am noticing that a certain CSS block is overriding the theme styles:

.Input, .p-FauxInput {
    background-color: rgb(255, 255, 255);
    border-bottom-color: rgb(221, 221, 221);
    border-bottom-left-radius: 4
px
;
    border-bottom-right-radius: 4
px
;
    border-bottom-style: solid;
    border-bottom-width: 1
px
;
    border-left-color: rgb(221, 221, 221);
    border-left-style: solid;
    border-left-width: 1
px
;
    border-right-color: rgb(221, 221, 221);
    border-right-style: solid;
    border-right-width: 1
px
;
    border-top-color: rgb(221, 221, 221);
    border-top-left-radius: 4
px
;
    border-top-right-radius: 4
px
;
    border-top-style: solid;
    border-top-width: 1
px
;
    box-shadow: rgb(0 0 0 / 8%) 0px 1px 1px 0px inset;
    color: rgb(85, 85, 85);
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: normal;
    outline-offset: 0
px
;
    padding-bottom: 0
px
;
    padding-left: 8.45
px
;
    padding-right: 8.45
px
;
    padding-top: 0
px
;
    text-decoration: none solid rgb(85, 85, 85);
    text-shadow: none;
    text-transform: none;
    outline: 0
px
 none rgb(85, 85, 85);
}
<style>
.Input, .p-FauxInput {
    font-size: var(--fontSizeBase);
    border: 1
px
 solid #ddd;
    padding: 0.5
rem
;
    border-radius: var(--borderRadius);
    background-color: #fff;
}
.p-Input-input, .p-Select-select {
    display: block;
    width: 100%;
}

A 3rd party plugin could be causing this, amongst other things. Please check out this troubleshooting article here and follow the instructions for the following sections (where appropriate):

• Testing For Plugin Conflict
• Child Theme
• Disabling Cache
• Disabling Cdn

If after trying all of the above things you are still experiencing problems, please reply below, including login details to your site in a secure note, so that we can investigate further. You can add a secure note by clicking on the key icon underneath your post and then entering the details into the modal that appears. This way, the information will only be seen by you and us. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[amanjaura]

Hello @ruenel
I had tried disabling all the plugin and keeping just pro theme on along with woocommerce and woocommerce checkout and had the same issue still showing.
I’ve tried disabling mod_pagespeed too and the issue is still there.

[ruenel]

Hello @amanjaura,

If that is the case, please provide us with your WP credentials so that we can log in and investigate your issue. You can provide the following information in a secure note:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Thank you in advance.