46 Comments

1. 

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

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

   Reply
   • 

     Leslie on January 20, 2019 at 8:49 am

     Awesome!! Glad it helped 🙂

     Reply
2. 

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

   Great help!

   Reply
   • 

     Leslie on January 25, 2019 at 8:25 pm

     Thanks, glad it was helpful!

     Reply
3. 

   Kazhughes on January 29, 2019 at 7:07 am

   Fantastic thank you so much

   Reply
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!

   Reply
   • 

     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 🙂

     Reply
   • 

     Leslie on February 8, 2019 at 10:25 am

     Actually just try this:

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

     Reply
     • 

       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.

       Reply
       • 

         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 😀

         Reply
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

   Reply
   • 

     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.

     Reply
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

   Reply
   • 

     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?

     Reply
     • 

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

       Hi Leslie,

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

       Reply
       • 

         Leslie on April 2, 2019 at 1:13 pm

         Oh great!! Thanks for stopping by my site 🙂

         Reply
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?

   Reply
   • 

     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

     Reply
     • 

       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;
       }

       Reply
       • 

         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.

         Reply
         • 

           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 (?)

           Reply
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 🙁

   Reply
   • 

     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 🙂

     Reply
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?

   Reply
   • 

     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

     Reply
10. 

    Monica on April 15, 2019 at 1:46 pm

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

    Reply
    • 

      Leslie on April 15, 2019 at 11:09 pm

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

      Reply
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

    Reply
    • 

      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 🙂

      Reply
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

    Reply
    • 

      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.

      Reply
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

    Reply
    • 

      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;
      }

      Reply
    • 

      Leslie on August 22, 2019 at 10:21 am

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

      Reply
    • 

      Leslie on August 31, 2019 at 3:00 pm

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

      Reply
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.

    Reply
    • 

      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

      Reply
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!

    Reply
    • 

      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

      Reply
      • 

        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!

        Reply
        • 

          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.

          Reply
16. 

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

    Life saver thank you!!!

    Reply
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/

    Reply
    • 

      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

      Reply
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!

    Reply
    • 

      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

      Reply