Title: Add payment method layout issue
Last modified: May 28, 2018

---

# Add payment method layout issue

 *  [therealgilles](https://wordpress.org/support/users/chamois_blanc/)
 * (@chamois_blanc)
 * [8 years ago](https://wordpress.org/support/topic/add-payment-method-layout-issue/)
 * Hello,
 * For some reason, the layout for the ‘Add Payment Method’ form under my-account
   is all jumbled:
 *  [https://ibb.co/ikxZJJ](https://ibb.co/ikxZJJ)
 * I have not added any related css code.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadd-payment-method-layout-issue%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Thread Starter [therealgilles](https://wordpress.org/support/users/chamois_blanc/)
 * (@chamois_blanc)
 * [8 years ago](https://wordpress.org/support/topic/add-payment-method-layout-issue/#post-10330312)
 * 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](https://wordpress.org/support/users/chamois_blanc/)
 * (@chamois_blanc)
 * [8 years ago](https://wordpress.org/support/topic/add-payment-method-layout-issue/#post-10330322)
 * 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 [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [8 years ago](https://wordpress.org/support/topic/add-payment-method-layout-issue/#post-10332306)
 * Hello, can you exactly tell me how can I reproduce the issue? I will fix it for
   the next release.
 *  Thread Starter [therealgilles](https://wordpress.org/support/users/chamois_blanc/)
 * (@chamois_blanc)
 * [8 years ago](https://wordpress.org/support/topic/add-payment-method-layout-issue/#post-10333540)
 * 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.
 *  Theme Author [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [8 years ago](https://wordpress.org/support/topic/add-payment-method-layout-issue/#post-10337073)
 * Thank you very much, I will add your code for the next release.

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

The topic ‘Add payment method layout issue’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/oceanwp/4.1.6/screenshot.png)
 * OceanWP
 * [Support Threads](https://wordpress.org/support/theme/oceanwp/)
 * [Active Topics](https://wordpress.org/support/theme/oceanwp/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/oceanwp/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/oceanwp/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [layout](https://wordpress.org/support/topic-tag/layout/)
 * [payment method](https://wordpress.org/support/topic-tag/payment-method/)

 * 5 replies
 * 2 participants
 * Last reply from: [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * Last activity: [8 years ago](https://wordpress.org/support/topic/add-payment-method-layout-issue/#post-10337073)
 * Status: not resolved