Add payment method layout issue

There is also a missing “clear: both” on the payment label element, as the images are floated right, the div needs to be cleared.

Something like this does the job:

.woocommerce-MyAccount-content #payment ul.payment_methods .woocommerce-PaymentMethod>label:after,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method>label:after {
  content: "";
  clear: both;
  display: table;
}

Here is my css to fix the add payment method form:

/* WooCommerce My Account -> Add Payment Method */
.woocommerce-MyAccount-content #payment ul.payment_methods > li {
  background-color: #fafafa;
}

#add_payment_method #payment input#payment_method_stripe {
}

.woocommerce-MyAccount-content #payment ul.payment_methods .woocommerce-PaymentMethod>input[type=radio]:first-child {
  position: absolute!important;
  clip: rect(1px,1px,1px,1px);
}

.woocommerce-MyAccount-content #payment ul.payment_methods .woocommerce-PaymentMethod>label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding: 20px;
  cursor: pointer;
  margin: 0;
  letter-spacing: .4px;
}

.woocommerce-MyAccount-content #payment ul.payment_methods .woocommerce-PaymentMethod>input[type=radio]:first-child:checked+label:before {
  content: '\f192';
  color: #13aff0;
}
.woocommerce-MyAccount-content #payment ul.payment_methods .woocommerce-PaymentMethod>label:before {
  font-family: fontawesome;
  text-rendering: auto;
  display: inline-block;
  font-size: inherit;
  content: '\f10c';
  color: #333;
  margin-right: 10px;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

.woocommerce-MyAccount-content #payment ul.payment_methods .woocommerce-PaymentMethod>label:after,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method>label:after {
  content: "";
  clear: both;
  display: table;
}

.woocommerce-MyAccount-content #payment div.woocommerce-PaymentBox {
  position: relative;
  width: 100%;
  padding: 1.4em;
  font-size: .92em;
  line-height: 1.5;
  background-color: #fff;
  color: #555;
}

.woocommerce-MyAccount-content #payment div.woocommerce-PaymentBox p {
  margin: 0;
}

.woocommerce-MyAccount-content #add_payment_method .woocommerce-PaymentMethod label {
  margin-left: 0;
}

.woocommerce-MyAccount-content #place_order {
  width: 100%;
  font-size: 15px;
  line-height: 1.6;
  padding: 16px 20px;
}

Hello, can you exactly tell me how can I reproduce the issue? I will fix it for the next release.

Go to ‘/my-account/add-payment-method/’ on any of your websites should should the issue.

I wish WooCommerce would share the css between this page and the checkout page. It would make keeping with their change easier.

Thank you very much, I will add your code for the next release.