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, 11 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
talonhead

Participant

June 13, 2016 at 15:07

Sort of. If the input fields column moves over, the 2nd “your order” column should move with it. In other words, we’re trying to make the fields column thinner, and the “your order” column proportionately wider.

Did that make sense?

#129408 Copied

Jack Richardson

Support staff

June 13, 2016 at 18:00

Hello,

In this case Woocommerce template should be changed.
You have to edit Woocommerce php file.

Best regards,
Jack Richardson.

#129441 Copied

talonhead

Participant

June 13, 2016 at 22:46

Let me re-phrase and see if I get the same answer.

The “your order” and payment column needs to be wider (which in turn would shove the left column over equally). Workable?

Incidentally, a few other questions.

Is there a way to add a thumbnail in the “your order” column? Just as it has on the cart page?

Is there a better way to list product attributes on “your orders”? Because if a product has a lot of variables, it takes up quite a bit of room needlessly on the order form.

The “tax” amount needs to align right.

See also screenshots for more requests.

Thank you!

Please, contact administrator
for this information.

#129459 Copied
Jack Richardson

Support staff

June 14, 2016 at 12:40
Hello,

The “your order” and payment column needs to be wider (which in turn would shove the left column over equally). Workable?

It can’t be done with css code but requires customization in php files.

Is there a way to add a thumbnail in the “your order” column? Just as it has on the cart page?

Unfortunately there is no such feature.

As for tax amount use this css code:
```
.order-review td .amount {
  float: right;
}
```
This image http://prntscr.com/bg0e7h is added as breadcrumbs background in Theme Options > General > Header Settings > Breadcrumbs Style > Background large, and upload image in “Breadcrumbs background” section.

As for Coupon code field remove this code in Global Custom CSS section:
```
.coupon input[type="text"] {
    width: 220px;
}
```
Best regards,
Jack Richardson.
#129546 Copied
talonhead

Participant

June 14, 2016 at 14:14

Fair enough on the php. I’ll play with the code you gave me.

Is there a better way to list product attributes on “your orders”? Because if a product has a lot of variables, it takes up quite a bit of room needlessly on the order form.

See private content for an illustration.

Please, contact administrator
for this information.

#129568 Copied
Jack Richardson

Support staff

June 14, 2016 at 14:20
Hello,

Please try to use this code in Custom CSS for desktop section:
```
.order-review .product-total {
  width: 50%;
}
```
Best regards,
Jack Richardson.
#129575 Copied
talonhead

Participant

June 14, 2016 at 14:58

Pretty close!

Can each attribute be on its own line? See screenshot.

Please, contact administrator
for this information.

#129581 Copied

Jack Richardson

Support staff

June 14, 2016 at 18:53

Hello,

Unfortunately it can’t be done.
Sorry.

Best regards,
Jack Richardson.

#129617 Copied

talonhead

Participant

June 14, 2016 at 22:36

Hmm….what about removing attributes entirely?
What about at least making the actual product name BOLD?

#129646 Copied
Jack Richardson

Support staff

June 15, 2016 at 09:07
Hello,

Add this code in Global Custom CSS:
```
table.shop_table td.product-name {
   font-weight: bold;
}
```
```
.order-review .cart_item .variation {
  display: none;
}
```
Best regards,
Jack Richardson.
#129671 Copied
1 2

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