Add payment method layout issue

therealgilles
(@chamois_blanc)

8 years ago

Hello,

For some reason, the layout for the ‘Add Payment Method’ form under my-account is all jumbled:

https://ibb.co/ikxZJJ

I have not added any related css code.

The page I need help with: [log in to see the link]

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

Thread Starter

(@chamois_blanc)

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;
}

Thread Starter

therealgilles

(@chamois_blanc)

8 years ago

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;
}

Theme Author