Search code examples
csswordpresswoocommercedivi

How to edit font color in woocommerce checkout page


Im trying to modify the h3, body and cart detail's font color on my check-out page, I had it right before but this line seems to be overriding my previous style. This is what im trying to achieve

https://intiwallets.com/checkout/

.et_pb_bg_layout_dark, .et_pb_bg_layout_dark h1, .et_pb_bg_layout_dark h2, .et_pb_bg_layout_dark h3, .et_pb_bg_layout_dark h4, .et_pb_bg_layout_dark h5, .et_pb_bg_layout_dark h6 {
   color:#FFF !important;
}

If I un-check that my regular styles show up correctly. Print

I tried these lines to fix it but it did not solve the issue as the order details are still showing up in white, same as the credit card gateway label. Print

div.woocommerce h3 {
    color:#222222!important;
}

div.woocommerce p {
    color:#404040
}

li.wc_payment_method.payment_method_wocommerce_yape_peru, li.wc_payment_method.payment_method_bank_transfer_1, 
li.wc_payment_method.payment_method_bank_transfer_2, 
li.wc_payment_method.payment_method_bank_transfer_3 {
  color: #404040!important;  
}

Also tried this, but it overrode all my other pages settings.

.et_pb_bg_layout_dark
{
color: #404040!important
    }

Thank you in advance, any feedback would be highly appreciated.


Solution

  • This fixed the issue.

    div.woocommerce-checkout-review-order {
    color: #404040!important
    }
    
    div.woocommerce h3 {
        color:#222222!important;
    }
    
    div.woocommerce p {
        color:#404040
    }