You are here: Home » ECサイト » WooCommerceのテンプレートのcssを適用しない方法

WooCommerceのテンプレートのcssを適用しない方法

最近wordressの優秀なECサイト用のプラグインWooCommerce を使ってECサイトを作っているのですが、あまり日本での普及はしてないらしく日本語の解説サイトが情報不足で海外サイト見たり、配信サイトのwoothemesをみたり海外サイトを見まくっていろいろ情報を集めながら、作業をしています。

というわけでこれから、WooCommerce の話題が多くなるweb clubになると思います。

スポンサーリンク

WooCommerceのcssはscssと@import

woo

WooCommerceを使うと、ショップページ、マイアカウント、カートが自動で出来上がります。その中で、カートに入れるボタンなどがWooCommerceのテンプレートにあるcssが反映されて、使ってる子テーマのcssをいくら書き換えてもWooCommerceのcssが優先される仕組みです。

デフォルトでは三つのスタイルシートをenqueues(格納)しているらいのですが

woocommerce.scss.css

全てを見たわけではないのですが、WooCommerceのcssにはscssを使っていて@import が使われています。ですので、Sassがわからないと元からカスタマイズのするのは厳しいかもしれません。

スポンサーリンク

デフォルトのボタンが紫や灰色だったり細かなところで自分のcssを反映させたい人も多いはず、そこで、以下の記述をfunctionsにいれるとデフォルトのWooCommerceのcssがほぼ反映されません。dequeueされます。

Disable the default stylesheet と jameskoster/functions.php に全てここに書いてありました

上の記述をfunctions.phpに入れると、cssが反映されないのですが、それだと、元々のレイアウトもデザインもぐちゃぐちゃになってしまうので、大まかだけど部分的にcssを反映させない方法も、もちろんありました。

unset( $enqueue_styles[‘woocommerce-general’] );
unset( $enqueue_styles[‘woocommerce-layout’] );
unset( $enqueue_styles[‘woocommerce-smallscreen’] );

この三行の記述でそれぞれ、レイアウトのcssだけ別に削除とかできたりするのですがの、正直面倒でした、逆に全部自分で作った方が早いかもしれない。

woocommerce-general、woocommerce-layout、woocommerce-smallscreenとはそのファイルを指してます。

 

というわけで僕は最初の全てcssを反映させない方法を使って、ガシガシカスタマイズしています。

スポンサーリンク

 

なんでWooCommerceなの?Welcartじゃないの?

答え 英語を覚えたかったから (若干後悔中)

コメントを残す