Home>Support>WooCommerce Colors

WooCommerce Colors

By ign, 10 years ago. Last reply by Andrew Misplon, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hello!
I´m using WooCommerce with a Vantage Premium theme. I´m also using the “WooCommerce Colors” pluging. Still, I can´t change some text colors. For example titles in the shop page, product names, product titles, links, etc.
How can I change them? Do I need to do some css?
My web site:
http://repuestos.cigue.com.ar/tienda/
http://repuestos.cigue.com.ar/producto/cadenas-para-nieve-mercedes-benz/

Thanks!

URL: http://repuestos.cigue.com.ar/tienda/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 7 months ago Daniel
    Hi, I Work Here

    Hi Ign

    You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    .woocommerce #page-wrapper h1.page-title {
  color: red !important;
}

p.woocommerce-result-count {
   color: red !important;
}

#secondary .widget ul li a{
  color: red !important;
}
#secondary .widget ul li a:hover{
  color: orange !important;
}

.woocommerce ul.products li.product h3 {
 color: red !important;
}

.woocommerce ul.products li.product h3:hover {
  color: orange !important;
}

    Change the color to the ones of your choice.

    Cheers

  2. 10 years, 7 months ago ign

    Thank you very much Addo!
    Great change!
    How can I do dthe same in every product page?
    Thanks!
    http://repuestos.cigue.com.ar/producto/cadenas-para-nieve-mercedes-benz/

  3. 10 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Ign

    I’ve based the below off your existing Custom CSS from Addo. Remove the current Custom CSS you have and replace it with:

    /* WooCommerce General */

.product_list_widget li a {
    color: #FAFAFA;
}

.woocommerce #page-wrapper h1.page-title,
.woocommerce #page-wrapper .product h1.entry-title {
	color: #FAFAFA;
}

p.woocommerce-result-count,
.woocommerce .entry-summary p,
.woocommerce .entry-summary .product_meta span {
	color: #FAFAFA;
}

#secondary .widget ul li a{
	color: #FAFAFA;
}
#secondary .widget ul li a:hover{
	color: #FAFAFA;
}

.woocommerce ul.products li.product h3 {
	color: #FAFAFA;
}

.woocommerce ul.products li.product h3:hover {
	color: #FAFAFA;
}
  
/* WooCommerce Related Products */

.woocommerce .related h2 {
	color:#FAFAFA;
	font-size: 18px;
	margin-bottom: 1.5em;
}

.woocommerce .related ul li.product, 
.woocommerce .related ul.products li.product, 
.woocommerce-page .related ul li.product, 
.woocommerce-page .related ul.products li.product {
	width: 20%;
}

    Let us know if we missed anything.

  4. 10 years, 7 months ago ign

    Thank you very much Andrew. It works great. I hope I can find the way to do the same at the home page.
    Thanks a lot!

  5. 10 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    For sure.

    I looked at the home page now, can you advise what you’d like help on there?

  6. 9 years, 4 months ago Alexandros Lykostratis

    Hello everybody! I would like to change the colour of my product names, but can’t find it anywhere in the css editor. Can you help me? http://www.omegaproject3.com is my website (check out the shop>products section). Thanks!

    • 9 years, 4 months ago Andrew Misplon
      Hi, I Work Here

      Hi Alexandros

      You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

      /* WooCommerce */
.woocommerce ul.products li.product h3 {
	color: #0a0a0a;
}

      Edit the above as requried.

      You might also need to install the SiteOrigin CSS Editor.

      For any follow-up questions, please, open a new support thread: Page: New Thread. Thanks.

  7. 9 years, 4 months ago Alexandros Lykostratis

    Thank you very much Andrew. You’re a life saver! It worked like a charm! And very quick response as well! Fantastic job!

    • 9 years, 4 months ago Andrew Misplon
      Hi, I Work Here

      Super :) Glad that helped. All the best with your site.

  8. 9 years, 4 months ago Joni Wijaya

    Hi..sory is this css code also work with other theme? I use woocommerce too,but other theme, and i want to change widget color too, such as best seller, price filter, etc.

    • 9 years, 4 months ago Andrew Misplon
      Hi, I Work Here

      Hi Joni

      Please, send a link to your site and we’ll take a look :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More