Check Out Form Layout

[Web_Browser]

Hi,

On our page;

Checkout

Would like to:
1. Remove – Company name (optional)

2. Remove – County (optional)

3. Remove – Order notes (optional)

4. Above – We note that your donation is for,
To have heading in same css style as Additional information however to say DONATION TYPE

5. Above – Gift Aid Declaration – Increase the value of your donation by 25%. I am a UK

To have heading in same css style as Additional information however to say GIFT AID DECLARATION

6. Above – May we contact you by ?

To have heading in same css style as Additional information however to say CONTACT

7. Above – Optional) Select any of the following to add to your order:

To have heading in same css style as Additional information however to say OPTIONAL

8. Also if possible can the radio fields yes and no under Gift Aid Declaration be next to each other and not below each other?

9. Also if possible can the multi – checkbox fields Email, Post, Telephone and SMS under May we contact you by ? be next to each other and not below each other?

10. Can all the headings and form fields from requests points 4 to 9 not be in the same column as BILLING DETAILS but go above YOUR ORDER on the right hand column?

I hope you can help me with these requests.
Appreciate your help. Looking to take live tomorrow noon (GMT)  London.

Many Thanks

[Web_Browser]

Hi,

I understand that in request 8 above – in the CSS styling of the elements that have the id: wc_checkout_add_ons_x_field, where x is the number of add-ons that have been created. If this helps in nay way.

Appreciate your help and support with me.

[Harry]

Hi,

1,2. Please add below code to claue-child > functions.php

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'my_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function my_override_checkout_fields( $fields ) {
	unset($fields['billing']['billing_company']);
	unset($fields['billing']['billing_country']);

	return $fields;
}

3. Please add below code to Claue > Theme Option > General Layout > Custom CSS

.woocommerce-additional-fields {display: none;}

4,5,6,7. Could you please contact to plugin author

8,9. Please add below custom CSS

.woocommerce form #wc_checkout_add_ons .form-row label {
	display: inline-block;
}

10. Please check with plugin author

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Web_Browser]

Hi,

Many thanks for your help and reply, appreciate it.

1,2 – It also removed the country so I changed to
unset($fields[‘billing’][‘billing_county’]);

however did not remove County (optional). Please can you help with script to remove County (optional)

3. Thanks, is it possible to keep the heading displayed as it was also removed – Additional information in caps.

4,5,6,7. OK will try. I tried for 8,9 however they said it was not possible and gave me a list of developers / companies I should use. If you can do this, will their be a charge and if so how much will it cost? and how long will it take?

8,9 Thanks I tried and got the following:
https://prnt.sc/ml3aq5

Would have been nice to have radio fields on one line together with check boxes. However currently if I can get the Email check box on the next line this will be fine for us to take live.

10, If you were to do it, how much and long will it take?

Many Thanks again. Against a tight deadline and looking to go live tomorrow noon (GMT)

[Harry]

Hi,

1,2. Please change code to

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'my_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function my_override_checkout_fields( $fields ) {
	unset($fields['billing']['billing_company']);
	unset($fields['billing']['billing_state']);

	return $fields;
}

3. Please change code to

.woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper {display: none;}

8,9. Please add below code

#wc_checkout_add_ons_4_field label:first-child {display: block;}

4,5,6,7. I can help you do with cost is $30 in one hour

10. We need more time to check.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Web_Browser]

Hi,

Thank you for your swift updates, much appreciated.

1,2  – Great works, Thank you.

3, Added code but did not see a difference. I thotght I might hav added wrong. I iniytally justadded to css as;

[code before]
.woocommerce form #wc_checkout_add_ons .form-row label {
display: inline-block;

[added code]

#wc_checkout_add_ons_4_field label:first-child {display: block;}
}

 

then I thought it should be like this;

.woocommerce form #wc_checkout_add_ons .form-row label {
display: inline-block;

#wc_checkout_add_ons_4_field label:first-child {display: block;}
}

However both options I did not see a change.

4,5,6,7. – Thanks for quote. Let me see if we need this now and get back.

10, Thanks, thats fine. Await your reply.

Many Thanks – appreciate your support.

[Harry]

8. Please change code to

.woocommerce form #wc_checkout_add_ons .form-row label {display: inline-block;}
.woocommerce form #wc_checkout_add_ons .form-row #wc_checkout_add_ons_4_field label:first-child {display: block;}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Web_Browser]

Hi,

I added the code and got the image below;
https://prnt.sc/ml5saf

Could not see a change. Really appreciate you helping and trying to adjust the formatting.
I guess the main issue is with email and check box on same line as ‘May we contact you by ?

Appreciate your help with this.

[Web_Browser]

Hi, I was meant to say I changed  / updated the code not added.

[Web_Browser]

Hi,

I have changed to Multi Select, however the check boxes would have been better. Just needed a break after the sentence

May we contact you by ?

Appreciate you help

[Harry]

Hi,

I help you fixed the issue and correct code is

.woocommerce form #wc_checkout_add_ons .form-row label {display: inline-block;}
.woocommerce form #wc_checkout_add_ons .form-row#wc_checkout_add_ons_4_field label:first-child {display: block;}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Web_Browser]

Thank you. Just checked and works.
Great supports.

[Web_Browser]

Hi Harry,

I updated the plugin – woocommerce-checkout-add-ons however I am have some issues:

1. On Checkout page:

May we contact you by ? email
post
phone
sms

After the ? Their should be a break space. I can see you helped me with this before

Harry wrote:

Hi, I help you fixed the issue and correct code is

.woocommerce form #wc_checkout_add_ons .form-row label {display: inline-block;}
.woocommerce form #wc_checkout_add_ons .form-row#wc_checkout_add_ons_4_field label:first-child {display: block;}

Kind regards

However since the field attributes / names look like have changed, it is not creating the break space.

I hope you can help.
Many Thanks.

Rizwan

[Web_Browser]

Hi Harry,

I also noticed that when GAD or May we contact you by ? is selected before it would auto refreash and show the changes on the right hand side, however this does not happen now.

I hope you can look at this also.
Many Thanks
Rizwan

[Harry]

Hi Rizwan,

1. Please change code to

.woocommerce form #wc_checkout_add_ons .form-row label {display: inline-block;}
.woocommerce form #wc_checkout_add_ons .form-row#a32eae6_field label:first-child {display: block;}

2. I check it still work well with GAD and Maybe we contact you by? http://prntscr.com/n3evjs

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Web_Browser]

Hi Harry,

Many Thanks for  the update it works very well nd I can see it also updates right hand side form automatically.
Many Thanks
Kind Regards,
Rizwan

[Author]

Posts