www.procidat.lv
Problem is that checkout page looks awful. I can download plugin that lets me edit some fields in checkout page, but the whole page either way looks ugly and stretched, I am afraid that it will scare away customers. Is there anything I can do about it? I have seen that for other uses woocommerce checkout page looks different, more compact and by design.
Please see checkout page image: (I made font smaller so You could see whole checkout content.)
Hello There,
Thanks for writing in! You checkout page has a blank sidebar. You may need to insert widgets for the sidebar or totally remove the blank sidebar by change the page template to Layout - Fullwidth
. To know more about the page template and how you can change it, please check this out: https://theme.co/apex/forum/t/features-page-templates/50/1
Your form is not showing any border for the fields because you may have added this code:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background: #fff;
padding: 20px 10px;
border: none;
}
If you could remove this code, you will be having something like this: https://image.prntscr.com/image/RJSUyNdVTJyNguzcU1-QMg.png
And if you want to have two columns in your check out page, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
@media(min-width: 980px){
.col2-set .col-1,
.col2-set .col-2 {
float: left;
width: 48%;
margin-right: 4%;
}
.col2-set .col-2 {
margin-right: 0;
}
}
And the final display would look like this:
Hope this helps.
That helped, thanks a lot. A minor porblem is that if customer will not choose Different shipping adrres, then title JOUR ORDER will appear in wrong place. How can I get it below input fields?
Hi,
To achieve that, you can add the code below in Theme Options > CSS
.woocommerce-checkout #order_review_heading {
clear:both;
}
Hope that helps.
Yes it does, thank You. Thats all.
You are welcome
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.