• English
  • 日本語

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

WordPress構築、ご相談ください

自社サイトをWordpressで運営して丸10年。その中で培ったノウハウを活かした存分にWordpressサイト構築を承っております。まずはご相談ください。