WooCommerceに独自CSSを当てる

WordPressで人気プラグインのWooCommerceですが、直接カスタマイズの日本語記事が少ないため苦難されている方も多いのでは無いでしょうか。

WooCommerceのデフォルトCSSを無効化

まず、デフォルトCSSを無効化します。以下のコードをfunction.phpに記述するだけです。

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

CSSファイルをアップロード

任意の場所に、独自CSSファイルをアップロードします。

WooCommerceに独自CSSを当てる

次に、以下のコードをfunction.phpに記述して終わりです。

function wp_enqueue_woocommerce_style(){
	wp_register_style( 'style-woocommerce', 'file-path' . '/woocommerce.css' );
	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'qusavi-woocommerce' );
	}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

---