Woocommerce and Gravity Forms

Hello Elliot,

Thanks, that does the trick. I only have one problem left in my cart and that is the fields on the checkout page. They are messed up. Can you please advise again?

See checkout page:
http://www.boosty.nl.alvast-online.nl/afrekenen/

Thanks in advance!

Thanks, all fixed now. I only have one question left (well, for now of course…).

When on the final step of ordering a customer needs to accept our terms by checking a box. Now this is presented a bit floating on the right after the submit button (see screenshot). Can I manage to bring it with CSS, before the button? So a line with the checkbox and on a new line the submit button?

Thanks again!

Thanks for the fast reply. I’ve added the styles and it looks a bit better now. But is doesn’t on the phone. Text is over the order button. How to fix this?

It is not possible to get the line with the checkbox BEFORE the Submit button? Seems so much more logical…

Thanks!

Hello Andy,

Almost there, by adding your styles to the quick CSS it is now ok on desktop! Thanks for that. However on mobile it is not ok, I’ve included a screenshot of my mobile (iphone6).

Thanks in advance!

Hi There Andy,

This works fine for the checkbox of the terms but it messes up the checkbox from Ship to other address. See screenshot.

Thanks again in advance…

Thank Andy but not quite there…

I’ve changed the custom css like you said and this is in there now:

#top .title_container .container, stretch_full container_wrap alternate_color dark_bg_color title_container, .alternate_color {
  background: -webkit-linear-gradient(#e55c00, #ff7c24);
  background: -o-linear-gradient(#e55c00, #ff7c24);
  background: -moz-linear-gradient(#e55c00, #ff7c24);
  background: linear-gradient(#e55c00, #ff7c24);
}

.alternate_color .breadcrumb, .alternate_color .breadcrumb a, #top .alternate_color.title_container .main-title, #top .alternate_color.title_container .main-title a {color: #FFFFFF !important}

@media only screen and (max-width: 767px) {
.responsive #top #main .container_wrap:first-child {
  background: -webkit-linear-gradient(#e55c00, #ff7c24);
  background: -o-linear-gradient(#e55c00, #ff7c24);
  background: -moz-linear-gradient(#e55c00, #ff7c24);
  background: linear-gradient(#e55c00, #ff7c24);
}}

.page-thumb img {
  display: none;}

.logo, .logo a {
  overflow: visible !important;
  height: 110%;}

form.cart {
  overflow: visible !important;
  z-index: 100 !important;
}

#billing_city_field, #shipping_city_field {
float: right !important;
}

@media only screen and (max-width: 767px) {
.responsive .title_container .breadcrumb {
  font-size: 16px;
  line-height: 28px;
}}

p.form-row.terms {
float: left;
margin-left: -118px !important;
padding-top: 15px !important;
}
input#place_order {
float: left !important;
margin-top: 16px !important;
margin-bottom: 15px !important;
}

#top .form-row .input-checkbox { position: relative; right: 380px; }
/* p.form-row.terms { margin-top: -30px!important; } */

@media only screen and (max-device-width: 767px) {
input#terms {
top: -21px !important;
}}

But somehow it still looks messed up on the mobiel checkout, can’t finish the process cause the checkbox is mandatory to complete the order. Please help as we need to go live with this site.

Thanks.

Hey there, Andy,

Thanks for your fast support. Too bad is does not look good on the desktop now, please see screenshot.

Hi Andy,

Thanks for your support, looks beautiful!

I’d love to buy you a beer, whenever you’re in Amsterdam, I’ll buy you a big one!