IM 尝试更改 WooCommerce 加载旋转图标。它在 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);
}
我尝试使用自定义 css 更改 loader.svg:
.woocommerce .blockUI.blockOverlay::before {
background: url(http://www.localhost.de/wp-content/uploads/custom-loader.svg) center center !important;
}
但图标不会改变。所以我用谷歌搜索了一下并在这里找到了这个:
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' );
}
但是加载微调器图标仍然相同。我可以做什么来改变它?我不知道我现在应该尝试什么...
以下代码 CSS 规则适用于 Woocommerce 最新版本。我将它们嵌入到
wp_head
钩子中,因为它很容易测试:
img
”目录下的活动子主题中,并将文件重命名为 my_spinner.gif
。
如果您使用主题而不是子主题,则将在代码中使用
get_template_directory_uri()
函数而不是 get_stylesheet_directory_uri()
。
代码:
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
}
代码位于活动子主题(或活动主题)的 function.php 文件中。已测试并有效。
我认为CSS就足够了
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before {
background-image:url('path/to/your/image.gif');
}
它会工作得很好
在 Wordpress Media 中上传自定义微调器,假设文件名是 my-spinner.gif,然后检查 gif 图像的路径。示例:https://example.com/wp-content/uploads/2023/09/my-spinner.gif
Woocommerce 8.1.1 正在运行。
在你的主题中添加 CSS,如下所示:
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before {
position: absolute;
content: " ";
background-image: url("https://example.com/wp-content/uploads/2023/09/my-spinner.gif") !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
top: 50%;
left: 50%;
margin-left: -16px;
margin-top: -16px;
width: 32px;
height: 32px;
animation: spin 1.5s linear infinite;
}
尝试以下代码。假设您的
custom-loader.svg
位于“uploads”目录的根目录下。
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;
}
希望这有效。