woocommerce.css를 덮어쓰는 최선의 방법

woocommerce.css를 덮어쓰는 최선의 방법

woocommerce.css를 덮어쓰는 가장 좋은 방법은 무엇입니까?제 스타일에서는 이 css를 다시 작성하여 덮어쓰고 각 css 뒤에 !important를 붙여야 합니다.나는 이것이 그렇게 하는 최선의 방법이 아니라고 생각한다.더 좋은 생각 있는 사람?

WooCommerce는 기본적으로 3개의 스타일시트를 큐잉합니다.다음의 방법으로, 이러한 모든 것을 무효로 할 수 있습니다.

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

개별 WooCommerce 스타일시트를 비활성화하는 방법에 대한 자세한 내용은 기본 스타일시트 비활성화 문서를 참조하십시오.

캐리 딜스의 기사에 또 다른 접근법이 있습니다.그녀는 창세기 테마를 사용하고 있지만 다른 테마를 위해 수정될 수 있을 것 같습니다.

기본적으로 그녀가 권장하는 것은 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 );

woocommerce.css를 기본 워드프레스 테마 또는 하위 테마에 있는 custom.css 파일로 재정의할 수 있습니다.custom.css 파일에 문제가 발생했을 경우 기본 woocommerce.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-small screen)도 마찬가지입니다.

자녀 테마에서 이 작업을 수행할 경우 get_template_directory_uri() 대신 get_stylesheet_directory_uri()를 사용하여 자녀 테마 이름에 따라 파일 경로를 변경합니다.

나의 접근법은 CSS의 원칙적 캐스케이드를 따르는 것이다.따라서 기본적으로 !important가 정의되지 않은 경우 마지막으로 로드되는 규칙이 이전 규칙보다 우선됩니다.

여기를 체크해 주세요.

//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">

그럼 Woocommerce가 로드된 후 커스텀 CSS를 로드한다는 생각은 무엇입니까?

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

방법 중 하나가 도움이 되길 바랍니다.

필요한 것은 WooCommerce 문서에서 찾을 수 있습니다.다음 중 하나에 대해 두 가지 기능을 제공합니다.

1. WooCommerce 플러그인이 다음을 사용하여 모든 스타일시트 또는 특정 스타일시트를 로드하지 않도록 합니다.woocommerce_enqueue_styles()★★★★★★ 。
2. 를 사용하여 플러그인 내에 커스텀스타일시트를 추가합니다.wp_enqueue_woocommerce_style()woocommerce.css를 덮어쓸 수 있습니다.

WooCommerce 문서 링크 기본 스타일시트 비활성화 »

새로운 버전의 WooCommerce 4.x+의 경우 다음을 사용하십시오.

    add_action( 'wp_print_styles', 'dequeueWooCommerceStyles' );

    public function dequeueWooCommerceStyles()
    {
        wp_dequeue_style('wc-block-style');
        wp_deregister_style( 'wc-block-style' );
    }

언급URL : https://stackoverflow.com/questions/25027108/best-way-to-override-woocommerce-css