Mixing
WooCommerce change loading spinner icon
IM trying to change the WooCommerce loading spinner icon. It's defined in the woocommerce.css:
.woocommerce .blockUI.blockOverlay::before {
height: 1em;
width: 1em;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
content: '';
-webkit-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
background: url(../images/icons/loader.svg) center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
color: rgba(0,0,0,.75);
}
I've tried changing the loader.svg with a custom css:
.woocommerce .blockUI.blockOverlay::before {
background: url(http://www.localhost.de/wp-content/uploads/custom-loader.svg) center center !important;
}
But the icon will not change. So I've googled a bit and found this here:
add_filter( 'woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1 );
function custom_loader_icon() {
return __( get_home_path() . 'wp-content/uploads/custom-loader.svg', 'woocommerce' );
}
But the loading spinner icon is still the same. What can I do to change it? I don't know what I should try now...
php css wordpress woocommerce spinner
edited Nov 23 '18 at 16:29
LoicTheAztec
88.8k1365102
asked Nov 21 '18 at 20:14
Mr. JoMr. Jo
755117
add a comment |
IM trying to change the WooCommerce loading spinner icon. It's defined in the woocommerce.css:
.woocommerce .blockUI.blockOverlay::before {
height: 1em;
width: 1em;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
content: '';
-webkit-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
background: url(../images/icons/loader.svg) center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
color: rgba(0,0,0,.75);
}
I've tried changing the loader.svg with a custom css:
.woocommerce .blockUI.blockOverlay::before {
background: url(http://www.localhost.de/wp-content/uploads/custom-loader.svg) center center !important;
}
But the icon will not change. So I've googled a bit and found this here:
add_filter( 'woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1 );
function custom_loader_icon() {
return __( get_home_path() . 'wp-content/uploads/custom-loader.svg', 'woocommerce' );
}
But the loading spinner icon is still the same. What can I do to change it? I don't know what I should try now...
php css wordpress woocommerce spinner
edited Nov 23 '18 at 16:29
LoicTheAztec
88.8k1365102
asked Nov 21 '18 at 20:14
Mr. JoMr. Jo
755117
add a comment |
IM trying to change the WooCommerce loading spinner icon. It's defined in the woocommerce.css:
.woocommerce .blockUI.blockOverlay::before {
height: 1em;
width: 1em;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
content: '';
-webkit-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
background: url(../images/icons/loader.svg) center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
color: rgba(0,0,0,.75);
}
I've tried changing the loader.svg with a custom css:
.woocommerce .blockUI.blockOverlay::before {
background: url(http://www.localhost.de/wp-content/uploads/custom-loader.svg) center center !important;
}
But the icon will not change. So I've googled a bit and found this here:
add_filter( 'woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1 );
function custom_loader_icon() {
return __( get_home_path() . 'wp-content/uploads/custom-loader.svg', 'woocommerce' );
}
But the loading spinner icon is still the same. What can I do to change it? I don't know what I should try now...
php css wordpress woocommerce spinner
edited Nov 23 '18 at 16:29
LoicTheAztec
88.8k1365102
asked Nov 21 '18 at 20:14
Mr. JoMr. Jo
755117
IM trying to change the WooCommerce loading spinner icon. It's defined in the woocommerce.css:
.woocommerce .blockUI.blockOverlay::before {
height: 1em;
width: 1em;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
content: '';
-webkit-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
background: url(../images/icons/loader.svg) center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
color: rgba(0,0,0,.75);
}
I've tried changing the loader.svg with a custom css:
.woocommerce .blockUI.blockOverlay::before {
background: url(http://www.localhost.de/wp-content/uploads/custom-loader.svg) center center !important;
}
But the icon will not change. So I've googled a bit and found this here:
add_filter( 'woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1 );
function custom_loader_icon() {
return __( get_home_path() . 'wp-content/uploads/custom-loader.svg', 'woocommerce' );
}
But the loading spinner icon is still the same. What can I do to change it? I don't know what I should try now...
php css wordpress woocommerce spinner
php css wordpress woocommerce spinner
edited Nov 23 '18 at 16:29
LoicTheAztec
88.8k1365102
asked Nov 21 '18 at 20:14
Mr. JoMr. Jo
755117
edited Nov 23 '18 at 16:29
LoicTheAztec
88.8k1365102
asked Nov 21 '18 at 20:14
Mr. JoMr. Jo
755117
edited Nov 23 '18 at 16:29
LoicTheAztec
88.8k1365102
edited Nov 23 '18 at 16:29
LoicTheAztec
88.8k1365102
edited Nov 23 '18 at 16:29
LoicTheAztec
88.8k1365102
88.8k1365102
asked Nov 21 '18 at 20:14
Mr. JoMr. Jo
755117
asked Nov 21 '18 at 20:14
Mr. JoMr. Jo
755117
asked Nov 21 '18 at 20:14
Mr. JoMr. Jo
755117
755117
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
The following code css rules work in Woocommerce last version. I have embedded them in the wp_head hook as it's easy for testing:
You will use this icon for testing, that you will put in your active child theme under an "img" directory, renaming the file my_spinner.gif.
If you use a theme instead of a child theme, you will use get_template_directory_uri() function instead of get_stylesheet_directory_uri() in the code.
The code:
add_action('wp_head', 'custom_ajax_spinner', 1000 );
function custom_ajax_spinner() {
?>
<style>
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before {
height: 3em;
width: 3em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
display: block;
content: "";
-webkit-animation: none;
-moz-animation: none;
animation: none;
background-image:url('<?php echo get_stylesheet_directory_uri() . "/img/my_spinner.gif"; ?>') !important;
background-position: center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
}
</style>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
answered Nov 23 '18 at 16:28
LoicTheAztecLoicTheAztec
88.8k1365102
add a comment |
Try following code. Assuming your custom-loader.svg is at root of "uploads" directory.
add_filter( 'woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1 );
function custom_loader_icon($str_replace) {
$upload_dir = wp_upload_dir();
$str_replace = $upload_dir['baseurl'].'/wp-content/uploads/custom-loader.svg'
return $str_replace;
}
Hope this works.
answered Nov 21 '18 at 20:46
zipkundanzipkundan
1,2661513
Not working sorry. It's like the same I did but I just returned the URL directly
– Mr. Jo
Nov 21 '18 at 21:07
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419831%2fwoocommerce-change-loading-spinner-icon%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The following code css rules work in Woocommerce last version. I have embedded them in the wp_head hook as it's easy for testing:
You will use this icon for testing, that you will put in your active child theme under an "img" directory, renaming the file my_spinner.gif.
If you use a theme instead of a child theme, you will use get_template_directory_uri() function instead of get_stylesheet_directory_uri() in the code.
The code:
add_action('wp_head', 'custom_ajax_spinner', 1000 );
function custom_ajax_spinner() {
?>
<style>
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before {
height: 3em;
width: 3em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
display: block;
content: "";
-webkit-animation: none;
-moz-animation: none;
animation: none;
background-image:url('<?php echo get_stylesheet_directory_uri() . "/img/my_spinner.gif"; ?>') !important;
background-position: center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
}
</style>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
answered Nov 23 '18 at 16:28
LoicTheAztecLoicTheAztec
88.8k1365102
add a comment |
The following code css rules work in Woocommerce last version. I have embedded them in the wp_head hook as it's easy for testing:
You will use this icon for testing, that you will put in your active child theme under an "img" directory, renaming the file my_spinner.gif.
If you use a theme instead of a child theme, you will use get_template_directory_uri() function instead of get_stylesheet_directory_uri() in the code.
The code:
add_action('wp_head', 'custom_ajax_spinner', 1000 );
function custom_ajax_spinner() {
?>
<style>
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before {
height: 3em;
width: 3em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
display: block;
content: "";
-webkit-animation: none;
-moz-animation: none;
animation: none;
background-image:url('<?php echo get_stylesheet_directory_uri() . "/img/my_spinner.gif"; ?>') !important;
background-position: center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
}
</style>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
answered Nov 23 '18 at 16:28
LoicTheAztecLoicTheAztec
88.8k1365102
add a comment |
The following code css rules work in Woocommerce last version. I have embedded them in the wp_head hook as it's easy for testing:
You will use this icon for testing, that you will put in your active child theme under an "img" directory, renaming the file my_spinner.gif.
If you use a theme instead of a child theme, you will use get_template_directory_uri() function instead of get_stylesheet_directory_uri() in the code.
The code:
add_action('wp_head', 'custom_ajax_spinner', 1000 );
function custom_ajax_spinner() {
?>
<style>
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before {
height: 3em;
width: 3em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
display: block;
content: "";
-webkit-animation: none;
-moz-animation: none;
animation: none;
background-image:url('<?php echo get_stylesheet_directory_uri() . "/img/my_spinner.gif"; ?>') !important;
background-position: center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
}
</style>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
answered Nov 23 '18 at 16:28
LoicTheAztecLoicTheAztec
88.8k1365102
The following code css rules work in Woocommerce last version. I have embedded them in the wp_head hook as it's easy for testing:
You will use this icon for testing, that you will put in your active child theme under an "img" directory, renaming the file my_spinner.gif.
If you use a theme instead of a child theme, you will use get_template_directory_uri() function instead of get_stylesheet_directory_uri() in the code.
The code:
add_action('wp_head', 'custom_ajax_spinner', 1000 );
function custom_ajax_spinner() {
?>
<style>
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before {
height: 3em;
width: 3em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
display: block;
content: "";
-webkit-animation: none;
-moz-animation: none;
animation: none;
background-image:url('<?php echo get_stylesheet_directory_uri() . "/img/my_spinner.gif"; ?>') !important;
background-position: center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
}
</style>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
answered Nov 23 '18 at 16:28
LoicTheAztecLoicTheAztec
88.8k1365102
edited Nov 23 '18 at 23:04
answered Nov 23 '18 at 16:28
LoicTheAztecLoicTheAztec
88.8k1365102
answered Nov 23 '18 at 16:28
LoicTheAztecLoicTheAztec
88.8k1365102
answered Nov 23 '18 at 16:28
LoicTheAztecLoicTheAztec
88.8k1365102
88.8k1365102
add a comment |
add a comment |
Try following code. Assuming your custom-loader.svg is at root of "uploads" directory.
add_filter( 'woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1 );
function custom_loader_icon($str_replace) {
$upload_dir = wp_upload_dir();
$str_replace = $upload_dir['baseurl'].'/wp-content/uploads/custom-loader.svg'
return $str_replace;
}
Hope this works.
answered Nov 21 '18 at 20:46
zipkundanzipkundan
1,2661513
Not working sorry. It's like the same I did but I just returned the URL directly
– Mr. Jo
Nov 21 '18 at 21:07
add a comment |
Try following code. Assuming your custom-loader.svg is at root of "uploads" directory.
add_filter( 'woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1 );
function custom_loader_icon($str_replace) {
$upload_dir = wp_upload_dir();
$str_replace = $upload_dir['baseurl'].'/wp-content/uploads/custom-loader.svg'
return $str_replace;
}
Hope this works.
answered Nov 21 '18 at 20:46
zipkundanzipkundan
1,2661513
Not working sorry. It's like the same I did but I just returned the URL directly
– Mr. Jo
Nov 21 '18 at 21:07
add a comment |
Try following code. Assuming your custom-loader.svg is at root of "uploads" directory.
add_filter( 'woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1 );
function custom_loader_icon($str_replace) {
$upload_dir = wp_upload_dir();
$str_replace = $upload_dir['baseurl'].'/wp-content/uploads/custom-loader.svg'
return $str_replace;
}
Hope this works.
answered Nov 21 '18 at 20:46
zipkundanzipkundan
1,2661513
Try following code. Assuming your custom-loader.svg is at root of "uploads" directory.
add_filter( 'woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1 );
function custom_loader_icon($str_replace) {
$upload_dir = wp_upload_dir();
$str_replace = $upload_dir['baseurl'].'/wp-content/uploads/custom-loader.svg'
return $str_replace;
}
Hope this works.
answered Nov 21 '18 at 20:46
zipkundanzipkundan
1,2661513
answered Nov 21 '18 at 20:46
zipkundanzipkundan
1,2661513
answered Nov 21 '18 at 20:46
zipkundanzipkundan
1,2661513
answered Nov 21 '18 at 20:46
zipkundanzipkundan
1,2661513
1,2661513
Not working sorry. It's like the same I did but I just returned the URL directly
– Mr. Jo
Nov 21 '18 at 21:07
add a comment |
Not working sorry. It's like the same I did but I just returned the URL directly
– Mr. Jo
Nov 21 '18 at 21:07
Not working sorry. It's like the same I did but I just returned the URL directly
– Mr. Jo
Nov 21 '18 at 21:07
Not working sorry. It's like the same I did but I just returned the URL directly
– Mr. Jo
Nov 21 '18 at 21:07
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419831%2fwoocommerce-change-loading-spinner-icon%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
