• Resolved rich.h.worley

    (@richhworley)


    I am trying to change the font color of the product descriptions, prices, and the shopping cart content. Presently, the product description is a black font color on a black background; not a good look! and the content in the shopping cart is white on a white background; also not a good look! I’m a newbie so it’s probably an easy fix but for the life of me I can’t figure it out. I’m guessing I need to find the woo commerce CSS and edit it, but I don’t know where it is on my site. Please help!!!!!

    https://www.walkabouttoursphuket.com

Viewing 13 replies - 1 through 13 (of 13 total)
  • Please specify your product page URL where you need to change the font color and which color code is to be used for font?

    What theme are you using? Where did you download it from?

    Thread Starter rich.h.worley

    (@richhworley)

    I’m using the canvas theme; I downloaded the theme from woothemes.com

    I’d like white font (#ffffff) on a black background (#000000).

    Below is one of the product page URL’s where the product caption is black on a black background. (I’m having this problem with all my product pages.) You can barely see the caption, but if you highlight the content just above the price then you’ll be able to read it. It says, “Phi Phi Islands – Maya Bay, Bamboo Island” I’d like this content to be a white color.

    https://www.walkabouttoursphuket.com/product/phi-phi-island/

    I’m having the same problem with the captions on this page as well; highlight just above the prices to see the captions.

    https://www.walkabouttoursphuket.com/tours-3/

    By the way, the price used to be black as well but I was able to change it to white by putting the below code in my custom.css file.

    .woocommerce ul.products li.product .price,
    .woocommerce-page ul.products li.product .price {
    text-align: center;
    color: #fff; /* This is what you MAY want to change color */
    font-weight: 400;
    font-size: 2em;
    }

    .woocommerce div.product span.price, .woocommerce div.product p.price, .woocommerce #content div.product span.price, .woocommerce #content div.product p.price, .woocommerce-page div.product span.price, .woocommerce-page div.product p.price, .woocommerce-page #content div.product span.price, .woocommerce-page #content div.product p.price {
    color: #fff; /* Change this */
    font-size: 1.25em;
    text-align: center;
    }

    Finally, if you look at my shopping cart (link below). Everything is white font on a white background. I need to change this to white font on a black background.

    https://www.walkabouttoursphuket.com/cart-2/

    I really appreciate the help.. have been racking my brain on this for a few days now!!

    Add the following css rules to custom.css:

    h1.product_title {
      color: #fff;
    }
    
    li.product-type-simple.instock h3 {
      color: #fff;
      padding: 10px 0;
    }
    
    h5 {
    color: #FFF;
    }

    Note: custom.css is located at https://www.walkabouttoursphuket.com/wp-content/themes/canvas/custom.css

    thanks

    Thread Starter rich.h.worley

    (@richhworley)

    That fixed the product descriptions but the shopping cart is still white font on a white background. Could you please provide the CSS code to turn the background black? I would be in your debt forever! ??

    https://www.walkabouttoursphuket.com/cart-2/

    Add the following to custom.css

    table.shop_table, .entry table {
        background: none;
    }
    
    .entry table thead th, .entry table tbody th {
        background: none;
    }    
    
    h1, h2, h3, h4, h5  {
        color: #FFF;
    }
    Thread Starter rich.h.worley

    (@richhworley)

    The code didn’t work; I entered into my custom.css as shown below.. please help.

    /* GLOBAL STYLES
    —————-
    Add styles beneath this line that you want to be applied across your entire site */

    .woocommerce ul.products li.product .price,
    .woocommerce-page ul.products li.product .price {
    text-align: center;
    color: #fff; /* This is what you MAY want to change color */
    font-weight: 400;
    font-size: 2em;
    }

    .woocommerce div.product span.price, .woocommerce div.product p.price, .woocommerce #content div.product span.price, .woocommerce #content div.product p.price, .woocommerce-page div.product span.price, .woocommerce-page div.product p.price, .woocommerce-page #content div.product span.price, .woocommerce-page #content div.product p.price {
    color: #fff; /* Change this */
    font-size: 1.25em;
    text-align: center;
    }

    h1.product_title {
    color: #fff;
    }

    li.product-type-simple.instock h3 {
    color: #fff;
    padding: 10px 0;
    }

    h5 {
    color: #FFF;
    }

    a.button, button.button, input.button, #review_form #submit { background:orange; }

    table.shop_table, .entry table {
    background: none;
    }

    .entry table thead th, .entry table tbody th {
    background: none;
    }

    h1, h2, h3, h4, h5 {
    color: #FFF;
    }

    /* DESKTOP STYLES
    —————–
    Add styles inside the media query below that you only want to be applied to the desktop layout of your site */
    @media only screen and (min-width: 768px) {
    /* Desktop styles go below this line */

    }

    Thread Starter rich.h.worley

    (@richhworley)

    Nevermind ?? I got it to work!!! Thanks you so much!!!!

    Thread Starter rich.h.worley

    (@richhworley)

    thanks!

    Sir I want to change color Of product color is change as my color selection.. please suggest me a free plugin for use of woo-commerce Theme

    I need help. My site is https://f67.423.myftpupload.com/ and when browsing the Shop, the price of the items is an ugly orange (example: https://f67.423.myftpupload.com/product/chocolate/). I would like this font to be black, but I have seen no options to change the color and I’ve been working on this site for months. Please help me! I was thinking of trying one of the options above but I didn’t want to mess up the work I already did. I am using the “Cream” theme. Thank you in advance.

    I need some code to add to my child theme that will change the color of the prices on my category pages. The prices are green. I’d like to change it to whatever I want. I would also like to change the size of the font. Here is one of my category pages, so you can see what I’m talking about.
    https://72.52.140.26/product-category/design-sets/

    Thanks so much for any help ??
    Lisa

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘how to edit color scheme in woo commerce’ is closed to new replies.