Как переопределить стиль Wordpress inline! Important
Я использую WooCommerce в Wordpress - кнопка «Добавить в корзину» на странице продукта не изменилась с моим обновленным глобальным стилем, поскольку он имеет встроенный стиль:
<button type = "submit" class = "single_add_to_cart_button button alt gradient_" style = "color: rgb(0,0,0)!important">Add to basket</button>
Я не могу переопределить это с помощью CSS, поэтому мне нужно найти код в шаблоне и удалить его. Просматривая свой шаблон, я нашел его в content-single-product.php.
<div class = "summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
Где мне найти крючок, который мне нужно отредактировать, предположительно
* @hooked woocommerce_template_single_add_to_cart - 30
@charankumar - не могли бы вы указать мне, где упоминаются хуки? я не знаю Wordpress так хорошо!
Ваша тема определенно делает это (или плагин), поскольку по умолчанию нет встроенного стиля для добавления в корзину. Обычно настройщик позволяет изменить цвет фона этой кнопки. Таким образом, вам нужно будет искать шаблоны, расположенные в папке woocommerce внутри вашей темы, в подпапке single-product> add-to-cart (с разными шаблонами в зависимости от типа продукта) ... Его также можно динамически добавить с помощью jQuery и в этом случае вам будет сложнее найти способ его изменить.
Пожалуйста, разместите несколько строк над строкой, в которой вы найдете color: #000000!important. Вам не нужно редактировать шаблоны woocommerce, так как мы можем переопределить даже !important css.
@KamranSyed Я добавил весь HTML-элемент.
Пожалуйста, проверьте мой ответ на основе предоставленного HTML. @ J4G Если вы обнаружите какие-либо проблемы, мы здесь, чтобы помочь :)
Ответы 4
Файл шаблона с кнопкой «добавить в корзину», вероятно, находится в wp-content / you-theme / woocommerce / single-product / add-to-cart / simple.php (или в любом файле в single-product / add-to-cart )
Мне не удалось найти кнопку ни в одном из этих файлов.
найдите такой текст в файле <button type = "submit" name = "add-to-cart">
Чтобы настроить кнопку «Добавить в корзину», вам просто нужно открыть настройщик WordPress. В админке WordPress перейдите в
1) Внешний вид -> Настроить и загрузить настройщик.
Затем в настройщике нажмите «Кнопки» -> «Альтернативный цвет фона кнопки» и установите свой цвет.
2) Нажмите «Сохранить и опубликовать», и все готово.
Я уже сделал это, поэтому создал этот вопрос. Это не сработало бы, и тогда я не смог бы и в CSS, потому что оказалось, что! Important inline нельзя перезаписать. Мне нужно от этого избавиться.
Атрибут стиля можно удалить с помощью jQuery. Вам нужно добавить свой css в тему style.css или в любое другое место, чтобы он загружался в заголовок. Вот код, который можно вставить в functions.php текущей темы.
function ks_footer(){
?>
<script>
jQuery(function() {
jQuery('a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart').removeAttr('style'); //3 Red Buttons
jQuery('.single_add_to_cart_button').removeAttr('style');
}); //Top Blue Button
</script>
<?php
}
add_action( 'wp_footer', 'ks_footer' );
Здесь - это быстрый редактор Tryit, демонстрирующий идею.
Спасибо. я почему-то получаю ошибку при открытии <скрипта!
Добавлены отсутствующие теги php. Теперь должно быть все в порядке @ J4G.
это, похоже, не сработало для меня, стиль все еще применяется.
Откройте инструменты разработчика, консоль и вставьте jQuery('.single_add_to_cart_button'), посмотрите, получите ли вы правильный элемент. @ J4G
это странно, я ничего не получаю обратно. Вы можете проверить это на allstaruhlmann.com/product/6mm-epee-fork-wrench
Это правильный селектор для данного элемента. jQuery('a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart').removeAttr('style'); @ J4G Красная кнопка
Это правильный селектор для верхней синей кнопки. jQuery('.single_add_to_cart_button').removeAttr('style'); @ J4G
Да, две вышеуказанные строки протестированы на вашем сайте и признаны работающими. @ J4G Я обновляю решение этими селекторами.
Боюсь, это все еще не удаляет стиль, я понятия не имею, почему
Ошибка в коде jquery, который вы использовали
Код, который вы использовали,
<script>
jQuery('a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart').removeAttr('style');
});
</script>
Замените код как
<script>
jQuery('a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart').removeAttr('style');
</script>
Тогда это сработает,
Спасибо @ a.prakash - тоже почему-то не работает!
Попробуйте этот <script> jQuery ('. Single_add_to_cart_button'). RemoveAttr ('style'); </script>
Привет @ J4G, в этой строке есть плагин customize-woocommerce-shop, добавляющий этот встроенный цвет ** customize-woocommerce-shop-> includes-> js-> woo-product-custom izer-front-detail.js ** следующие строки: строка №: 6` $ ('. product .single_add_to_cart_button'). attr ('style', 'color:' + wpFrontProductCustDetail.product_cust_detail_button_font_c olor + '! important'); `line no: 8` $ ('. product .products .add_to_cart_button'). attr ('style', 'color:' + wpFrontProductCustDetail.product_cust_detail_button_font_c olor + '! important'); ' Прокомментируйте и попробуйте
вы его взломали!
Исходя из вашего опубликованного кода, здесь нет необходимости отвечать, вам нужно отлаживать самостоятельно.