This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

WooCommerce Colors

Open 11 replies premiumthemetheme-vantage
ign
10 years ago · Last reply by Andrew Misplon 9 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

11
  1. Daniel Staff 10 years, 10 months ago

    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. ign 10 years, 10 months ago

    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. Andrew Misplon Staff 10 years, 10 months ago

    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. ign 10 years, 10 months ago

    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. Andrew Misplon Staff 10 years, 10 months ago

    For sure.

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

  6. Alexandros Lykostratis 9 years, 8 months ago

    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!

    • Andrew Misplon Staff 9 years, 8 months ago

      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. Alexandros Lykostratis 9 years, 8 months ago

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

    • Andrew Misplon Staff 9 years, 8 months ago

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

  8. Joni Wijaya 9 years, 8 months ago

    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.

    • Andrew Misplon Staff 9 years, 8 months ago

      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.

Have a different question or issue?

Start New Thread