Payment section doesn’t match theme color

  • Resolved Loralee_H

    (@loralee_h)


    3 years, 1 month ago

    Hi, My last message was marked as spam. This is a genuine support question.
    The site is in a staging environment so I can’t share a link, unfortunately. But I’m hoping someone can point me in the direction of a solution, none the less.

    Our website has an all-dark background with light colored font using the divi theme.
    All areas related to Woocommerce seem to be accessing the theme styles except this one section on the checkout page.
    //.jpg

    (or view here

    • https://snipboard.io/4TZkKL.jpg

      • )

      I highlighted some of the white text (shows up blue) and left the rest to show the text is really there, but almost invisible.

      Is there some code I can use to make this section follow the theme style?

      Thanks in advance.

      Cheers,
      Loralee

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

  • Hi @loralee_h ,
    yes you need to make some style to match with theme design. we can only help you if we have website link.

    Thanks
    Ahir Hemant

    Thread Starter Loralee_H

    (@loralee_h)

    This may not be the most elegant solution but it seems to be working out well. If someone would like to propose a cleaner piece of code than this for someone in the future, great. But I wanted to post this here in case someone else has a similar problem.

    I used the “inspect” tool and found the code that was controlling the grey area.

    //.jpg

    (or view here)

    • https://snipboard.io/KZUaB0.jpg
      • /*** PAYMENT BOX ON CHECKOUT ***/
#add_payment_method #payment div.payment_box, 
.woocommerce-cart #payment div.payment_box, 
.woocommerce-checkout #payment div.payment_box {
	background-color: #2f0021; 
	color: #ededed;
}
#add_payment_method #payment div.payment_box::before, 
.woocommerce-cart #payment div.payment_box::before, 
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #5b0041;
}
#add_payment_method #payment ul.payment_methods, 
.woocommerce-cart #payment ul.payment_methods, 
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 0;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: #2f0021;
    border-radius: 5px;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Payment section doesn’t match theme color’ is closed to new replies.