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: Atelier
• August 17, 2016 at 12:38 pm #287835
  myled

  Member

  Post count: 16

  Hi.
  I need to change background color (among some other things) of add to cart button.
  I’ve tried
  .single_add_to_cart_button, .add_to_cart_button{
  background color: #f00 !important;
  }

  but it doesn’t seem to overwrite inline css.

  Any ideas?

  August 18, 2016 at 8:50 am #287991
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  .single_add_to_cart_button, .add_to_cart_button{
  background: #ff0000 !important;
  }

  Thanks
  Mohammad

  August 18, 2016 at 12:45 pm #288067
  myled

  Member

  Post count: 16

  Thank you for your reply, but it doesn’t seem to work. Neither in theme’s custom css, nor child theme’s style css.

  August 18, 2016 at 12:50 pm #288069
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  It should work 100% . Please provide me login detail to check and resolve.
  Thanks
  Mohammad

  August 18, 2016 at 1:16 pm #288082
  myled

  Member

  Post count: 16

  This reply has been marked as private.
  August 18, 2016 at 2:05 pm #288104
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  I have managed to resolve the issue so please check it now.
  Thanks
  Mohammad

  August 18, 2016 at 2:23 pm #288109
  myled

  Member

  Post count: 16

  Thank you Mohammad, it appears to work now.
  However I’d like to know which shorthand property causes the issue.

  I also need to change hover style.

  Tried:
  .woocommerce .single_add_to_cart_button.button.alt:hover, .add_to_cart_button:hover {
  border: #000 !important;
  color: #000 !important;
  }
  But no results. I’d be great if you could help with this one as well.
  By the way: I moved custom css to child theme.

  August 19, 2016 at 8:43 am #288284
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code and insert custom css code at Admin > Theme Options > Custom CSS.

  .woocommerce form.cart button.add_to_cart_button:hover, #jckqv .cart .add_to_cart_button:hover, #jckqv .cart .single_add_to_cart_button:hover, #jckqv .cart .yith-wcwl-add-to-wishlist a:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .single_add_to_cart_button.button.alt:hover {
      border-color: #000 !important;
      color: #000 !important;
  }

  Thanks
  Mohammad

  August 19, 2016 at 10:44 pm #288456
  myled

  Member

  Post count: 16

  Thank you, it does work, however to be honest, I’m not a big fan of custom CSS settings.
  Child theme’s style.css works much better for me, but in this case, it doesn’t seem to work.

  August 22, 2016 at 11:06 am #288622
  David Martin – Support

  Moderator

  Post count: 20834

  If you add it to your child theme, first remove it from Theme Options => Custom CSS.

  If the CSS is not working, be sure your CSS has no errors and validate it here: https://jigsaw.w3.org/css-validator/.

• Back to forum

  Posted in: Atelier