Woocommerce checkout page customisation

Hello,

I am looking to get some advise on customising my woocommerce checkout page: https://www.letscando.com/checkout/

1 - how can I remove the sidebar currently present on the checkout page?

I used some css/functions php code to hide the sidebar on the other woocommerce pages, but this strategy isn’t working on the checkout page.

2 - how can I increase the width of the checkout page

once I have of course removed the sidebar :slight_smile:

3 - I’ve used the plugin “woocommerce checkout manager” to customise the checkout page.

https://wordpress.org/support/plugin/woocommerce-checkout-manager

Do you know however how I can remove the heading “billing details” which you can see at the top of the page?

if there’s a better method/plugin to customise the checkout page, than the above mentioned, I’d of course appreciate any recommendations.

Thanks!

Hello there,

Thank you for asking.

> 1 & 2

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.woocommerce-checkout #secondary{
  display: none;
}

.woocommerce-checkout #primary{
  width: 100%;
}

> 3

Apply the following CSS code:

.woocommerce-billing-fields > h3{
  display: none;
}

Regards,
Kharis

Hi

Thanks 1 & 2 worked perfectly.

Regarding the 3rd challenge, the code you provided removes all billing fields, but I only want to remove the top heading listed as “billing details”.

I would like to keep the following headers:
Personal Details
Billing Details (Cardholder Details)
Your order

Is there a way to isolate the top heading?

Even if the best way, would be to remove all headings using the code provided, then somehow add back in the above 3 headings, I could do this.

Please advise?

Thanks!

Hello there,

> 3

Try the following CSS code:


.woocommerce-billing-fields > h3{
  display: none;
}

h3#myfield1_field, 
h3#myfield12_field{
  display: block;
}


Regards,
Kharis

Worked perfectly! Thank you!

The support on this forum is incredible :slight_smile:

Hi - similar requests about headings on the Checkout page. Can you please help me insert 2 headings for ‘Your Payment’ and ‘Acknowledgement’ (for T&Cs)? I’d like them to be the same as Your Order. Have attempted to edit my child CSS but to no avail. https://hostabout.com.au/shop/checkout
Thanks in advance, Helen

Hello there,

Try adding the following CSS code, please.


.woocommerce-cart .panel-row-style {
  padding-top: 0 !important;
}

.page.woocommerce-cart .entry-header {
  margin-bottom: 14px;
}

.page.woocommerce-cart #pgc-3150-0-0{
  padding-left: 0;
  padding-right: 0;
}

Regards,
Kharis

Hi Kharis, These changes in the child.css didn’t make any difference to the checkout page extra headings. Any suggestions? https://hostabout.com.au/shop/checkout
Thank you, Helen

Hello there,

Please take a screenshot where the trouble is being visible. Then upload it to the free file hosting service like Google Drive, Dropbox, or cloudup.com and share its link here.

Regards,
Kharis

Hi there,

Been browsing this forum and this is thread’s subject is the closest to the question that I am after.

I have created a custom checkbox field after the order notes textarea.

The default label and checkbox are positioned in a way where it looks like its inline. Is there an easy way to format box checkbox and label? I just need which classes I need to modify - I am not that great with CSS and especially the level of inheritance/hierarcy in the WC CSS structure.

Thanks
Spike

Dear Spike,

Please share the link to your site, so I can inspect your the custom checkbox and label you added onto checkout page.

Regards,
Kharis

Thanks Kharis,

The URL is https://hub2health.com.au/123

Then navigate to the Shop menu and add some items - from there - its straight forward.

The custom checkboxes have been added to the checkout page - you will see the misalignment.

FYI - the custom checkboxes were created via the Checkout Manager Plug-in and they have not been as responsive as this forum.

Thanks
Spike

Dear Spike,

Thank you for sharing the link.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

#myfield1_field,
#myfield2_field{
  line-height: 1;
}

#myfield1_field label,
#myfield2_field label{
  line-height: 1;  
  margin-left: 20px;
}  

#myfield1_field .input-checkbox,
#myfield2_field .input-checkbox{
  margin-top: 0 !important;
  margin-bottom: -10px;
  margin-left: -20px;
  display: inline; 
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Thanks! That worked!

Cheers
Spike

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Dear Kharis,

I hope you can help me.

The site: https://everlasting-rz.com/zen/shop/donate/

I think the ‘‘issue’’ is obvious, it’s the width.

The code is:

.woocommerce form .form-row {
width: 100%;
}
.woocommerce-checkout #payment div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea {
width: 100%;
padding: 8px;
}
.woocommerce #payment .form-row select, .woocommerce-page #payment .form-row select {
width: 60%;
height: 20px;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
float: left;
width: 80%;
}
.custom-checkout h3 {
background-color: #165f1c;
width: 45%;
text-align: center;
padding: 10px;
border-radius: 5px;
margin-top: 30px;
color: #FFF;
float: right;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
padding: .6180469716em;
background-color: #f2f2f2;
color: #43454b;
outline: 0;
border: 0;
-webkit-appearance: none;
border-radius: 2px;
box-sizing: border-box;
font-weight: 200;
border:solid 2px #e4e4e4;
}

#wc_checkout_add_ons {
width: 45%;
float: right;
text-align: center;
}

@media screen and (min-width: 600px) {
.woocommerce-shipping-fields h3, .woocommerce-billing-fields h3 {width:60%;}
.woocommerce .col2-set, .woocommerce-page .col2-set {
width: 45%;
float: left;
}
.woocommerce-checkout-review-order{
width: 45%;
float: right;
}
}
@media screen and (max-width: 600px) {
.custom-checkout h3 {
width: 60%;

}
}

I hope you can help me out, I’m out of idea.

Thanks in advance
Annie

Hello Annie,

Thank you for reaching out to us here.

I am sorry nothing we can do as your site doesn’t use the theme authored by aThemes. This support forum is exclusively aimed for aThemes’ users. You can post your problem to the WordPress.org community support channel instead.

Regards,
Kharis