80 Comments

1. 

   paul luse on January 19, 2019 at 3:56 pm

   Thank you!!! I have been searching forever for this information!!

   • 

     Leslie on January 20, 2019 at 8:49 am

     Awesome!! Glad it helped 🙂

     • 

       Innocentia Awuzie on December 1, 2019 at 1:44 pm

       I know nothing about coding, so do I just copy this whole code and paste?

2. 

   Muzammil Rafiq on January 24, 2019 at 3:55 pm

   Great help!

   • 

     Leslie on January 25, 2019 at 8:25 pm

     Thanks, glad it was helpful!

3. 

   Kazhughes on January 29, 2019 at 7:07 am

   Fantastic thank you so much

4. 

   Erik on February 8, 2019 at 8:32 am

   Hello,

   This is a question not quite on styling but on customizing the Cart page so I’m hoping you might help.

   I am trying to remove PayPal buttons from my Cart page (but not my Checkout page!) and wondering if you can help. Firstly, would I be able to do this from appearance > customize > additional css or should I be looking somewhere else? Secondly, I found this code from another help forum:

   .page-id-2906 #wc_braintree_paypal_container {
   display: none;
   }

   Is this what I should be looking to add?

   Great content and thank you so much!

   • 

     Leslie on February 8, 2019 at 10:20 am

     Hi Erik! Yes you would need to add CSS code and it can go in the customizer > additional CSS box, but the code you found wouldn’t work because it’s for a specific page on that person’s site. I can get you some code though, I just need a link to your site so I can inspect the code 🙂

   • 

     Leslie on February 8, 2019 at 10:25 am

     Actually just try this:

     .woocommerce-cart #wc_braintree_paypal_container {
     display: none;
     }

     • 

       Erik on February 8, 2019 at 11:37 am

       For some reason that worked great on our test site and then didn’t work on our live site. I will work on finding out why the live site isn’t functioning the same as the test but this was incredibly helpful! Thank you so much!

       If there is a place I can leave a review or anything else to support you I would be happy to. You have great content here and I was so happily surprised for your quick response.

       • 

         Leslie on February 8, 2019 at 5:05 pm

         Try adding the code to Divi Theme options > custom css box instead. It really shouldn’t make a difference but Divi can be finicky sometimes so it’s worth a try. And thanks for the kind words, I’m just happy people find something useful 😀

5. 

   Mandi on February 27, 2019 at 1:46 am

   I’m in awe, truly! I have been trying every dang code I can think of, using inspect element, and every tut I can find on the web, and my coupon wrapper in the cart still stubbornly stays the gray color. I want the input boxes to stay gray, the the wrapper around it to be #333. Any advice?

   It’d be great if I could get the “Cart Totals” wrapper to be #333 as well, and Cart Totals text to be #d4d4d4, but at this point, it’s the coupon wrapper that’s driving me the most bonkers lol

   • 

     Leslie on March 2, 2019 at 2:16 pm

     Hi Mandi, sorry for the delay in responding.

     When you say coupon wrapper do you mean the border? Because I see it being pink not grey so not sure I’m understanding what you want to change, or maybe you figured this one out already.

     https://ibb.co/WWDVTmp

     For the cart totals wrapper try this:

     .cart_totals table {
     border-color: #333;
     }

     as far as the text in the cart that’s a little different as not all of that content is wrapped in a p tag or span, the parts in the table are all created in different ways. You can email me at agirlandhermac @ gmail if you want me to get you some code for that but I want to be sure I’m understanding what you’re wanting.

6. 

   Diogo Ribeiro on April 1, 2019 at 5:31 am

   Hi!

   I’m having a problem with the CSS with checkout form and cart of woocommerce, everything looks unformatted. I tried to use your code, but did not help ;/ Could you please help?
   Check links: https://inhalation-summit.com/index.php/event/?add-to-cart=540
   https://inhalation-summit.com/index.php/checkout/

   Best regards, Diogo

   • 

     Leslie on April 2, 2019 at 12:52 pm

     Hi Diogo! Where are you putting the CSS code? When I add my first snippet for “main forms background color” with a background of red it is showing up correctly on your site so the code should work: https://ibb.co/dgsg1r5

     Do you have an area for custom CSS or are you adding it to a child theme?

     • 

       Diogo Ribeiro on April 2, 2019 at 12:54 pm

       Hi Leslie,

       I have managed to put the code! Everything looks great! Thank you!

       • 

         Leslie on April 2, 2019 at 1:13 pm

         Oh great!! Thanks for stopping by my site 🙂

7. 

   Andrew Vick on April 2, 2019 at 8:45 am

   This is fabulous, but I can’t get it to work. Using Avada Theme and I’m wondering if it’s overriding everything I’m trying to do. Any way to check for a conflict?

   • 

     Leslie on April 2, 2019 at 1:11 pm

     Hi Andrew! I’m just guessing here but I think because you’re using Woo plugins like WooCommerce Appointments and WooCommerce Deposits there may be styling from those overriding. Or it could be a ThemeFusion/Avada thing as it does have it’s own Woo styling.

     I can see my first snippet you added but your classes are slightly different. You can use these for form backgrounds but other stuff may require using inspect to find the right class of each element you want to change.

     .woocommerce-message {
     padding: 30px;
     color: white;
     }
     form.woocommerce-cart-form {
     background: orange;
     }
     .cart-collaterals .shipping-coupon .coupon {
     background: green;
     }
     .cart_totals {
     background: red;
     }

     you can see my changes here and change the colors to your own: https://ibb.co/k1v4kwx

     • 

       Andrew Vick on April 2, 2019 at 1:28 pm

       Wow – you’re good 🙂 I can’t find anything in Avada, but I did find this, which is all I’m trying to change (background of checkout form fields). I changed it to black, but really just trying to darken the existing light lavender for contrast. There’s a lot going on but it’s the background of the input fields on the checkout process – https://blueskysage.com/checkout/

       #comment-input input, #comment-textarea textarea, #tribe-bar-form input[type=text], .avada-select .select2-container .select2-choice, .avada-select .select2-container .select2-choice2, .avada-select-parent select, .chzn-container .chzn-drop, .chzn-container-single .chzn-single, .comment-form-comment textarea, .gform_wrapper .gfield input:not([type=”radio”]):not([type=”checkbox”]):not([type=”submit”]):not([type=”button”]):not([type=”image”]):not([type=”file”]), .gform_wrapper .gfield select, .gform_wrapper .gfield textarea, .gform_wrapper .gfield_select[multiple=multiple], .input-text, .main-nav-search-form input, .post-password-form label input[type=”password”], .search-page-search-form input, .searchform .fusion-search-form-content .fusion-search-field input, .select2-container–default .select2-selection–single, .select2-dropdown, .tribe-bar-disabled #tribe-bar-form .tribe-bar-filters input[type=text], .wpcf7-captchar, .wpcf7-form .wpcf7-date, .wpcf7-form .wpcf7-number, .wpcf7-form .wpcf7-quiz, .wpcf7-form .wpcf7-select, .wpcf7-form .wpcf7-text, .wpcf7-form textarea, input.s, input[type=”email”], input[type=”number”], input[type=”password”], input[type=”text”], select, textarea {
       background-color: #000;
       }

       • 

         Leslie on April 2, 2019 at 1:58 pm

         Hmm if you mean the dropdown select you can try this:

         .avada-checkout .select2-container–default .select2-selection–single {
         background: black;
         }

         Your code above is targeting more than just Woo forms so you may want to check your whole site to see if it’s affecting anything you don’t want it to.

         • 

           Leslie on April 2, 2019 at 2:01 pm

           If that’s not what you mean your form fields look blue to me so it looks like you figured that part out (?)

8. 

   Andrew Vick on April 2, 2019 at 2:14 pm

   It’s that light blue background that I’m trying to change. Haven’t figured it out yet 🙁

   • 

     Leslie on April 2, 2019 at 2:18 pm

     Okay email me because I think I’m misunderstanding which part but I’m sure I can figure it out for you agirlandhermac @ gmail 🙂

9. 

   Ron Henderson on April 2, 2019 at 3:36 pm

   Brilliant! Thanks so much Leslie. I was wondering is it possible to change the text “Basket Totals” in the basket page to “Total Price” using a snippet in the Custom CSS area?

   • 

     Leslie on April 2, 2019 at 7:11 pm

     Hi Ron 🙂 Actually there is a way to do that! Try this:

     .woocommerce-cart .cart_totals h2 {
     font-size: 0 !important;
     }
     .woocommerce-cart .cart_totals h2:before {
     content: “Total Price”;
     font-size: 26px;
     line-height: 1em;
     }

     I did it on my site so you can see it live or here: https://ibb.co/D1Msckq

10. 

    Monica on April 15, 2019 at 1:46 pm

    Thank you so much! Very helpful.
    I appreciate your work with Divi and DiviChat.

    • 

      Leslie on April 15, 2019 at 11:09 pm

      Thanks so much Monica! And thanks for listening to DC <3

11. 

    Barry Roode on June 22, 2019 at 11:36 am

    Hi Leslie,

    Thanks so much for this! Super helpful.

    I don’t see here how to change the colors of a few things. The background of the ‘Paypal’ area or on the top of the table where it says Product and Total on the Checkout Page.

    On the Cart form it’s at the top where it says ‘Product, Price, Quantity, and Total’ as Well as where it says ‘Cart Totals’

    I see where you have the other background color area but I can’t figure out these other spots and the inspector is stubborn about selecting these areas.

    Thanks so much!

    Barry

    • 

      Leslie on June 27, 2019 at 7:55 pm

      Hi Barry! Sorry for the delay in responding, for the PayPal area you can use this:

      .woocommerce-checkout #payment div.payment_box {
      background: red; /* PayPal box */
      color: white;
      }
      .woocommerce-checkout #payment div.payment_box::before {
      border-bottom-color: red; /* triangle */
      }

      For the other bits you asked about those areas are made up of tables and weren’t really designed for individual cell targeting so they can be a pain in the butt. Here’s a shot of how I grabbed some of the table parts in inspector: https://ibb.co/896xQL4

      so the code would look something like this

      .woocommerce-cart th.product-name {
      background: red;
      }
      .woocommerce-cart th.product-price {
      background: yellow;
      }
      .woocommerce-cart th.product-quantity {
      background: orange;
      }

      By the way I’m adding the .woocommerce-cart before the selectors so that it only affects this table on the cart page but it’s up to you if you want to remove that part. When you want to target something on only the checkout page you would use .woocommerce-checkout before your selectors like I did with the PayPal code.

      Let me know if that helps, thx for using my snippets 🙂

12. 

    BUNTY on August 6, 2019 at 2:28 am

    How to styling (drop Down) payment box on checkout, i m using Porto Theme & Woocoomece Multistep Checkout Wizard,

    Screenshot-
    https://prntscr.com/oox2c0

    Like This- Drop Down
    https://prntscr.com/oox624

    • 

      Leslie on August 6, 2019 at 2:01 pm

      Hi Bunty, you would need to inspect the code and tweak via CSS adding in those radio icons and other styling, I’ve never used that theme or plugin but it should be possible. They may have documentation on what code to change, otherwise you would need to hire a developer or designer to tweak it if you’re unable to as that’s more help than I’m able to offer in the comments here.

13. 

    Wil on August 19, 2019 at 4:39 pm

    Hi, Thank you so much for this script!

    I was wondering how to fix the following:

    The form field that reads, “House number and street name” is possible to indent the text a bit inwards. It’s too close to the border. Or just get rid of it completely.

    How can I add a secure badge image under proceed to checkout or under PayPal button?

    And lastly I would like to make the asterisk slightly bigger and change the color.

    Thank you

    • 

      Leslie on August 22, 2019 at 10:19 am

      Hi Wil, thanks for stopping by! Try these…

      Q1 (address and apt fields):
      input#billing_address_1,
      input#billing_address_2 {
      padding-left: 10px;
      }

      Q2
      button#place_order.button {
      margin-bottom: 110px !important; /* adds space below button, change as needed */
      }
      button#place_order.button:after {
      content: “”;
      display: block;
      margin: 0;
      background: url(“https://placehold.it/200×50”); /*change URL */
      position: absolute;
      top: 75px; /* moves image down, change as needed */
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      width: 200px;
      height: 50px;
      opacity: 1;
      cursor: default;
      }

      Sample: https://ibb.co/hVLHMfS

      Q3
      .woocommerce form .form-row .required {
      color: blue;
      font-size: 25px;
      line-height: 25px;
      }

    • 

      Leslie on August 22, 2019 at 10:21 am

      Also I’d retype any quotes just to be safe.

    • 

      Leslie on August 31, 2019 at 3:00 pm

      I’ve added a screenshot and changed the code a bit for Q2 🙂

14. 

    Shankar Shrestha on August 30, 2019 at 1:06 pm

    Hello, How can do customize / large size font word of “change address” of cart page by css. This word is into cart totals, shipping row. I want to its size large then now of the website.

    • 

      Leslie on August 31, 2019 at 1:43 pm

      Hi Shankar, try this (I added more than font size just so you could tell it’s being targeted):

      .woocommerce-cart .cart-collaterals .shipping-calculator-button {
      text-transform: uppercase;
      color: red;
      font-size: 22px;
      }

      Sample: https://ibb.co/pQZXX3y

15. 

    David Straub on October 9, 2019 at 12:30 am

    I’m wondering how I can edit the login/registration page in woocommerce. I’d like to change the size of the input fields instead of having them be very long. I’d also like to move the login in button so it’s above the “remember me” checkbox. Thanks in advance!

    • 

      Leslie on October 23, 2019 at 10:49 am

      Hi David! I’m so sorry for the delay in getting to this. I usually reply within a few days with code but have had a hectic few weeks. If you haven’t figured it out yet you can use the following code snippets…

      For the login field length you can reduce the size of the entire form like this:

      .woocommerce-form-login {
      max-width: 400px;
      }

      You can use % instead of px but that would make it look too skinny on mobile so px is probably best.

      To move the login button above “remember me” try this:

      .woocommerce-form-login .form-row {
      display: flex;
      flex-direction: column;
      }
      .woocommerce-form-login .woocommerce-form-login__rememberme {
      order: 2;
      }

      You’ll see after you do that your login button is now stretched out. If you like that then I would suggest adding this to remove the little space to the right of the button:

      .woocommerce-form-login .woocommerce-button.woocommerce-form-login__submit {
      margin-right: 0;
      }

      If you don’t want the button the length of the form box then add this and adjust the number:

      .woocommerce-form-login .woocommerce-button.woocommerce-form-login__submit {
      max-width: 200px;
      }

      Here’s a screenshot from a demo site: https://ibb.co/Wy4Xq82

      • 

        David Straub on October 23, 2019 at 10:45 pm

        Thanks so much! These codes worked perfectly! You’re a real guru. I’ve got two more questions for you.
        What is the code need to change the border color of the input fields within the login form? And the actually text within those fields. For instance I’d like the box around where the “username” goes to be black, and the text to be black as well. Thanks for your help!

        • 

          Leslie on October 24, 2019 at 5:16 pm

          Great, glad it worked for you!

          This will change those on that form:
          .woocommerce-form-login.login input {
          border-color: blue;
          color: red;
          }

          If you want that for every field on that page (login and register) use this selector instead:
          .woocommerce-account input

          Screenshot from your store: https://ibb.co/4T5sbhw
          I’m just using those colors so it’s easy to see the changes. I’ve tested all this code on your site (inc the second selector) and it worked for me.

16. 

    James Williamson on November 7, 2019 at 5:41 am

    Life saver thank you!!!

17. 

    G on November 7, 2019 at 4:38 pm

    Hi! How can I get rid of the striped background shading that’s showing up in the table on my cart page? I copied and pasted your CSS code and was able to change one of the stripe colors to white, but I’d like the each product row to have a white background, rather than every other row being gray. Any help is much appreciated!
    https://unfetteredletters.net/cart/

    • 

      Leslie on November 18, 2019 at 3:08 pm

      Hi G! So sorry for the wait on this, I’m afraid I somehow missed your question.

      Try this:

      .woocommerce table tbody>tr:nth-child(odd)>td,
      .woocommerce table tbody>tr:nth-child(odd)>th {
      background-color: #fff;
      }

      Screenshot: https://ibb.co/bgM22gW

18. 

    Nathan Lieberman on November 17, 2019 at 8:22 pm

    Hi! I’m loving the post and all the code has worked spot on except for the “Add to Cart” button on the single product page. The background hover color still works but the button color remains blue no matter what I try. Mind giving me a few tips on how to fix that if at all possible?

    Thanks and I’m enjoying your work!

    • 

      Leslie on November 18, 2019 at 3:14 pm

      Hi Nathan! If I’m understanding correctly this should work:

      .single-product button.single_add_to_cart_button.button.alt {
      color: red;
      }

      Screenshot from a demo site: https://ibb.co/pwV7mss

19. 

    Innocentia Awuzie on December 1, 2019 at 2:44 pm

    Honestly girl! Thank you for putting this out here, I appreciate

    • 

      Innocentia on December 1, 2019 at 2:46 pm

      Could you put out a code that would hide, the categories on woocommerece

      • 

        Leslie on December 5, 2019 at 12:09 pm

        Hi Innocentia! If you mean on the single product pages themselves you can use this:

        .product .product_meta {
        display: none;
        }

    • 

      Leslie on December 5, 2019 at 8:35 am

      Thanks! Were you able to figure out where to put this code? If you’re not using Divi you can put it in your theme customizer > custom CSS.

20. 

    Richard on December 14, 2019 at 9:24 am

    Just want to thank you! I was so fustrated with woocommerce not matching the rest of my site and no obvious way to change it.

    This page let me finish my site – https://www.otarshop.com/ 🙂

    Keep doing what you’re doing!

    • 

      Leslie on December 15, 2019 at 10:17 am

      Thanks Richard!! So glad it helped 🙂

    • 

      Mallory on May 26, 2021 at 5:09 pm

      Hi, can you let me know how to change the font size across the board on the checkout page?

21. 

    Randy Holcomb on December 23, 2019 at 3:17 pm

    On my checkout page I am wanting to change the color of the box with the wording: Have a coupon? Click to enter your code. It is currently a light blue and I need it to be more of a teal, #62bcb6. I hope you have something that helps.

    • 

      Leslie on January 6, 2020 at 12:52 pm

      Hi Randy! I’m so sorry for the delay in responding, I’ve been on vacation. It looks like you figured it out though, I see that box is now the hex color you provided. Let me know if I’m misunderstanding or if you needed help with something else. By the way I got a Cricut machine for Christmas so I may be one of your customers in the future lol 🙂

22. 

    User on April 19, 2020 at 9:58 am

    Never really comment on posts. But hey thanks for the code. Works great and I appreciate you!

    • 

      Leslie on April 20, 2020 at 10:33 am

      Thank you, glad to help! 🙂

23. 

    Richard on April 22, 2020 at 12:56 pm

    THANKS FOR THE CODE!!

    I only want to change the button background and font colours so grabbed the code under

    /*** ALL WOO BUTTONS ***/

    found the values to change and changed background top black and font to white, all worked great except the font colour of the Proceed to Checkout button in the basket which is black. Can you guide me to what I need to do to correct this, please?

    • 

      Leslie on May 6, 2020 at 9:26 am

      Hi Richard, my sincere apologies for taking so long to respond. I’m not sure if you already fixed this, I can’t seem to figure out how to add something to your cart but this is the exact class for the Proceed to Checkout button:

      .wc-proceed-to-checkout a.checkout-button {
      color: red !important;
      }

24. 

    CHARLES KIYIMBA on May 3, 2020 at 5:43 pm

    I have applied the css code and placed it in the child theme. While it’s working well with the cart page, it’s still giving me a lot of headache on the checkout page. It’s not centered on the interface both on desktop and mobile. Secondly, it has a background color I didn’t intend to have. What could be the problem? Please refer to these two pages: https://golaserengraving.com/shop/basket and https://golaserengraving.com/shop/checkout-page/.

    • 

      Leslie on May 6, 2020 at 9:13 am

      Hi Charles, thanks for your patience! I’m afraid I’m not sure what it is you want centered, can you give me a bit more detail? For the unintended background color I think you mean the teal color in the paypal box. For that you’ll need to change the colors pointed out here: https://ibb.co/hmRfZPx

25. 

    Rick Chapman on May 28, 2020 at 11:19 am

    Hi, thanks for the great code fixes! I have another Problem I can’t seem to figure out and would love your help please! I’m trying to change the little red ‘x’ button that removes a product from the cart. It is a red x that becomes a white x on hover. I just want to change the colours really!
    Thanks for your help!

    • 

      Leslie on May 31, 2020 at 6:48 pm

      Hi Rick, thanks for checking out my site! It looks like you already figured out how to change the red x color in the cart, let me know if there’s another place on your site I’m not seeing 🙂

26. 

    Terri on June 24, 2020 at 2:49 am

    Hi Lesley
    I had a tech guy remove American Express from my Account page where you add method of payment. Now the Paypal button has been removed and he can’t get it back. Paypal is working on the other pages, but we just can’t add it as a method of payment on the account page. Is this a CSS issue and can you help?

    • 

      Leslie on June 24, 2020 at 12:06 pm

      Hi Terri! That doesn’t sound like a CSS issue to me and I can’t look at your site and inspect since it’s behind a maintenance page, but I’m inclined to think it has to do with a Woo setting or which PayPal addon you’re using. There are several when I look at Woo documentation (PP Standard, PP Checkout, etc), and I logged into 3 different Woo sites of mine (live and demo) and I don’t see PP as an option to have as a saved payment method on the account page so it may have been tied to the Amex addon/plugin. I don’t believe adding a standalone PP account (no cc attached) is an option but I could be wrong, and because PP can be used with credit cards display settings may change based on whatever PP addon you’re using. I’m sorry if all that doesn’t help but if you haven’t already I’d go through your Woo settings one by one and make sure there isn’t something there, and if there isn’t my next step would be to look through your specific addon documentation. Thanks for stopping by my site! 🙂

27. 

    Ellie on July 19, 2020 at 9:08 am

    Hi Leslie,

    Wondered if you could help, please. The text on my coupon box at the top of the checkout is white as well as the text box. I’d like to change the text box colour to #f1d2cd but I can’t find the right place in the CSS for it. I’ve tried your coupon code above but it’s not worked for me. Thanks in advance

    • 

      Leslie on July 21, 2020 at 3:46 pm

      Hi Ellie! Try this code and let me know if it doesn’t work for you:

      .woocommerce-checkout .woocommerce-info,
      .woocommerce-checkout .woocommerce-info a {
      color: #f1d2cd !important;
      }

28. 

    webcaceres on September 23, 2020 at 6:12 am

    thanks ! its works

29. 

    Raphaela on November 4, 2020 at 1:38 am

    Probably the most bug free code I’ve ever found – I mostly write my own but it gets tedious when doing a bunch of websites and I just really wanted something a bit different, clean and to the basics and this was truly, bug free and perfectly written!

    Thanks a lot!

30. 

    Karin on February 4, 2021 at 12:24 pm

    Thank you sooooo much for this code.
    Worked like a BOM!

31. 

    Alberto on February 23, 2021 at 4:38 am

    Thanks and Thanks again!
    This is so far the best code for customizing woocommerce pages I ever found, and sadly I’ve spent a lot of time on google searching for something that works.

    • 

      Leslie on February 26, 2021 at 7:06 am

      Glad it helped Alberto!

32. 

    Sara on March 18, 2021 at 12:26 pm

    Hi guys!!

    I’m having a really hard time to fix this issue.. I’d be so glad to hear your comments.

    In the checkout page, “Your Order” section, I need to change the colour of the table/box background below “Product” and “Subtotal”. (This is where the products are listed with their price) The background is white and the text colour as well so you cannot read it.

    And second, I also need to change the background of the payment method title Ex. “Direct bank transfer” or “Pay Pal” because its also white, and the text colour is white too.

    I tried changing the text colour to black, but if I do the rest of my text colours change to black and since the general background is black you cannot read it.

    Thank you!! Appreciate your help in advance 🙂

    • 

      Leslie on March 21, 2021 at 1:14 pm

      Hi Sara! I see the site you linked to is under maintenance so I’ll help as best I can. The following code can be used to change the background of your first issue (below Product and Subtotal):

      .woocommerce-checkout-review-order-table tbody,
      .woocommerce-checkout-review-order-table tfoot {
      background: red;
      }
      example

      As you can see though the border may present a problem depending on your background color. The Woo forms are tables and every table cell isn’t treated exactly the same way when it comes to borders. It’s fixable, but I’d need to see the site.

      For the second issue try this:
      .woocommerce-checkout #payment {
      background: yellow;
      }
      example

      Hopefully this will help get you in the right direction 🙂

      • 

        Sara on March 22, 2021 at 7:43 am

        Hi Leslie!

        Thanks for the reply, still it is not fixed 🙁
        The first code changes the colour of the shipping, taxes etc table but not the upper table which says the name and subtotal of each product selected.

        I managed to change the colour of the product name in that table:

        .checkout table th, table td {
        color: #000000;
        }

        However, I still have to change the price text colour, and the text colour for the payment method.

        I disabled the maintanence mode so you can have a look at the checkout page!

        Thanks again!

        • 

          Leslie on March 22, 2021 at 11:08 am

          Thanks for removing the maintenance!

          Try this code:
          .woocommerce-checkout #payment ul.payment_methods li,
          .woocommerce-checkout #payment ul.payment_methods li:hover,
          .woocommerce #order_review table.shop_table tbody td {
          background-color: transparent;
          }

          Also you’ll need to remove the second part “table td” of that snippet you added. That’s too broad of a selector and it’s going to affect areas you don’t want it to.
          After those things are done I can see all the prices and text correctly: screenshot

33. 

    Sara on March 23, 2021 at 3:44 am

    Thank you so much Leslie!! It worked perfectly!! No need of the other code anymore, just replaced it with this new one.

    You’re the best 🙂 have a great day.

34. 

    Akash Gupta on October 5, 2021 at 11:35 pm

    Hey, I want to change the background color of my woocommerce cart & checkout page. I tried every thing. Can you please help? There is no option in my WordPress theme customization to change the default white color to my brand color.

    • 

      Leslie on October 11, 2021 at 9:41 am

      Hi Akash! Sorry for the delay in seeing this. You can try this code:

      .woocommerce-cart, .woocommerce-checkout {
      background: red;
      }

      I tried it out and it should work: screenshot