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
• November 17, 2016 at 12:02 pm #302326
  haastee

  Member

  Post count: 47

  Hello!

  I searched the forum but didn´t find all of the needed informations about altering the look of following buttons and icons inside those buttons:

  1) ADD TO CART button and WHISLIST button in product list view:
  a) How to change background color, icon color

  2) ADD TO CART button in single product view:
  a) Color styling:
  .woocommerce form.cart button.add_to_cart_button, .woocommerce form.cart button.single_add_to_cart_button{
  color: #ffffff !important;
  border-color: #ffa800 !important;
  background-color: #ffa800 !important;
  }

  b) Color styling hover:
  .woocommerce form.cart button.add_to_cart_button:hover,
  .woocommerce form.cart button.single_add_to_cart_button:hover {
  color: #ffffff !important;
  border-color: #56ab68 !important;
  background-color: #56ab68 !important;
  }

  c) Remove add-to-cart-icon from button:
  .single-product .sf-icon-add-to-cart {
  display:none !important;
  }

  3) ADD TO WISHLIST button in single-product view:
  a) How to change background color (to solid), border color, hover colors?

  4) ADD TO WISHLIST button in quickview window:
  a) How to change background color, border color, hover colors?

  5) ADD TO CART button in quickview window:
  a) How to change background color, border color, hover colors?
  b) How to remove the add-to-cart icon?

  I know, a lot of questions but that should be useful for many customers 🙂

  November 18, 2016 at 9:49 pm #302587
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  Can you provide us your site url, it’s easier for us.

  -Rui

  November 21, 2016 at 12:53 pm #302709
  haastee

  Member

  Post count: 47

  This reply has been marked as private.
  November 22, 2016 at 6:48 pm #303075
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  ADD TO WISHLIST button in single-product view:

  .single-product.woocommerce .yith-wcwl-add-to-wishlist a {
      color: #fff !important;
      border-color: #ed6d36 !important;
      background: #ed6d36 !important;
  }
  .single-product.woocommerce .yith-wcwl-add-to-wishlist a:hover {
      color: #ed6d36 !important;
      border-color: #ccc !important;
      background: #ccc !important;
  }

  ADD TO WISHLIST button in quickview window:

  #jckqv .cart .yith-wcwl-add-to-wishlist a {
  	color: #fff !important;
      border-color: #ed6d36 !important;
      background: #ed6d36 !important;
  }
  #jckqv .cart .yith-wcwl-add-to-wishlist a:hover {
  	color: #ed6d36 !important;
  	border-color: #ccc !important;
  	background: #ccc !important;
  }

  ADD TO CART button in quickview window:

  a)

  #jckqv .cart .add_to_cart_button {
  	color: #fff !important;
  	border-color: #ed6d36 !important;
  	background: #ed6d36 !important;
  }
  
  #jckqv .cart .add_to_cart_button:hover {
  	color: #ed6d36 !important;
  	border-color: #ccc !important;
  	background: #ccc !important;
  }

  b)

  #jckqv .cart .add_to_cart_button i, 
  #jckqv .cart .single_add_to_cart_button i {
      display: none;
  }

  November 23, 2016 at 4:34 pm #303250
  haastee

  Member

  Post count: 47

  Thanks!

  Still missing:

  1) ADD TO CART button and WHISLIST button in product list view:
  a) How to change background color, icon color

  and

  6) How to change the outline color of the PRODUCT QUANTITY box (including arrow boxes)?

  November 24, 2016 at 6:49 pm #303535
  David Martin – Support

  Moderator

  Post count: 20834

  1) What button do you refer to? There is not a list view button?

  

  6)

  /* Quantity Outline Color */
  .woocommerce .quantity .minus, 
  .woocommerce .quantity input.qty, 
  .woocommerce .quantity .qty-adjust .woocommerce .quantity .plus, 
  .woocommerce div.product form.cart .variations select, 
  .woocommerce .quantity .qty-plus, 
  .woocommerce .quantity .qty-minus, .
  woocommerce .quantity .qty-adjust {
      border-color: red;
  }
  
  /* Font Color */
  .woocommerce .quantity input.qty {
  	color: red;
  }
  
  /* Icon Up/Down Color */
  .woocommerce .quantity .qty-adjust a > i {
    color: red;
  }

  November 25, 2016 at 8:35 am #303594
  haastee

  Member

  Post count: 47

  Thanks a lot!

  1) I refer to the buttons (or are they called icons?) in the main product list view. When hover they appear for adding to cart or to wishlist without entering the product details page (see attachment).

  I´d like to change the background color, the border color and color of icon in those buttons.

  Michael

  Attachments:

  You must be logged in to view attached files.
  November 25, 2016 at 10:19 am #303605
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Try this one, change to your desired colors

  .product figure .cart-overlay .shop-actions a>i {
      color: #000;
      background-color: #fff;
      border: 1px solid red;
  }

  -Rui

• Back to forum

  Posted in: Atelier