Wishlist icon Round

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.

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.

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.

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.

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.

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.

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?

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