Change loading icon

Hi,

The icon of “loading” doesn’t seem to be in the images or I’ve been unable to found it.

Where can I change it? Is the one used when adding to the cart mainly.

Thanks

Hello,

Loading icon is not an image but a font icon and you can change it with a custom CSS only. What icon do you want to show there?

Regards

Oh OK and where can I change it? I like this one http://fontawesome.io/icon/circle-o-notch/

Thanks!

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.single-product-content .cart .button:after,
.add_to_cart_button:after,
.yith-wcwl-add-to-wishlist a:after,
div.single-product-content .entry-summary .button.compare:after {
	content: "\f1ce"!important;
	font-family: "fontawesome"!important;
	border:none !important;
}

.single-product-content .cart .button:after,
.add_to_cart_button:after,
.yith-wcwl-add-to-wishlist a:after,
div.single-product-content .entry-summary .button.compare:after {
	font-size: 14px;
	line-height: 14px;
	width: 14px !important;
	height: 14px !important;
}

.single-product-content .cart .button:after,
.add_to_cart_button:after {
	margin-top: -8px !important;
}

Regards

Thanks, it worked, except for one place: the quick view loader (at least that’s what I’ve tried so far).

I added this code to all three styles but it doesn’t work (see video attached).

.open-quick-view.loading:before

Thanks

Attachments:

You must be logged in to view attached files.

Where can we see this loader on your website at the moment?

Unfortunately I can’t upload it yet, it’s local dev.
But it’s the icon for quick view, I haven’t changed anything on that so it should be standard.

Sorry, but we need to see it on your website to check why the loader is not changed there.

OK, here’s my site live: http://sensacional-store-prod.us-west-2.elasticbeanstalk.com
Thanks

Hi,

But we don’t see our code on your website now.

Regards

Hi, yes it is!

http://sensacional-store-prod.us-west-2.elasticbeanstalk.com/wp-content/themes/sensacional/style.css?ver=4.9.1

Line 1280 to 1304

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.basel-buttons .quick-view>a.loading:before {
	content: "\f1ce"!important;
	font-family: "fontawesome"!important;
	border:none !important;
	font-size: 14px;
	line-height: 14px;
	width: 14px !important;
	height: 14px !important;
}

Regards

Hi,

Thanks but there are still some places where this doesn’t work ok.
Adding a product to wishlist works but a bit cluncky, it isn’t perfect.

On cart is the old loader and on checkout the same.

Is there any way to change them all at once?

Thanks!!

Hi,

There is no such way to change all loaders in one place because initially, our theme uses pure CSS loader which do not use any additional images or custom font icons in order to improve page speed.

To fix issues you mentioned, please add this code snippet to the Custom CSS area in Theme Settings.

.single-product-page .yith-wcwl-add-to-wishlist a:after {
	width: 14px !important;
	height: 14px !important;
}

.blockOverlay:after {
	content: "\f1ce"!important;
	font-family: "fontawesome"!important;
	border:none !important;
	font-size: 40px;
	line-height:40px;
	width: 40px !important;
	height: 40px !important;
}

Regards

Thanks.

This is also present when the filters are activated. Is it possible to remove it too?

Strange, but we can’t access your website at the moment.

[Author]

Posts