Can you point me in the direction so that customizing the layout of this payment form and order things sequentially different. The default form here is at the bottom of this page https://wishcandle.com/checkout/
I’d like to change or customize the title above each input section and set each input field width and possible figure out how to eliminate the cardholder name field since that should be gathered from the section above which requires the billing info name and address etc. Maybe wanting to align everything vertically stacked or at least have some ability to customize this credit card payment form layout. I know this might entail having to edit other files in addition to css but can you help with what is in your scope of support and at least let me know what other files will have to be edited. I appreciate all support with this, thank you 
Hello There,
Thanks for writing in!
The credit card name is needed for the credit card form because the name above is not in anyway related and carried out by default.
To resolve your css issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
.payment_method_usaepay .input-text{
width: auto !important;
height: auto !important;
padding: 4px;
}
.payment_method_usaepay .woocommerce-select {
height: auto !important;
padding: 8px !important;
}
.payment_method_usaepay .form-row-first,
.payment_method_usaepay .form-row-last {
float: none !important
}
Hope this helps.
Ok thanks, that is maybe a little closer but still there is uneven widths between the expiration date input and the other input boxes even when I change width to 100%. I want to be able to customize all the elements within the checkout payment form so that is what I was asking in the last reply, not just for you to send me a few lines of css code - but thank you. I’d maybe like all the input boxes and selectors to be about 1/2 of the width of the page content not including sidebar except the CVV input be shorter like I’ve seen on nearly all standard web store checkout screens. And not have those * do an auto word wrap to a second line on the mobile view and on mobile view have all the input boxes and selectors be full width. On mobile phone view the input box labels such as credit card number and card security code does something that places the * on a second line, this is unwanted and is wanted for them to fit on one line. And the auto fill when clicking on the remembered card number auto fills the card holder name with an address associated to the card, what is wanted is for the name to fill in that section correct? I know this is maybe a lot of topics for one reply but I want to get it out there and can add new topic threads for each if necessary.
thanks
Hello There,
Thanks for updating in!
Please have the code updated and use this:
.payment_method_usaepay .form-row {
width: 60% !important
}
@media(max-width: 979px){
.payment_method_usaepay .form-row {
width: 100% !important
}
}
.payment_method_usaepay .form-row-first,
.payment_method_usaepay .form-row-last {
float: none !important
}
.payment_method_usaepay .input-text{
width: 100% !important;
height: auto !important;
padding: 4px;
}
.payment_method_usaepay .woocommerce-select {
height: auto !important;
padding: 8px !important;
max-width: 100% !important;
}
If there is a need to style the input text and select element, you can add your custom css in the code above.
For example:
.payment_method_usaepay .input-text{
width: 100% !important;
height: auto !important;
padding: 4px;
/* add your custom style below */
}
.payment_method_usaepay .woocommerce-select {
height: auto !important;
padding: 8px !important;
max-width: 100% !important;
/* add your custom style below */
}
Hope this helps.
Yes, thank you this is looking better and I will customize as I can thanks for your much appreciated help
How do I shorten the width of the Card Security Code individually? as that was shorter by default before. I tried adding
#usaepay_cvv.input-text {
width:100px
}
but that didn’t work so maybe the class or syntax or something is wrong?
Hi There,
Please update your CSS code to this:
.payment_box #usaepay_cvv {
width: 100px !important;
}
Hope it helps,
Cheers!
Sweet thank you! So I wasn’t able to inspect that element to find out what css to change until you told me what it is. How did you know what that code or class was to add as that that you replied? Inspecting many of the elements by default don’t always show the code title or maybe it’s called class I think.
Hey @adubs777,
You would actually need to understand how HTML and CSS works to know what selector you need to use. You can learn them from here. And, also note that what we did here is beyond the scope of our support. The code we’ve given serves only as a guide and it would be your responsibility to maintain, enhance and fix if issues arise from using them.
Thank you for understanding.
I understand enough HTML and CSS to know how to use the names and classes and identifiers in the language format. I was simply asking how did you find that code to change for something that doesn’t show up with the (right click) Inspect element tool on browsers. So I get that you claim this is outside of your scope in order to make money relevant to your specific knowledge and training, I just thought you could simply send me a reply with something like the code you’re looking for is in (example file) file found with this (example) folder path, or simply you can look more in depth for that specific code to change by clicking on (this example button) on your browser’s inspect element tool I realize the nature of this business you’re participating in, just thought the human heart in you or someone there would actually penetrate the veil of survival security and be able to allow the transparency of helpful information to the general population.
Thank you Enjoy your day.
Thoughts and Feelings are the cause, Forms and Conditions are the effect
Hi @adubs777
Actually, my colleague Christian shared with you very helpful resources to learn, I’m not sure if you agree with me or not but I see this could be very useful for you in the future that you will be able to unleash your creativity and apply as many CSS modifications as you want without hiring someone, however I added some notes for you on this screenshot that I hope you find them helpful as well:
Thanks.
Alaa, Thank you for chiming in with helpful tips I appreciate that Christian assumed I need to understand HTML and CSS, and that was his judgment based on a lack of understanding that I do have an understanding of these and the problem is that I am not always able to find the specific class names or ID by using the inspect element tool on the browser - at least the way I’ve been using that on Chrome and that there must be another way to find that.
Hi There,
Sorry, I should have also explained how I did come up with the CSS given, actually, your initial CSS code was correct
#usaepay_cvv.input-text {
width:100px
}
Its just have a weak CSS selector that it can not overwrite the styling that is pointed by Alaa on his screenshot.
So I added the parent div class .payment_box to make the selector more specific/stronger, you can also see the parent <div> with class payment_box on Alaa’s screenshot.
So I have now this CSS code
.payment_box #usaepay_cvv {
width:100px
}
But it did not work, so I investigated further and notice that the styling that needs to be overridden is declared as !important. !important in CSS means absolute styling, you can’t override this unless your custom CSS property value is also declared !important.
That is how I came up with my final custom CSS.
.payment_box #usaepay_cvv {
width: 100px !important;
}
You can learn more about CSS Specificity here…
Cheers!
OK Thanks I appreciate you clarifying how that worked.