I’m using WooCommerce with X Pro and have a couple of issues with the Checkout!

[core365]

Hi, I’m using WooCommerce with X Pro and there’s a couple of things to do with the basket and checkout that I’m hoping you’ll be able to help me out with please!

1. For the ‘Basket’ page and ‘Checkout’ page, I’ve created my own pages using Pro page editor (Page Attributes template ‘Blank - No Container Header, Footer’) and added in the WooCommerce shortcodes. For the ‘Basket’ page I’ve added in text at the top of the page ‘Your Bag’ which is displaying correctly with the right font etc on the front end. I’ve done similar for the ‘Checkout’ page, yet when you view this page on the front end, the font size and colour is incorrect and the page layout is filling the whole width of the screen, whereas it has padding added to the left and right of it. If you edit the ‘Checkout’ page in Pro it’s displaying correctly, yet on the front end it’s looking different!

2. On the ‘Checkout page’, for the ‘Billing Details’ fields, is it possible to change the font colour of the placeholder text? I’ve tried to do this with CSS but nothing seems to work!

I’ll put the URL in a secure note as it’s being built on a temp link and I’ll put the admin login details too in case you need them!

Thanks!

[marc_a]

Hi @core365,

Thanks for reaching out.

There could be a plugin or custom code that affects your checkout page.

I recommend the following troubleshooting procedures before we investigate the settings.

1. TESTING FOR THEME RELATED ISSUE
2. TESTING FOR PLUGIN CONFLICT
3. THEME UPDATE
4. CHILD THEME
5. CSS/JS CUSTOMIZATION
6. VERSION COMPATIBILITY

Hope that helps and let us know how it goes.

Thank you.

[core365]

Hi @marc_a,

Ok, I’ll go through the list although I’ve already checked for a plugin conflict!

Are you able to help with point 2 please?

2. On the ‘Checkout page’, for the ‘Billing Details’ fields, is it possible to change the font colour of the placeholder text? I’ve tried to do this with CSS but nothing seems to work!

Thanks!

[prakash_s]

Hello @core365

Currently, it’s not recommended to edit Woocommerce reserved pages(Shop, Cart, Checkout) through the builder due to hook conflict. I would recommend using the standard editor (WordPress editor) for Woocommerce reserved pages or Checkout page.

Screenshot

To change the colour of placeholder text please add this custom CSS code under Pro–>Theme Option —>CSS

form.checkout.woocommerce-checkout ::-webkit-input-placeholder { 
/* Chrome/Opera/Safari */
  color: #000000;
}
form.checkout.woocommerce-checkout ::-moz-placeholder { 
/* Firefox 19+ */
  color: #000000;
}
form.checkout.woocommerce-checkout :-ms-input-placeholder { 
/* IE 10+ */
  color: #000000;
}
form.checkout.woocommerce-checkout:-moz-placeholder { 
/* Firefox 18- */
  color: #000000;
}

Please feel free to change the Color code as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[core365]

Hi @prakash_s,

Thanks, I appreciate your advice!

Thank you also for the CSS, it’s spot on!

Thanks!

[prakash_s]

Hi @core365,

Glad to help you. Have a nice day.

Thanks