Лучший способ переопределить woocommerce.стиль CSS

каков наилучший способ переопределить woocommerce.css? В моем стиле.css я должен написать эти css снова, чтобы переопределить его и поставить !важно после каждого фрагмента. Я думаю, что это не лучшая практика для этого. У кого-нибудь есть идея получше?

7
woocommerce wordpress

4 ответов

WooCommerce enqueues 3 таблицы стилей по умолчанию. Вы можете отключить их все, используя:

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

подробнее о том, как отключить отдельные таблицы стилей WooCommerce, см. В разделе их отключить таблицу стилей по умолчанию статьи.

12

есть другой подход в статьи Кэрри укропом. Она использует тему Genesis, но ее можно переработать для других тем, которые я думаю.

по сути, она рекомендует изменить порядок загрузки стилей, чтобы загрузить таблицу стилей вашей темы после таблица стилей WooCommerce. т. е. она ставится в очередь с более высоким приоритетом.

для бытия, похоже, ниже. Если вы можете получить доступ к таблице стилей фреймворка/темы загрузив подобный крюк, вы могли бы сделать то же самое.

/**
 * Remove Genesis child theme style sheet
 * @uses  genesis_meta  <genesis/lib/css/load-styles.php>
*/ 
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );

/**
 * Enqueue Genesis child theme style sheet at higher priority
 * @uses wp_enqueue_scripts <http://codex.wordpress.org/Function_Reference/wp_enqueue_style>
 */
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 15 );
3

вы можете переопределить woocommerce.css с пользовательским.css-файл, который может быть расположен либо в теме wordpress по умолчанию, либо в дочерней теме. Вы также можете сделать резервную копию по умолчанию woocommerce.css, если что-то случится с custom.файл CSS.

add_action('wp_enqueue_scripts', 'override_woo_frontend_styles');
function override_woo_frontend_styles(){
    $file_general = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/twentyfifteen/css/custom.css';
    if( file_exists($file_general) ){
        wp_dequeue_style('woocommerce-general');
        wp_enqueue_style('woocommerce-general-custom', get_template_directory_uri() . '/css/custom.css');
    }
}

то же самое для других стилей интерфейса woocommerce (WooCommerce-layout и woocommerce-smallscreen).

Если вы делаете это в дочерней теме, используйте get_stylesheet_directory_uri () вместо get_template_directory_uri() и измените путь к файлу в соответствии с именем дочерней темы.

2

мой подход заключается в том, чтобы следовать принципу каскад CSS. Так что в основном тот, который загружает последний, переопределит предыдущие правила, если нет !важно!--9-->.

регистрация здесь:

//This is the order the css load by default, at leat on the sites I have worked!!!
<link rel="stylesheet" href="http:/css/custom_styles.css" type="text/css" media="all">
<link rel="stylesheet" href="http:/css/woocomerce.css" type="text/css" media="all">

Итак, какова идея загрузить пользовательский CSS после загрузки woocommerce.

Способ 1: добавление низкого приоритета на [add_action] для стиля add_action например:

function load_my_css(){
   wp_enqueue_style('custom-theme', URL TO STYLE);
}
// (the higher the number the lowest Priority)
add_action('wp_enqueue_scripts', 'load_my_css', 5000);

Способ 2: удалите стили woocommerce, поэтому вы создаете свои собственные стили

// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Способ 3: добавьте массив зависимостей в свой пользовательский стиль

function load_my_css(){
   wp_enqueue_style('custom-theme', URL TO STYLE, array(DEPENDECIES HERE));
}

Надеюсь, один из методов поможет.

0