Checkout Page Tweaks - by talonhead - on WordPress WooCommerce support

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.

Hello,

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

Best regards,
Jack Richardson.

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.

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.

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.

Hello,

Please also add this code in Custom CSS for mobile:

.woocommerce_paypal_ec_checkout_message {
   margin-top: 20px;
}

Best regards,
Jack Richardson.

Hello,

Please add this code in Custom CSS for tablet:

div#checkout_paypal_message {
  display: inline;
}

Best regards,
Jack Richardson.

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.

Hello,

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

Best regards,
Jack Richardson.

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.

Hello,

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

Best regards,
Jack Richardson.

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.

Hello,

Please try to use this code in Custom CSS for desktop section:

.order-review .product-total {
  width: 50%;
}

Best regards,
Jack Richardson.

Hello,

Unfortunately it can’t be done.
Sorry.

Best regards,
Jack Richardson.

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.