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;
}
但图标不会改变。我在Google上搜索了一下,发现了这个:
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' );
}
但加载微调器图标仍然相同。我能做些什么来改变它?我不知道我现在该尝试什么...
4条答案
按热度按时间hfsqlsce1#
下面的代码CSS规则在Woocommerce上一版本中工作。我将它们嵌入到
wp_head
钩子中,因为它很容易测试:您将使用this icon进行测试,您将把它放在“
img
”目录下的活动子主题中,重命名文件my_spinner.gif
。如果使用主题而不是子主题,则在代码中将使用
get_template_directory_uri()
函数而不是get_stylesheet_directory_uri()
。代码:
代码将在您的活动子主题(或活动主题)的function.php文件中。测试和作品。
vlurs2pr2#
我觉得CSS就够了
它会工作得很好
isr3a4wc3#
在Wordpress Media中上传自定义微调器,假设文件名为my-spinner.gif,然后检查gif图像的路径。示例:https://example.com/wp-content/uploads/2023/09/my-spinner.gif
Woocommerce 8.1.1已经运行。
在你的主题中添加CSS,像这样:
ttisahbt4#
试试下面的代码。假设您的
custom-loader.svg
位于“uploads”目录的根目录。希望这有用。