WooCommerceストアフロントCSS完全カスタマイズガイド

公開: 2020-10-15

WooCommerceストアフロントCSS 200,000以上のアクティブなインストールがあるストアフロントのテーマは、WooCommerce Core開発者によって設計、開発、および保守されています。そのため、WooCommerceの公式テーマと呼ばれています。

このテーマは、WooCommerceのように柔軟に設計されています。最新バージョンには、40を超えるアクションフックと60を超えるフィルターフックがあります。

WooCommerceストアフロントCSS

ただし、主な問題は、テーマの外観とレイアウトをどのように調整できるかです。経験豊富なWordPressユーザーの場合、これは問題にはなりません。 CSSやPHPで手を汚したくないユーザーは、テーマをカスタマイズするのが難しいと感じています。このチュートリアルでは、いくつかのコーディングスキルが必要です。カスタマイザーを介して、追加のCSSセクションにCSSルールを追加します。

このセクションを使用する利点は、WordPressカスタマイザーを使用してリアルタイムで編集できることです。変更を公開する前に、行った変更を確認できます。

また、ストアフロントテーマは、カスタマイズするときにアクティブなテーマである必要があることにも言及する価値があります。

この投稿では、ストアフロントテーマでCSSをカスタマイズするための究極のガイドを提供します。秘訣は、変更する必要のある要素を特定し、その要素にルールを追加することです。

そうは言っても、ストアフロントテーマに使用できるCSSルールのいくつかを次に示します。

1.ヘッダーサイズをカスタマイズする

ここでは、テーマカスタマイザーを再度使用しますが、「追加のCSS」セクションにいくつかのCSSコードを記述します。

次のコードを追加します。

 *マストヘッド* /

＃masthead.site-header {

    高さ：155px！重要;

    margin-bottom：0px

}

/ *マストヘッド用のモバイルCSS * /

@media only screen and（max-width：320px）{

    ＃masthead.site-header {

    高さ：80px！重要;

    margin-bottom：0px;

}

}

/ *マストヘッドメニュー* /

.storefront-primary-navigation a、.cart-contents a {

    マージン：0 0 0 0;

}

.main-navigation ul {

    パディング：0 0 10px 4px！important;

}

.main-navigation li {

    height：38px！important;}

/ *マストヘッドメニューのモバイルCSS * /

@media only screen and（max-width：320px）{

.main-navigation ul {

    背景：＃D6DDE4！重要;

}

}

/ *ヘッダー領域* /

.site-header {

パディングトップ：0.5em;

}

.site-header .custom-logo-link img、.site-header .site-logo-anchor img、.site-header .site-logo-link img {

margin-bottom：-45px;

}

結果は次のとおりです。ヘッダーサイズをカスタマイズする

2.テーマのヘッダーから検索バーを削除します

このコードを「追加のCSS」セクションに追加します。

 .site-header .widget_product_search {

表示：なし;

}

結果は次のとおりです。検索バーを削除する

3.ヘッダーメニューの色を変更します

カスタマイザーを使用すると、必要な色でヘッダーをカスタマイズできます。これを行うには、[カスタマイズ]、 [ヘッダー]の順に移動し、必要な色を選択します。

ただし、このオプションは、検索バー、ログインセクション、ロゴなど、ヘッダー領域全体に色を付けます。ヘッダーメニューの背景を変えるには、次のコードスニペットを[追加のCSS]パネルに追加します。

 .storefront-primary-navigation、

.main-navigation ul.menu ul.sub-menu {

背景色：緑;

}

結果は次のとおりです。ヘッダーメニューの色を変更する

4.プライマリナビゲーションバーを非表示にします

ストアフロントテーマは、デフォルトで、すべてのページをメニューとして表示します。プライマリナビゲーションバーを非表示にする場合は、メニューを削除するだけでは不十分です。 [カスタマイズ]、[追加のCSS]セクションの順に移動し、次の行を追加します。

 .storefront-primary-navigation {

表示：なし;

}

結果は次のとおりです。プライマリナビゲーションバーを非表示にする

5.ヘッダーから空白を削除します

[カスタマイズ]、 [追加のCSS]セクションの順に移動し、次の行を追加します。

 .site-branding {

margin-bottom：0px;

}

結果は次のとおりです。ヘッダーから空白を削除します

6.検索バーの幅を広げます

検索バーの幅を広げたい場合はどうしますか？ [追加のCSS]セクションを使用して、次の行を追加します。

 .woocommerce-active .site-header .site-search {

幅：44.739％;

}

#masthead .site-search .widget_product_search input [type = "search"] {

幅：700px！重要;

}

結果は次のとおりです。検索バーの幅を広げる

7.ロゴ、セカンダリナビゲーション、および検索バーのサイズを変更する方法

それらをすべて一度に変更するには、次のコードを追加のCSSセクションに追加します。

 @media screen and（min-width：768px）{

/ *ロゴ* /

.site-header .site-branding、.site-header .site-logo-anchor、.site-header .site-logo-link {幅：30％！重要; / *必要に応じて、px値を使用します。 350px * /}

/ *二次ナビゲーション* /

.site-header .secondary-navigation {幅：40％！重要; / *必要に応じて、px値を使用します。 350px * /}

/* 検索バー */

.site-header .site-search {幅：30％！重要; / *必要に応じて、px値を使用します。 350px * /}

結果は次のとおりです。ロゴ、セカンダリナビゲーション、検索バーのサイズを変更する方法

8.ヘッダーからカートを取り外します

この例では、新しいルールの表示を追加してカートアイコンを削除します。 '。 [追加のCSS]セクションに次のCSSコードを追加します。

 .site-header-cart .cart-contents {

表示：なし;

}

結果は次のとおりです。ヘッダーからカートを削除します

9.ヘッダーを非表示にします

ヘッダーを非表示にするには、[追加のCSS]セクションに次のCSSコードを追加します。

 .site-header {

表示：なし;

}

結果は次のとおりです。ヘッダーを非表示にする

10.ストアフロントヘッダーのメニューリンクのサイズを大きくします

多くのユーザーの好みに応じて、メニューは少し小さくなっています。ただし、ストアフロントテーマのメニューリンクのフォントサイズをアップグレードする必要があります。 [追加のCSS]セクションに次のコードを追加します。

 .main-navigation ul.menu> li> a、.main-navigation ul.nav-menu> li> a {

font-size：28px;

}

結果は次のとおりです。ストアフロントヘッダーのメニューリンクのサイズを大きくする

11.ストアフロントヘッダーのカートアイコンのサイズを変更します

これを行うには、[追加のCSS]セクションに次のCSSコードを追加します

.site-header-cart .cart-contents {

font-size：30px;

}

結果は次のとおりです。ストアフロントヘッダーのカートアイコンのサイズを変更する

12.ストアフロントテーマのサイトヘッダータイトルのサイズを変更します

[追加のCSS]セクションに次のコードを追加します。

 .site-header {

フォントサイズ：20px;

}

結果は次のとおりです。ストアフロントテーマのサイトヘッダータイトルのサイズを変更する

13.モバイルメニューボタンのサイズを変更する

メニューの表示方法は、メニューをレスポンシブにすることの一部であることに注意することが重要です。したがって、プライマリナビゲーションメニューがデスクトップデバイスのリスト形式である場合、同じメニューをモバイルデバイスのハンバーガーメニューとして表示できます。

サイズを変更するには、[追加のCSS]セクションに次のCSSコードを追加します。

 .button.menu-toggle {

フォントサイズ：19px;

}

結果は次のとおりです。モバイルメニューボタンのサイズを変更

14.ショップページで商品タイトルを非表示にする

ショップページで製品のタイトルを非表示にするには、[カスタマイズ]、[追加のCSS]セクションの順に移動し、次の行を追加します。

 h2.woocommerce-loop-product__title {

表示：なし！重要;

}

結果は次のとおりです。

ショップページで商品タイトルを非表示にする

15.商品ページから商品数量プラスボタンとマイナスボタンを非表示にします

プラスボタンとマイナスボタンでテキストフィールドを非表示にして製品の数量を増減するには、[追加のCSS]セクションに次のCSSコードを追加するだけです。

 。量 {

表示：なし！重要;

}

結果は次のとおりです。商品ページから商品数量プラスボタンとマイナスボタンを非表示にする

16.製品ページの[カートに追加]ボタンを非表示にします

これを行うには、[カスタマイズ]、[追加のCSS]セクションの順に移動し、次の行を追加します。

 .single_add_to_cart_button {

表示：なし！重要;

}

結果は次のとおりです。商品ページの「カートに追加」ボタンを非表示にします

17.ストアフロントウィジェットのセクションの色とフォントサイズを変更する

カスタマイザーを使用してページウィジェットのフォントの色やサイズを直接変更する方法はありません。次のCSSコード行を追加することで、これを簡単に変更できます。これを行うには、[カスタマイズ]、[追加のCSS]セクションの順に移動し、次の行を追加します。

 .widget-area .widget {

色：緑;

フォントサイズ：1em;

}

結果は次のとおりです。ストアフロントウィジェットのセクションの色とフォントサイズを変更する

18.商品画像にストアフロントの「セール」バッジを表示する

WooCommerce Storefrontテーマのデフォルトバージョンでは、特定の製品のセールまたは割引価格を定義できます。ただし、商品画像にセールバッジを追加する場合は、[カスタマイズ]、[追加のCSS]セクションの順に移動し、次の行を追加します。

 ul.products li.product .onsale {

位置：絶対;

上：137px;

右：62px;

}

結果は次のとおりです。商品画像にストアフロントの「セール」バッジを表示する

19.「セール」バッジの色を変更する

セールバッジの色を変更するには、[カスタマイズ]、[追加のCSS]セクションの順に移動し、次の行を追加します。

 。発売中 {

背景色：黒;

ボーダーカラー：赤;

赤色;

}

結果は次のとおりです。「セール」バッジの色を変更する

20.数量の「プラスマイナス」ボックスの色を変更する

これは、数量のプラスボタンとマイナスボタンの背景色を変更することで実行できます。これを行うには、[カスタマイズ]、 [追加のCSS ]セクションの順に移動し、次の行を追加します。

 .quantity .qty {

色：＃000;

背景色：＃f5df72;

}

結果は次のとおりです。数量の「プラスマイナス」ボックスの色を変更する

21.ヘッダーのミニカートの背景色を変更します

ヘッダーの色を変更すると、ミニカートのドロップダウンはこの色を継承します。ただし、可視性を高めるために次のCSSルールを使用してこれを変更できます。 [カスタマイズ]、[追加のCSS]セクションの順に移動し、次の行を追加します。

 .woocommerce.widget_shopping_cart {

背景：赤;

border-radius：12px;

}

結果は次のとおりです。ヘッダーのミニカートの背景色を変更する

22.以下のCSSを使用してストアフロントフッターに画像を追加するCopyright

著作権テキストの下に独自のロゴ、支払いの承認、またはパートナーバッジを追加する場合は、[レイヤー]、[カスタマイズ]の順に移動し、[フッター]をクリックします。

[カスタマイズ]をクリックしてパネルを展開し、[背景の画像を選択]をクリックします。

必要な画像を選択して追加してください。

[繰り返しなし]と[下]を選択するか、必要に応じて手動で配置します。

カスタマイザーに戻り、 CSSをクリックしてパネルを展開します。ただし、パーセンテージが仕様に従っていることを確認する必要があります。次に、次の行を追加します。

 .site-info：after {

コンテンツ： '';

背景画像：url（独自のURLを追加）;

表示ブロック;

幅：100px;

高さ：100px;

マージン：0自動;

}

結果は次のとおりです。以下のCSSを使用してストアフロントフッターに画像を追加するCopyright

フッターのギャップを取り除く方法

[カスタマイズ]、[追加のCSS]セクションの順に移動し、次の行を追加します。

.footer-widgets { padding-top: 0; }

結果は次のとおりです。フッターのギャップを取り除く方法

24.ハイパーリンクからアンダースコアを削除する方法

デフォルトでは、ストアフロントテーマに下線が引かれています。リンクを削除する場合は、[カスタマイズ]、[追加のCSS]セクションの順に移動し、次の行を追加します。

 a {

テキスト装飾：なし！重要;

}

結果は次のとおりです。ハイパーリンクからアンダースコアを削除する方法

25.ストアフロントホームページの横線の色を変更する方法

子テーマのcustom.cssファイルに次のコードを追加するだけです。

 .page-template-template-homepage .hentry .entry-header、

.page-template-template-homepage .hentry、

.page-template-template-homepage .storefront-product-section {

ボーダーカラー：赤;

}

26.セールバッジのストアフロントWooCommerceをカスタマイズする方法

追加のCSSセクションに次のコードを追加するだけです。

 。発売中 {

背景色：#FFFFFF;

ボーダーカラー：＃FF0000;

色：＃FF0000;

}

結果は次のとおりです。セールバッジのストアフロントWooCommerceをカスタマイズする方法

27.WooCommerceストアフロントフッターの高さを変更する方法

[追加のCSS]セクションに次のCSSコードを追加することで、WooCommerceストアフロントのフッターの高さを簡単に変更できます。

 section.footer-widgets {

パディングトップ：25px;

}

div.site-info {

パディングトップ：16px;

パディング-下：25px;

}

結果は次のとおりです。 WooCommerceストアフロントフッターの高さを変更する方法

28.特定のホームページセクションのストアフロントに背景画像を追加する

デフォルトのストアフロントテーマには、製品カテゴリ、最近の製品、注目の製品、人気のある製品、セール中の製品、ベストセラーの製品の6つのセクションがあります。次のコードを[追加のCSS]セクションに追加するだけです。

 .storefront-featured-products {

background-image：url（ここにURLを追加）;

背景位置：中央中央;

background-repeat：no-repeat;

背景サイズ：カバー;

-o-background-size：カバー;

}

結果は次のとおりです。特定のホームページセクションのストアフロントに背景画像を追加する

29.ストアフロントのホームページセクションに背景色を追加する

これを行うには、最初に色を追加するセクションを特定する必要があります。これは、追加のCSSセクションに次のコードを追加することで簡単に実行できます。

 .storefront-featured-products {

背景色：＃FFEB3B;

}

結果は次のとおりです。ストアフロントのホームページセクションに背景色を追加する

30.ホームページのセクションタイトルを削除または非表示にする方法

これを行うには、最初に削除または非表示にするセクションを特定する必要があります。これは、追加のCSSセクションに次のコードを追加することで実行できます。

 .storefront-recent-products .section-title {display：none;}

.storefront-product-categories .section-title {display：none;}

.storefront-featured-products .section-title {display：none;}

.storefront-popular-products .section-title {display：none;}

.storefront-on-sale-products .section-title {display：none;}

.storefront-best-selling-products .section-title {display：none;}

結果は次のとおりです。ホームページのセクションタイトルを削除または非表示にする方法

31.セール中の商品の背景色を変更する方法

これは、追加のCSSセクションに次のコードを追加することで実行できます。

 .storefront-on-sale-products {

背景色：＃FFEB3B;

}

結果は次のとおりです。セール商品の背景色を変更する方法

32.タイトルのないページのヘッダーの下にスペースを自動的に追加する方法

いずれかのページのメインページタイトルを無効にすると、ヘッダーの下にスペースが残りません。このコードスニペットは、スライダー、画像、またはその他のコンテンツを上部と同じ高さに挿入するための間隔を追加するのに役立ちます。次のコードを[追加のCSS]セクションに追加します。

 body.page-header-disabled #main {

パディングトップ：30px;

}

結果は次のとおりです。タイトルのないページのヘッダーの下にスペースを自動的に追加する方法

33.モバイルでスクロールトップボタンを非表示にする方法

次のコードを[追加のCSS]セクションに追加するだけです。

@media only screen and（max-width：959px）{

＃site-scroll-top {display：none！important; }

}

結果は次のとおりです。モバイルでスクロールしてトップボタンを非表示にする方法

結論

このガイドでは、ストアフロントテーマのスタイル設定に使用できるCSSのヒントをいくつか紹介しました。変更をリアルタイムでプレビューできるように、[追加のCSS]セクションにCSSルールを追加することを強くお勧めします。変更をプレビューすると、ルールを仕様に合わせて変更できます。

ルールを追加するには、ストアフロントテーマのカスタマイズインターフェイスの[追加のCSS ]セクションにコピーして貼り付けます。これをする：

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [カスタマイズ]をクリックします。
表示される左側のサイドバーで[追加のCSS ]に移動します。
CSSルールを追加します。
変更に満足したら、[公開]をクリックします。

ただし、ここで共有するCSSのヒントは、ストアフロントテーマでのみ機能することに注意してください。

同様の記事

WooCommerceストアフロントのヘッダーの高さを調整する方法
WooCommerceストアフロントでホームページを設定する方法
ログアウトオプションメニューの追加方法WooCommerceストアフロントテーマ[例]
ストアフロントのテーマタグラインWooCommerceを変更する方法
メインメニューのフォントサイズを変更する方法ストアフロントのテーマ
WooCommerceストアフロントヘッダーCSSカスタマイズガイド
WooCommerceストアフロントホームページにすべてのカテゴリを表示
モバイルメニューボタンのストアフロントテーマのサイズを変更する方法
メニューの色を変更する方法WooCommerceストアフロント
WooCommerceストアフロントフッターの高さを変更する方法
フッターストアフロントテーマWooCommerceを削除する方法
サイトタイトルのサイズを変更する方法WooCommerceストアフロントテーマ
ヘッダーWooCommerceストアフロントテーマを削除する方法
WooCommerceストアフロントテーマのホームページのカスタマイズ[究極のガイド]
WooCommerceストアフロントの注目画像サイズを変更する方法
Diviモバイルメニューをスクロール可能なクイックフィックスソリューションにする方法
カテゴリWooCommerceストアフロントテーマを非表示にする方法
WooCommerceストアフロントテーマでカートアイコンのサイズを変更する方法
関連商品を削除する方法WooCommerceストアフロントテーマ
ベストセラーを隠す方法WooCommerceストアフロントフロントページ