איך להסיר CSS הנטען כברירת מחדל בווקומרס

ווקומרס טוענת שלושה קבצי CSS כברירת מחדל בכל עמוד באתר. אם אתם בונים תבנית מותאמת אישית או צריכים שליטה מלאה על העיצוב של החנות, תרצו להסיר את קבצי העיצוב ברירת המחדל ולהחליף אותם בקבצים משלכם.

במדריך זה תלמדו מהם שלושת קבצי ה-CSS, כיצד להסיר את כולם או חלקם, וכיצד לטעון נכון את קבצי העיצוב שלכם.

שלושת קבצי ה-CSS של ווקומרס הם: woocommerce-general.css (עיצוב ליבה כמו כפתורים וטפסים), woocommerce-layout.css (מבנה עמודות וגריד), ו-woocommerce-smallscreen.css (עיצוב רספונסיבי למסכים מתחת ל-768px). יחד הם מגדירים את המראה השלם של עמודי ווקומרס.

הסרת כל קבצי ה-CSS של ווקומרס

הגישה הפשוטה ביותר היא להסיר את כל שלושת הקבצים בבת אחת באמצעות הפילטר woocommerce_enqueue_styles. הוסיפו קוד זה לקובץ functions.php של תבנית הבת:

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

שורה אחת זו אומרת לווקומרס לא לטעון שום קובץ עיצוב. זו הגישה המומלצת כאשר בונים תבנית מותאמת מאפס וכותבים את כל עיצובי ווקומרס בעצמכם.

הסרת קבצי CSS ספציפיים של ווקומרס

אם רוצים להסיר רק קבצי עיצוב מסוימים ולהשאיר אחרים, השתמשו באותו פילטר אבל בצעו unset() רק לאלו שאינכם צריכים:

add_filter( 'woocommerce_enqueue_styles', function( $styles ) {
    unset( $styles['woocommerce-general'] );     // עיצוב ליבה (כפתורים, טפסים, הודעות)
    unset( $styles['woocommerce-layout'] );      // גריד ופריסת עמודות
    // unset( $styles['woocommerce-smallscreen'] ); // רספונסיבי (נשמור את זה)
    return $styles;
} );

דוגמה זו מסירה את עיצובי הליבה והפריסה אבל שומרת על קובץ העיצוב הרספונסיבי. שימושי כשרוצים לכתוב פריסת דסקטופ משלכם אבל לשמור על האופטימיזציות למובייל של ווקומרס.

הנה מה שכל קובץ עיצוב מטפל בו:

טעינת קובץ העיצוב שלכם לווקומרס

לאחר הסרת ברירות המחדל, טענו את קובץ העיצוב המותאם שלכם כדי שעמודי ווקומרס עדיין ייראו מעוצבים:

add_action( 'wp_enqueue_scripts', function() {
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_style(
            'mytheme-woocommerce',
            get_stylesheet_directory_uri() . '/css/woocommerce.css',
            array(),
            '1.0.0'
        );
    }
} );

הבדיקה class_exists( 'WooCommerce' ) מוודאת שקובץ העיצוב נטען רק כאשר ווקומרס פעילה. שימוש ב-get_stylesheet_directory_uri() (ולא get_template_directory_uri()) מבטיח שהקובץ נטען מתבנית הבת.

טעינה מותנית: רק בעמודי ווקומרס

אם רוצים שקובץ ה-CSS המותאם של ווקומרס ייטען רק בעמודי החנות (ולא בפוסטים או עמודים רגילים), השתמשו בפונקציות התנאי המובנות של ווקומרס:

add_action( 'wp_enqueue_scripts', function() {
    if ( ! function_exists( 'is_woocommerce' ) ) {
        return;
    }

    if ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) {
        wp_enqueue_style(
            'mytheme-woocommerce',
            get_stylesheet_directory_uri() . '/css/woocommerce.css',
            array(),
            '1.0.0'
        );
    }
} );

זה מונע טעינת CSS מיותר בעמודים שאינם של ווקומרס, ומשפר ביצועים. לטכניקות נוספות להסרת CSS ו-JS לא בשימוש, עיינו במדריך מניעת טעינת נכסי ווקומרס בכל העמודים.

שאלות נפוצות

שאלות נפוצות על CSS של ווקומרס:

סיכום

ווקומרס טוענת שלושה קבצי CSS כברירת מחדל: עיצוב ליבה, פריסה ורספונסיבי למסכים קטנים. כדי להסיר את כולם, השתמשו ב-add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ) בתבנית הבת.

להסרה סלקטיבית, השתמשו ב-unset() על מפתחות קובץ העיצוב הספציפיים באותו פילטר. לאחר הסרת ברירות המחדל, טענו את קובץ העיצוב שלכם באמצעות get_stylesheet_directory_uri() כדי לטעון אותו מתבנית הבת.

לביצועים טובים יותר, שקלו לטעון את ה-CSS של ווקומרס רק בעמודי חנות באמצעות פונקציות תנאי כמו is_woocommerce(). לעוד טכניקות להסרת CSS ו-JS הנטענים על ידי תוספים, עיינו במדריך הקשור.