Home › Forums › WoodMart support forum › Wishlist icon Round

Wishlist icon Round

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 19, 2020 at 11:29 am #242855

    blackmocha
    Participant

    Hi There,

    For some of your demos, it shows the wishlist icon as a circle. How can we do this for both Mobile and Desktop view?

    Also, is it possible to change the color of the wishlist icon/background?

    Thanks

    Attachments:
    You must be logged in to view attached files.
    November 19, 2020 at 12:07 pm #242868

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshot you attached.

    Please try setting the product style from Theme Settings >> Shop >> Product Styles.

    Screenshot for Clarification: https://prnt.sc/vm4nl5

    Then tell me I will check and provide you with the CSS to achieve the wish list button for the desktop version same as mobile.

    Regards.
    Xtemos Studios.

    November 21, 2020 at 1:07 am #243263

    blackmocha
    Participant

    Hi There,

    I have switched to the product styles you mentioned.

    How can I make the wishlist icon to be similar to Airbnb?

    – The icon is white, the inner is semi black transparent, and there is no background color/border

    Attachments:
    You must be logged in to view attached files.
    November 21, 2020 at 6:37 am #243276

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshot you attached.

    It’s not possible to add the background fill to the wishlist icon. Because the link you mentioned is using SVG icons for the wishlist.

    Therefore to change the icon color to white and remove the background try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    .woodmart-buttons.wd-pos-r-t {
	background: none;
}

.wd-action-btn.wd-wishlist-btn > a:before
	color: white;
}

.woodmart-buttons {
	box-shadow: none;
}

    Best Regards.

    November 21, 2020 at 6:50 am #243277

    blackmocha
    Participant

    Hi there,

    Ok i understand. How do i make the wishlist button become a circle for both desktop and mobile?

    Just like on your website attached?

    Attachments:
    You must be logged in to view attached files.
    November 21, 2020 at 8:07 am #243290

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Thanks for understanding.

    Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    .woodmart-buttons.wd-pos-r-t {
	border-radius: 30px;
}

    Regards.
    Xtemos Studios.

    November 21, 2020 at 11:52 pm #243526

    blackmocha
    Participant

    Hi there,

    By adding this, the wishlist icon become white – great.

    .wd-action-btn.wd-wishlist-btn > a:before {
    color: white;
    }

    However, if we go to the single product page, the wishlist icon becomes white as well…which don’t work on a white background. How can I prevent the wishlist icon from the product page from becoming white?

    November 23, 2020 at 6:46 am #243707

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please replace the CSS that you are using to change the color with the following in the Global Custom CSS area.

    .product-grid-item .wd-action-btn.wd-wishlist-btn > a:before {
color: white;
}

    Then only the color of the product grid’s wishlist icon will be changed.

    Best Regards.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)