Credit Card CSS

Resolved ZLC
(@kindnessville)

1 year, 10 months ago

Hi friends,

I was working on my checkout page, and I noticed that the styling for the credit card section is in this horrible grayish-purple call-out box, and the padding between the card number, expiry, and CSC sections is gigantic.

I was wondering if you could please help me with the code I’d use to adjust the colors and padding.

If I could put the actual fields in white so the numbers would pop, that would be fabulous, too.

Thank you so much for your help.

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Thread Starter

ZLC

(@kindnessville)

1 year, 10 months ago

I figured out how to adjust the CSS to fix these issues.

meezer432

(@meezer432)

1 year, 10 months ago

ZLC, can you tell me how you fixed this please?

meezer432

(@meezer432)

1 year, 10 months ago

I was able to fix this by rolling back to version 3.1.6. This is a bug. Please fix it as soon as possible, so I can update to the latest version for other bug and security fixes.

ckadenge (woo-hc)

(@ckadenge)

1 year, 10 months ago

Hi @meezer432,

I understand you are facing a similar issue as @kindnessville and were able to solve the issue by rolling back the plugin to a previous version. So that we can be able to assist you further and troubleshoot together this issue, please open a new topic here.

This way, we can work hand in hand to understand how to reproduce the issue from our test stores.

Thank you for your patience and understanding.

Thread Starter

ZLC

(@kindnessville)

1 year, 10 months ago

@meezer432, here is the CSS I added to my site:

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
    background-color: #dadada;
}

#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before {
  border: 1em solid #dadada;
	border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
}

#braintree-hosted-field-number {
	background-color: white !important;
	height: 1.5em !important;
	width: 300px !important;
	max-width: 100% !important;
}

.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
  margin-top: 15px;
}

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
  color: black !important;
}

.comment-content img[height], .entry-content img, .entry-summary img, img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"], #site-header img {
  height: 100%;
}

#braintree-hosted-field-expirationDate {
	background-color: white !important;
	height: 1.5em !important;
	width: 150px !important;
	max-width: 100% !important;
}

#braintree-hosted-field-cvv {
	background-color: white !important;
	height: 1.5em !important;
	width: 150px !important;
	max-width: 100% !important;
}

#add_payment_method #payment div.form-row, .woocommerce-cart #payment div.form-row, #add_payment_method #payment div.form-row, .woocommerce-cart #payment div.form-row, .woocommerce-checkout #payment div.form-row {
  padding: 0;
}

#add_payment_method #payment div.payment_box .form-row, .woocommerce-cart #payment div.payment_box .form-row, .woocommerce-checkout #payment div.payment_box .form-row {
  margin: 0 0 0em;
}