ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• May 14, 2014 at 5:36 pm #75072
  mimawebseo

  Member

  Post count: 33

  Hi,
  I am adding this line to my style.css of the child theme
  .woocommerce ul.products li.product-category .product-cat-info {
  background: none repeat scroll 0 0 #FFFFFF;
  }

  in order to replace
  .woocommerce ul.products li.product-category .product-cat-info {
  background: none repeat scroll 0 0 #E4E4E4;
  }

  so I want to change the background color (white istead of grey) but this is now working.. still have color #E4E4E4 at the background of .product-cat-info

  where do I have to change this reference?

  thank you.

  May 15, 2014 at 8:44 am #75176
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Sorry which theme?

  – Kyle

  May 15, 2014 at 9:33 am #75210
  mimawebseo

  Member

  Post count: 33

  Hi Kyle… Dante

  May 15, 2014 at 9:48 am #75217
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  It uses the section divide color for the background color, I’m guessing you wont want to change the section divide color so instead you can add this custom css:

  .woocommerce ul.products li.product-category .product-cat-info:before {
    border-bottom-color: #FFFFFF;
  }

  – Kyle

  May 18, 2014 at 9:42 pm #75728
  mimawebseo

  Member

  Post count: 33

  Hi Kyle,
  Thanks but this doesn’t do what I need,

  Actually, what I want is to see categories like products. Just the picture and the text below with no decoration at all.

  PS
  Can this thread be moved to Themes Support -> Dante? (it was my mistake)

  May 19, 2014 at 8:43 am #75780
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Unfortunately it’s not possible to change the layout and decoration of the categories to look like products without modifying a lot of css, and it’s not within the scope of our support to be able to provide that functionality as it is more work than a small customisation. While we’d love to be able to support every customisation request, we simply don’t have the time. We recommend that you seek a freelance developer if you need that functionality, potentially from one of the below resources:

  https://codeable.io

  Home

  http://www.microlancer.com

  Hope that helps.

  – Kyle

  May 19, 2014 at 9:08 am #75791
  mimawebseo

  Member

  Post count: 33

  This reply has been marked as private.
  May 19, 2014 at 9:17 am #75798
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Ok great, this should do the trick:

  .woocommerce ul.products li.product-category .product-cat-info {
    background: none;
  }

  – Kyle

  May 19, 2014 at 11:32 am #75871
  mimawebseo

  Member

  Post count: 33

  Thanks Kyle.
  Finally it worked and get rid of the grey background, but I needed to add it to the Custom CSS/JS section. Don’t know why.

  Just adding your code to my style.css on my child theme wasn’t enough..
  (I already had this on my style.css in the child theme)

  .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
  display: block;
  height: auto;
  margin: 0 0 8px;
  transition: all 0.2s ease-in-out 0s;
  width: 100%;
  }
  .woocommerce ul.products li.product-category .product-cat-info {
  background: none repeat scroll 0 0 #FFFFFF;
  bottom: -35px;
  padding: 10px;
  position: absolute;
  text-align: left;
  }
  .woocommerce ul.products li.product a:hover img, .woocommerce-page ul.products li.product a:hover img {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
  }
  .woocommerce ul.products li.product-category .product-cat-info .count {
  display: none;
  }
  .woocommerce ul.products li.product-category .product-cat-info:before {
  display:none;
  border-bottom-color: #FFFFFF;
  }

  Thank you very much for your help!

  May 19, 2014 at 11:47 am #75883
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  It’s because you already have this:

  .woocommerce ul.products li.product-category .product-cat-info {
  background: none repeat scroll 0 0 #FFFFFF;
  bottom: -35px;
  padding: 10px;
  position: absolute;
  text-align: left;
  }

  Glad it’s working now

  – Kyle

• Back to forum

  Posted in: Dante