Изменить & quot; добавить в корзину & quot; цвет кнопки в зависимости от категории продукта Woocommerce
В Woocommerce я пытаюсь изменить цвет кнопки «Добавить в корзину» в зависимости от категории продукта, в которой он находится. Пока я могу изменить текст, но не могу понять, как передать постоянное значение цвета в формате хэша (например, #fffff)
// Change add to cart button text per category
add_filter( 'woocommerce_product_single_add_to_cart_text', 'wps_custom_cart_button_text' );
function wps_custom_cart_button_text() {
global $product;
$terms = get_the_terms( $product->ID, 'product_cat' );
foreach ($terms as $term) {
$product_cat = $term->slug;
break;
}
switch($product_cat) {
case 'clothing';
return __('Order your Clothes', 'your_theme_text_domain' );
default;
return __( 'Order now', 'your_theme_text_domain' );
}
}
Любая помощь приветствуется.
Решение
Вот способ изменить текст кнопки и цвет кнопки в зависимости от категории продукта:
// Change add to cart button text per category
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_single_add_to_cart_text', 20, 2 );
function custom_single_add_to_cart_text( $text_button, $product ) {
global $post;
$domain = 'woocommerce';
// HERE set the array of categories terms slug and corresponding colors and texts
$categories_colors = array(
'clothing' => array( 'color' => 'red', 'text' => __('Order your Clothes', $domain ) ),
'posters' => array( 'color' => 'blue', 'text' => __('Order your Posters', $domain ) ),
);
$color = '';
$text_button = __('Order now', $domain ); // default
foreach ($categories_colors as $key => $value ) {
if( has_term( $key, 'product_cat', $post->ID ) ){
$color = $value['color'];
$text_button = $value['text'];
break;
}
}
if ( empty($color) ) return $text_button; // Exit if empty
// Dynamic css andjquery to set the color when defined
?>
<style>
button.single_add_to_cart_button.<?php echo $color; ?>{background-color:<?php echo $color; ?> !important;}
</style>
<?php
// jQuery (add color css class)
?>
<script type="text/javascript">
(function($){
$('button.single_add_to_cart_button').addClass('<?php echo $color; ?>');
})(jQuery);
</script>
<?php
return $text_button;
}
Код помещается в файл function.php вашей активной дочерней темы (или активной темы). Проверено и работает.
Вы можете удалить весь
<style>вставьте код, добавив свои собственные правила CSS в файл активной темы styles.css (в зависимости от цвета добавленного класса CSS)
Другие решения
Решено с помощью CSS для изменения стиля кнопки без PHP. Вызов идентификатора класса назначенной категории, а затем элемент селектора кнопки woocommerce.
Просто поместите это в ваш дополнительный раздел CSS или Custom CSS:
/*Call the class ID of the category and the "add to cart" button assigned to that category*/
.product_cat-CATEGORYNAME.product .button {
/*Button styling here*/
border-radius:5px;
color:#ffff;
background-color: #fffff;
}
detector