How to customize checkout of woocommerce

The customization I am looking for is things like the color of the fill fields, color of text etc. Mostly I am looking to adjust things like padding on checkout page. The is a huge gap at the top of the checkout page and everything is spread out way more space than is necessary.

The checkout page is too dark and not really enticing to a purchaser.

Lastly, the checkout page on mobile is not responsive. text is spilling onto next lines and things are getting pushed around.

www.oliviabeymusic.com

Hello There,

Thanks for writing in! We will have to address the issues one by one. I can see that you are using the Integrity stack with a dark theme. Please switch to the light version and we shall start modifying the elements from there. It is much easier to adjust when you are seeing things not compared to what is displaying in your site now that it is just all black.

If you happened to switch to the light theme already, please iterate the things you want to changes so that we can guide how and where you can change the settings like colors, sizes and more.

Please let us know how it goes.

I do not want to change the entire theme to light. I solved the menu cart item with some CSS. I want to change only colors in the cart page and checkout primarily. Also, most importantly I want to make the checkout and cart more responsive on mobile and remove a lot of empty space on all devices

Hi there,

I have just checked the checkout page of your site and it seems that there is something that wraps the entire shop content in a <pre> tag which is breaking the responsiveness and causing the huge space on the page. This should not be the case even in the default settings on the theme so there must be something on your setup that is adding this. A third party plugin or a custom script.

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. And also try keeping a backup of your custom scripts and removing them on the site to check it as well.

Let us know how it goes!

If i do a CSS and decide to do away with it, how do I locate the added CSS afterwards if it is no longer stored in the cornerstone CSS areas? Do I have to go into editor or something?

Hi again,

You can keep all of your CSS in your Child Theme’s style.css file to make things easy. If you have page specific CSS then you’ll have to make a backup first and then after testing you can paste the CSS back in Cornerstone CSS.

Hope this helps!

I have tested the plugins with no change. I read an article elsewhere and they referenced the

 tag as well.  This expert mentioned deleting the pre tag.  How can I attempt this?

Hey there,

Can you please check for the following first:

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

  2. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.

  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  4. Activate Parent theme and deactivate the Child Theme.

If nothing works then you can add the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.woocommerce-checkout .entry-content.content .woocommerce').unwrap();
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

That worked perfectly on all devices! I looked all over in the file manager for the pre code to delete and could not find it. I found it on the page inspector and deleted it getting the desired results. But finding in the file manager seemed impossible. I’m pretty good with the coloring of things now as well.

Last thing would be to be able to change text for example on the shop page the text at the top. Having trouble figuring out how to edit

Thank you

Hi,

You can change it under Theme Options > Integrity > SHOP OPTIONS

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.