Woocommerce checkout page

  • Resolved benyovszki

    (@benyovszki)


    11 months, 2 weeks ago

    Hello folks,

    https://www.doroland.hu

    my checkout page in woocommerce (with Ocean WP theme) has fallen apart.
    ship_to_different_address should be aligned left and should be under the woocommerce-billing-fields. But it is on the right side on the top.

    And the order details and shipping methods and the privacy polcy ect should be on the right side on desktop.

    On mobile and tablet looks fine.

    Could you help me please ?

    • This topic was modified 11 months, 2 weeks ago by benyovszki.

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

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

  • Just add this CSS and you’ll be all set

    #place_order { width:100% } 

.woocommerce-form-login label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme { 
  margin-top: 12px; 
} 


@media (min-width: 768px){ 
#customer_details{ width: 60%; float: left; } 

#order_review_heading{
   width: 30%; float: left; 
   margin-left:2%; 
} 
#order_review{ 
 width: 38%; 
 float: left; 
 margin-left:2%; 
} 

.woocommerce table.shop_table td{ 
   width: 50%; 
} 

.woocommerce .col2-set .col-1, 
.woocommerce-page .col2-set .col-1, 
.woocommerce .col2-set .col-2, 
.woocommerce-page .col2-set .col-2{ 
   width: 100%; 
  } 
}

    And then clear your server and browser cache

    Thread Starter benyovszki

    (@benyovszki)

    thanks a lot, it solved my problem, i had to just modify in your code this line: 

    #customer_details{ width: 60%; float: left; }

    60% to 48% and so it looks well.

    Thanks again.

    • This reply was modified 11 months, 2 weeks ago by benyovszki.

    Yes you can do whatever you want based on whatever you want. I often show a narrow order review and the form fields wider in desktop.

    Take care

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Woocommerce checkout page’ is closed to new replies.