Return to previous page

Checkout Page Tweaks - by talonhead - on WordPress WooCommerce support

This topic has 60 replies, 2 voices, and was last updated 7 years, 10 months ago ago by Jack Richardson

talonhead

Participant

June 10, 2016 at 10:03

Time for checkout!

Where is this page edited? Or can it be? My page doesn’t look at all like the standard Classico Checkout page. Layout is different.

The Paypal buttons need to be moved to the top.
I have no way for a customer to create an account on that page.
“Place Order” button needs text to be #c6c6c6 on hover…needs radiused corners as well

Please, contact administrator
for this information.

#129166 Copied

59 Answers
Jack Richardson

Support staff

June 10, 2016 at 11:10
Hello,

Checkout page uses default Woocommerce template. You need edit Woocommerce files if you want to change it. The layout is different because you’re using 3rd-party plugins for payment.

Please use this css code:
```
.before-checkout-form #paypal_ec_button {
 margin-top: -14px;
}
.before-checkout-form #paypal_ec_paypal_credit_button {
   margin-top: -13px;
}
```
```
.form-row.place-order input[type="submit"] {
   border-radius: 5px;
}
.form-row.place-order input[type="submit"]:hover {
   color: #c6c6c6;
}
```
The form to create account is present on Checkout page http://storage1.static.itmages.com/i/16/0610/h_1465553425_3974262_30a5159705.jpeg . You need check it as a guest.

Best regards,
Jack Richardson.
#129173 Copied
talonhead

Participant

June 10, 2016 at 14:21

When you say 3rd party plugins for payment. are you referring to my Paypal for Woocommerce plugin? That is messing with my Checkout layout?

I’ve played with the code you gave me but I can’t seem to have those Paypal buttons cooperate. Can you help me out with that? They just need to be placed at the top above your information banners…which incidentally, the first one shouldn’t even be there since I’m already logged in.

Please, contact administrator
for this information.

#129185 Copied

Jack Richardson

Support staff

June 10, 2016 at 15:11

Hello,

I’ve edited the code in Global Custom CSS section.
Please clear browser cache and check now.

Best regards,
Jack Richardson.

#129188 Copied

talonhead

Participant

June 10, 2016 at 15:14

This is what I got when not logged in.

Please, contact administrator
for this information.

#129190 Copied
Jack Richardson

Support staff

June 10, 2016 at 15:27
Hello,

I’ve edited the code to this one:
```
.before-checkout-form #paypal_ec_paypal_credit_button, .before-checkout-form .checkoutStatus {
   margin-top: -15px;
}
```
Please check the page now.

Best regards,
Jack Richardson.
#129194 Copied
talonhead

Participant

June 10, 2016 at 15:31

We’re getting there. Any reason why an informational banner has to surround the Paypal buttons? I’d rather it not. 🙂

Then if the banner is removed, the text has to change color to #c6c6c6 I would reckon.

#129195 Copied
Jack Richardson

Support staff

June 10, 2016 at 17:46
Hello,

Please use this css code:
```
div#checkout_paypal_message {
    background-color: transparent;
    border: none;
}
div#checkout_paypal_message:before {
  display: none;
}
.before-checkout-form .checkoutStatus {
    color: #c6c6c6;
}
```
Best regards,
Jack Richardson.
#129206 Copied
talonhead

Participant

June 11, 2016 at 11:54

That looks nice Jack.

And what to do when it’s on mobile? See attached when screen is small.

Please, contact administrator
for this information.

#129244 Copied
Jack Richardson

Support staff

June 13, 2016 at 10:29
Hello,

Please add this code in “Custom CSS for mobile” section (not in Global Custom CSS, but for mobile):
```
.before-checkout-form #paypal_ec_paypal_credit_button {
    margin-top: 15px;
}
.before-checkout-form #paypal_ec_button {
    margin-left: 10px;
}
.woocommerce_paypal_ec_checkout_message {
    width: 100%;
}
```
Best regards,
Jack Richardson.
#129312 Copied
talonhead

Participant

June 13, 2016 at 10:43

Not bad. But look. Text needs to come down.

Please, contact administrator
for this information.

#129324 Copied
Jack Richardson

Support staff

June 13, 2016 at 10:46
Hello,

Please also add this code in Custom CSS for mobile:
```
.woocommerce_paypal_ec_checkout_message {
   margin-top: 20px;
}
```
Best regards,
Jack Richardson.
#129326 Copied
talonhead

Participant

June 13, 2016 at 10:51

That fixed it for Mobile…but try re-sizing a browser window larger than mobile but smaller than desktop. See screenshot. That text is going all over the place.

Please, contact administrator
for this information.

#129329 Copied
Jack Richardson

Support staff

June 13, 2016 at 13:02
Hello,

Please add this code in Custom CSS for tablet:
```
div#checkout_paypal_message {
  display: inline;
}
```
Best regards,
Jack Richardson.
#129358 Copied
talonhead

Participant

June 13, 2016 at 13:14

I guess it works alright. There are a few steps in between there that the text has a hard time following.

Now on my layout, it doesn’t look like Classico’s. I don’t have any other plugin activated that would be messing with it.

That “additional information” field somehow got placed into a middle column? A column that doesn’t need to be there I presume? All the text fields are pretty crunched looking because of which.

Ideas?

Please, contact administrator
for this information.

#129366 Copied
Jack Richardson

Support staff

June 13, 2016 at 13:48
Hello,

Add this code in Global Custom CSS:
```
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    width: 100%;
}
```
Best regards,
Jack Richardson.
#129379 Copied
talonhead

Participant

June 13, 2016 at 14:28

Looking good! Thank you!

In that code, what do I play with to adjust the width of the left column? If I wanted to tweak it. And of course have it not mess up any other screen sizes.

#129394 Copied

Jack Richardson

Support staff

June 13, 2016 at 14:31

Hello,

Could you please show a screenshot what you want to achieve?

Best regards,
Jack Richardson.

#129396 Copied

talonhead

Participant

June 13, 2016 at 14:35

Sure. I just feel that the all the input fields don’t have to be in a column that wide. Maybe 50/50 balance between input fields and “Your Order” column.

If all that made sense.

Please, contact administrator
for this information.

#129398 Copied
Jack Richardson

Support staff

June 13, 2016 at 14:50
Hello,

Try to use this code in Custom CSS for desktop:
```
.page-id-7 .form-row {
  width: 40%;
}
.page-id-7 .form-row.form-row-wide {
    width: 80%;
}
```
Is that what you wanted?

Best regards,
Jack Richardson.
#129401 Copied
1 2 3

Viewing 20 results - 1 through 20 (of 60 total)