WooCommerce изменить значок загрузки счетчика

Question

WooCommerce изменить значок загрузки счетчика

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);
}

Я попытался изменить loader.svg с помощью собственного CSS:

.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' );
}

Но значок загрузочного счетчика остается прежним. Что я могу сделать, чтобы изменить это? Я не знаю, что я должен попробовать сейчас …

3

css php spinner woocommerce wordpress

Решение

Другие решения

Попробуйте следующий код. Предполагая ваш 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;
}

Надеюсь, это работает.

-1

Источник

Accepted Answer

Следующий код правил 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 вашей активной дочерней темы (или активной темы). Проверено и работает.

1