[Geoffrey HParticipant]

Hello,

After updating X to its most recent version I am having major problems with my checkout page. The formatting is completely scrambled. I am not a web designer and urgently need help as my organisation’s busy period is quickly arriving.

You can see the page here:

https://genevamusicfestival.com/checkout/
Wordpress 4.42
X ver. 4.4.2
Cornerstone v. 1.2.2

Please help!

[FriechModerator]

Hi There,

Thanks for writing in! Make sure you clear all the site’s caching feature (plugin & internal) and your browser’s cache as well.

You can install and run Transient Cleaner to clear the internal cache (https://en-ca.wordpress.org/plugins/artiss-transient-cleaner/).

1. Install Transient Cleaner
2. Navigate Dashboard -> Tools -> Transients
3. Set Clear Expired Transients -> Enable
4. Select Run Now
5. Set Remove All Transients -> Enable
6. Set Remove All Transients -> Optimize Afterwards
7. Select Run Now
8. Recheck your Cornerstone for functionality

I did check the page and it is not that bad, would you mind to clarify the issue?

Cheers!

[194rocParticipant]

Sorry for jumping in, I was browsing the support for the topic “formatting Checkout page” and I found this.

Now my checkout page is really messy…www.castello.it

May I have some tips to make it more attractive and less scary ?

From the screenshot below, you will notice that in last months I had quite few person entering the checkout page but I had only two sales.
http://prntscr.com/bieimg

In my opinion the formatting of this page is horrible and that is the main reason why potential customer are leaving yje page without buying.

I will really appreciate any tips and help on how to make a better checkout page.

Thank you very much,

best regards,

Roberto

[Rue NelModerator]

Hello Roberto,

Thanks for updating this thread! You are using renew and the check out page of renew looks like this: https://theme.co/x/demo/shop/renew/checkout/. There might be a plugin or a custom css that overrides your check out form styling. You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Hope this helps.

[194rocParticipant]

Hello Rue Nel,

thanks for the replay.

To be honest I already went through this issue with some of your colleagues at the support.

We came out with a lot of CSS that I am listing below:

/* migliora la formattazione nella pagina di checkout */
.woocommerce-checkout #payment {    background: #f7f6f7;    display: block;    padding: 18px;
}

.woocommerce-checkout .checkout .form-row-last#billing_postcode_field {
    margin-right: 4%;
}

.woocommerce-checkout .checkout #billing_email_field {
    margin-right: 0;
}

.woocommerce-checkout label.checkbox {
    text-align: left;
    width: 94%;
}

/* migliora la formattazione nella pagina di checkout specificatamente al bottone create an account*/
p.form-row.form-row-wide.create-account {
  width: 100%;
  float: left;
}

/* visualizza il logo paypal nella pagina di checkout */
li.payment_method_paypal label:before {
  content: url("http://www.castello.it/wp-content/plugins/woocommerce/includes/gateways/paypal/assets/images/paypal.png");
  vertical-align: middle;
}

/* visualizza il logo cartecredito nella pagina di checkout */
li.payment_method_gestpay-starter
label:before {
  content: url("http://www.castello.it/wp-content/plugins/woocommerce/includes/gateways/simplify-commerce/assets/images/cards.png");
  vertical-align: middle;
}

/* formatta il layout del carrello e del ceck-out su mobile*/
@media(max-width:767px) {

    .woocommerce-checkout #payment,
    table.shop_table.woocommerce-checkout-review-order-table,
    .x-child-theme-active .woocommerce .cart.shop_table,
    .x-child-theme-active .woocommerce-page .cart.shop_table,
    .x-child-theme-active .woocommerce .cart-collaterals table, 
    .x-child-theme-active .woocommerce-page .cart-collaterals table,
    .x-child-theme-active .woocommerce .cart-collaterals table th, 
    .x-child-theme-active .woocommerce-page .cart-collaterals table th,
    .x-child-theme-active .woocommerce .cart-collaterals table td, 
    .x-child-theme-active .woocommerce-page .cart-collaterals table td {
        display: block;
        width: 100%;
    }

    .x-child-theme-active .woocommerce .cart.shop_table th, 
    .x-child-theme-active .woocommerce-page .cart.shop_table th,
    .x-child-theme-active .woocommerce .cart.shop_table .product-name, 
    .x-child-theme-active .woocommerce-page .cart.shop_table .product-name,
    .x-child-theme-active .woocommerce .cart.shop_table .product-quantity, 
    .x-child-theme-active .woocommerce-page .cart.shop_table .product-quantity,
    .x-child-theme-active .woocommerce .cart.shop_table .product-subtotal, 
    .x-child-theme-active .woocommerce-page .cart.shop_table .product-subtotal,
    table.shop_table.woocommerce-checkout-review-order-table th  {
        font-size: 16px;
    }

    .x-child-theme-active .woocommerce .cart .actions .action-group, 
    .x-child-theme-active .woocommerce-page .cart .actions .action-group,
    table.shop_table.woocommerce-checkout-review-order-table {
        border-left: none;
        border-right: none;
    }

    .woocommerce-checkout #payment {
        padding: 0;
        width: 100%;
    }

    .woocommerce-checkout .checkout .payment_methods {
        padding: 18px;
    }  
}

.terms label.checkbox {
    float: right !important;
}
.woocommerce .cart.shop_table, .woocommerce-page .cart.shop_table,
.woocommerce .cart-collaterals table, .woocommerce-page .cart-collaterals table,
table.shop_table.woocommerce-checkout-review-order-table {
    width: 100%;
}

.woocommerce-checkout .checkout .form-row.terms label {
    margin-right:0 !important;
}

/* aumenta le dimensioni del campo mail all'interno del form del carrello*/
.woocommerce input[type="email"] {
    width: 75%;
}

/*formatta correttamente la lunghezza del campo email nel form di woocommerce*/
@media (max-width:979px){
.woocommerce-account .checkout .form-row-first, .woocommerce-account .checkout .form-row-last, .woocommerce-account .form-edit-address .form-row-first, .woocommerce-account .form-edit-address .form-row-last, .woocommerce-checkout .checkout .form-row-first, .woocommerce-checkout .checkout .form-row-last, .woocommerce-checkout .form-edit-address .form-row-first, .woocommerce-checkout .form-edit-address .form-row-last {
    width: 100%;
}
.checkout .woocommerce input[type="email"], .checkout .woocommerce input[type="tel"] {
    width: 100%;
}

Unfortunately as you noticed the result is still messy.
May I have some help in order to make a better and more effective CSS to fix this ?

For example, how could I put some padding between the email, phone and state item ?
And again how could I adjust in size the label text for those items?
How could I insert a border with some padding to include all the items of the form like the one Geoffrey, who started the topic, has ?

I noticed that the footer in the checkout page loose its background color, how should I fix it ?
Thanks for you help,

best regards,

Roberto

[Rue NelModerator]

Hello Roberto,

To have some padding between the email, phone and state item, please find this css block

.woocommerce-checkout .checkout #billing_email_field {
    margin-right: 0;
}

You can either remove that block or update it using this code instead:

.woocommerce-checkout .checkout #billing_email_field {
    margin-right: 4%;
}

To adjust the font size of the label, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.woocommerce-checkout label {
    font-size: 18px;
}

Hope this helps.

[194rocParticipant]

Hello Rue Nel,

it helps a lot, but I am facing several different problem now with CSS.

Just recently I asked support in order to remove the “buy now” “Acquista” button from the products page and I receive the following code

.woocommerce.post-type-archive-product .entry-product .add_to_cart_button.ajax_add_to_cart {
  display: none !important;
}

that it has been working fine till now, where this and many other CSS like this aren’t working at all

a.remove {
    font-size: 48px !important;
}

and many others like the background color and height of the footer:

x-colophon.top {

background-color: #4c4c4c;
padding:45px 0;
max-height:550px;
}

and many others that in these years with the help of the support I have arranged to work properly.

I need some help, please.

Thank you

Roberto

[194rocParticipant]

This reply has been marked as private.

[FriechModerator]

Hi Roberto,

Please find the block below on your Customizer’s custom CSS

/*formatta correttamente la lunghezza del campo email nel form di woocommerce*/
@media (max-width:979px){
.woocommerce-account .checkout .form-row-first, .woocommerce-account .checkout .form-row-last, .woocommerce-account .form-edit-address .form-row-first, .woocommerce-account .form-edit-address .form-row-last, .woocommerce-checkout .checkout .form-row-first, .woocommerce-checkout .checkout .form-row-last, .woocommerce-checkout .form-edit-address .form-row-first, .woocommerce-checkout .form-edit-address .form-row-last {
    width: 100%;
}
.checkout .woocommerce input[type="email"], .checkout .woocommerce input[type="tel"] {
    width: 100%;
}

That block is missing the closing the bracket, and cause a syntax that makes the other custom css underneath it not to work.

Let us know how it goes.

Cheers!

[194rocParticipant]

Yes it was the closing bracket missing.

Thank you very much.

Best regards,

Roberto

[ChristianModerator]

You’re welcome. Glad we could help. 🙂

[Author]

Posts