【WooCommerce】デフォルトで適用されているCSSを無効にして、独自のCSSを読み込む方法

ECサイト構築

WordPressでECサイトが構築できる「WooCommerce」プラグインを有効化すると、ショップのトップページや商品詳細ページ、決済ページなどに、そこそこいい感じでデザインが適用されます。

もっと自由にデザインしたい場合ってどうする

ところで、デフォルトで適用されているデザインを変更したい、もっと自由にカスタマイズしたい・・・という場合がありました。そんな時は、デフォルトで適用されているCSSを無効にする方法があります。

WooCommerceでデフォルトで適用されているCSSを無効にする方法

CSSを無効にする方法は2つあって、Gistでは以下のコードが紹介されています。

以下に日本語で補足説明します。

1つずつ無効化する方法

例えば、下のコードのように、個別で無効にしたいCSSがある場合はunsetを1つずつ書いて無効化します。

// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_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;
}

特定のCSSを有効（無効）にしたい場合は使える方法ですね。

全部まとめて無効化する方法

1つずつ無効化するのではなく「全部まとめて無効にしたい！」という場合は、以下のように書けばOKです。

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

どちらか使いたい方法を選べばOKですね。

WooCommerceで独自のCSSを読み込む方法

無効にしたデフォルトCSSの代わりに、独自で作ったCSSを読み込む方法があります。Gistでは以下のようにコードが紹介されています。

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' );

コードがやっていること

すごくざっくり書くと、独自で作ったCSSファイル「woocommerce.css」をテーマフォルダ内の任意の場所に入れて、「woocommerce」クラスが定義済みの場合はCSSファイルを読み込む、という処理をしています。

「wp_enqueue_scripts」を使って読み込む方法はWordPressのカスタマイズに詳しい方ならご存知の方法だと思いますが、関数内に「class_exists」を使ってクラス定義があるかどうかを判別する処理は、WooCommerceを使わないとなかなか書く機会も少ないのかなぁと思いましたが、いかがでしょうか・・・。

もし「WooCommerceを好きにデザインしたいんだけど、デフォルトのCSSが適用されてるから、あまりうまくいかない・・・無効にしたい」という場合など、ご参考いただけますと幸いです。

著者:bouya Imamura