Support » Plugin: WooCommerce » Checkout page summary box color

  • Resolved exxis

    (@exxis)


    How can I change the color from the summary box on the checkout box? I mean the box where all products are listed again with the total and subtotal prices?

    Because I have a dark purple background and white text, and the box is light grey with white text, so the text is not visible

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    HI there 👋

    Could you please share a screenshot and a link to your site so that I can check?

    For screenshots, I recommend https://snipboard.io for easily sharing screenshots – please follow the instructions on the page, then paste the URL here. It works with Chrome, Firefox, Safari, and Edge.

    Cheers.

    Thread Starter exxis

    (@exxis)

    Here’s the screenshot

    Thread Starter exxis

    (@exxis)

    can’t post the link the the website currently under construction, I think the screenshot should be enough.
    https://snipboard.io/qtiK7X.jpg

    Plugin Support Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Hey @exxis,

    Without being able to see the HTML output of the site it’s difficult to offer any CSS to help change the colour of the section within your screenshot.

    To achieve this type of colour change I’d recommend using Google Chrome Developer Tools. You can right click anywhere on your webpage to select ‘Inspect Element’, the HTML and CSS properties show up right in your browser.

    You can then write some custom CSS to change the section colours using the CSS classes related to that section you can see when using Chrome Developer tools.

    Thread Starter exxis

    (@exxis)

    website is https://lyndralynn.com carefull content on the website is NSFW. However this seems like the “standard” color in the checkout.

    Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    Thank you for sharing the link.

    This can be fixed with the following custom CSS. Under Customize > Additional CSS, you can add the following code:
     

    /* Change checkout table bg color */
    .woocommerce-checkout .shop_table {
        background-color: #2d085d !important;
    } 
    

     
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Cheers 🙂

    Plugin Support Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can reopen it again if you need be.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Checkout page summary box color’ is closed to new replies.