How to customize Woocommerce shopping cart loading ajax icon

2
votes

The default icon in Woocommerce shopping cart page when updating list is Wordpress default loading icon. How can I change it?

2
wordpresswoocommerce

2 Answers

2
votes

Add the following block of code in you CSS file.
Just remember to include your own customization this is just a demo

.blockUI.blockOverlay, .loader {
 -webkit-opacity: 1 !important;
 -moz-opacity: 1 !important;
 opacity: 1 !important;
 filter: alpha(opacity=100) !important;
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) !important;
 background: rgba(255, 255, 255, 0.75) !important;
}
.blockUI.blockOverlay:before, .loader:before {
 -moz-animation: none !important;
 -webkit-animation: none !important;
 animation: none !important;
 background: url("../imgs/loading-light.gif") center center !important;
 background-size: 110px !important;
 width: 5em !important;
 height: 1em !important;
 margin-top: -0.5em !important;
 background-repeat: no-repeat !important;
 margin-left: -2.5em !important;
-webkit-opacity: 1 !important;
-moz-opacity: 1 !important;
 opacity: 1 !important;
 filter: alpha(opacity=100) !important;
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) !important;
}
0
votes

The better way to do this is to use hooks :).

Follow my blog post: http://pccomputer-repair.blogspot.sk/2016/02/how-to-change-woocommerce-default-ajax-loader-icon.html

You also can change to use the new loader only in cart or checkout, etc.