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

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

בפוסט קצר זה נראה מהי הדרך לבטל את טעינת ה CSS בווקומרס באמצעות תבנית בת.

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

בכדי להסיר את ה CSS עליכם להוסיף את הקוד הבא לקובץ functions.php של תבנית הבת שלכם או לתוסף כלשהו כגון Code Snippets המאפשר הוספה של פונקציות מסוג זה.

שימו לב כי אין להוסיף קוד זה בקובץ functions.php של תבנית האב מכיוון וזה יימחק כנראה במידה ותעדכנו את התבנית.

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

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

זוהי הדרך המומלצת במידה ואתם בונים תבנית מותאמת אישית מאפס. הסרת קבצי ה CSS המגיעים כברירת מחדל בווקומרס וביצוע enqeueing לשלכם יגנו עליכם כאשר תעדכנו את קבצי הליבה של ווקומרס.

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

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

/**
 * Set WooCommerce image dimensions upon theme activation
 */
// Remove each style one by one
function savvy_dequeue_styles( $enqueue_styles ) {
	unset( $enqueue_styles['woocommerce-general'] );	// Remove the gloss
	unset( $enqueue_styles['woocommerce-layout'] );		// Remove the layout
	unset( $enqueue_styles['woocommerce-smallscreen'] );	// Remove the smallscreen optimisation
	return $enqueue_styles;
}
add_filter( 'woocommerce_enqueue_styles', 'savvy_dequeue_styles' );

לאחר מכן באפשרותכם להוסיף (לבצע enqeue) לקבצי CSS משלכם בצורה הבאה:

/**
 * Enqueue your own stylesheet
 */
function wp_enqueue_woocommerce_style(){
	wp_register_style( 'mytheme-woocommerce', get_template_directory_uri() . '/css/woocommerce.css' );
	
	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'mytheme-woocommerce' );
	}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );