ストアフロントテーマの商品ページのタブの色を変更する方法

公開: 2020-10-29

ストアフロントの商品ページのタブの色 WooCommerceには、WordPressリポジトリに500万を超えるアクティブなインストールがあります。 WooCommerceは、WordPress向けの非常に人気のあるeコマースソリューションです。ほとんどの人は、主にその柔軟性とカスタマイズの容易さのために、WooCommerceを使用してオンラインストアを構築しています。

WooCommerceには多くの拡張機能があり、必要になる可能性のあるほぼすべての機能をカバーしています。しかし、それらのいくつかはお金がかかりますが、それでも彼らは仕事を成し遂げます。アクションを使用して、自分で簡単にカスタマイズを行うことができます。

ストアフロントの商品ページのタブの色

このチュートリアルでは、製品ページのタブの色を変更します。さらに、WooCommerceの製品タブを追加および編集するために使用します。

WooCommerceに精通している場合は、WooCommerceが3つのタブをサポートしていることをご存知でしょう。これらのタブは次のとおりです。

説明
追加情報
レビュー

これは、ストアフロントテーマがそれらを表示する方法です。製品タブ

WooCommerce製品ページのタブの色を変更する手順

従う必要のある手順は次のとおりです。

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

 .woocommerce div.product .woocommerce-tabs ul.tabs li.active

{{

background-color：＃a02fa4！important;

色：白！重要;

}

これが結果になります：

このコードは、アクティブなタブの色を変更します。

さらに、このセクションをカスタマイズするためのスニペットをいくつか共有します。

カスタムWooCommerceストアフロント製品タブを追加する手順

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。テーマエディタページが開いたら、テーマ関数ファイルを探して、カスタムWooCommerce製品タブを追加する関数を追加します。
次のコードをfunctions.phpファイルに追加します。

 add_filter（ 'woocommerce_product_tabs'、 'njengah_new_product_tab'）;

function njengah_new_product_tab（$ tabs）{

//新しいタブを追加します

$ tabs ['test_tab'] = array（

'title' => __（ '割引'、 'text-domain'）、

'優先度' => 50、

'コールバック' => 'njengah_new_product_tab_content'

）;

$ tabsを返します。

}




関数njengah_new_product_tab_content（）{

//新しいタブのコンテンツ

echo '割引';

echo 'これが新しい割引商品タブです。';

}

これが結果になります：

WooCommerceストアフロントの商品タブを削除する手順

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。テーマエディタページが開いたら、テーマ関数ファイルを探して、WooCommerceStorefront製品タブを削除する関数を追加します。
次のコードをfunctions.phpファイルに追加します。

 add_filter（ 'woocommerce_product_tabs'、 'njengah_remove_product_tabs'、98）;

関数njengah_remove_product_tabs（$ tabs）{

unset（$ tabs ['description']）; // [説明]タブを削除します

unset（$ tabs ['reviews']）; // [レビュー]タブを削除します

unset（$ tabs ['additional_information']）; //追加情報タブを削除します

unset（$ tabs ['test_tab']）; //割引タブを削除します

$ tabsを返します。

}

これが結果になります：

WooCommerceストアフロントの商品タブの名前を変更する手順

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。テーマエディタページが開いたら、テーマ関数ファイルを探して、WooCommerceStorefront製品タブの名前を変更する関数を追加します。
次のコードをfunctions.phpファイルに追加します。

 add_filter（ 'woocommerce_product_tabs'、 'njengah_rename_tabs'、98）;

function njengah_rename_tabs（$ tabs）{

$ tabs ['description'] ['title'] = __（ '詳細情報'、 'text-domain'）; //説明タブの名前を変更します

$ tabs ['reviews'] ['title'] = __（ 'Ratings'、 'text-domain'）; //レビュータブの名前を変更します

$ tabs ['additional_information'] ['title'] = __（ '製品データ'、 'text-domain'）; // [追加情報]タブの名前を変更します

$ tabs ['test_tab'] ['title'] = __（ 'Commission'、 'text-domain'）; //割引タブの名前を変更します

$ tabsを返します。

}

これが結果になります：

WooCommerceの製品タブを再注文する手順

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。テーマエディタページが開いたら、テーマ関数ファイルを探して、WooCommerce製品タブを並べ替える関数を追加します。
次のコードをfunctions.phpファイルに追加します。

 add_filter（ 'woocommerce_product_tabs'、 'njengah_reorder_tabs'、98）;

function njengah_reorder_tabs（$ tabs）{

$ tabs ['reviews'] ['priority'] = 5; //最初にレビュー

$ tabs ['description'] ['priority'] = 15; //説明3番目

$ tabs ['additional_information'] ['priority'] = 20; //追加情報4番目

$ tabsを返します。

}

これが結果になります：

結論

この投稿では、単一の製品ページでアクティブな製品タブの色を変更する方法を共有しています。さらに、このセクションをカスタマイズするために使用できるいくつかのコードスニペットを共有しました。製品タブを追加または削除する方法を説明しました。さらに、WooCommerceStorefrontの商品タブの名前を変更して並べ替える方法を示しました。

同様の記事

検索ボックスのストアフロントのテーマを削除する方法
WordPressのカスタム投稿タイプメニューにサブメニューを追加する方法
ストアフロントテーマWooCommerceでタグを非表示にする方法
WooCommerce製品ページから数量フィールドを非表示または削除する
WooCommerceでデジタル製品を販売する方法
WooCommerceでカスタムオーダーステータスを追加する方法
WooCommerceでカートに追加ボタンを非表示にする方法
ボタンの色の店先のテーマを変更する方法
フォントサイズを変更する方法WooCommerceストアフロントのテーマ
ストアフロントのWooCommerceからモバイルフッターを非表示にする方法
カテゴリWooCommerceストアフロントテーマを非表示にする方法
行ごとのストアフロント商品数を変更する方法
WooCommerceストアフロントで次の商品タブをオフにする方法
関連商品を削除する方法WooCommerceストアフロントテーマ
WooCommerce製品にカテゴリを追加する方法
ストアフロントのテーマヘッダーからカートを削除する方法
WooCommerceで注文ステータスメッセージの名前を変更する方法
ページごとに商品を変更する方法WooCommerceストアフロントテーマ
WooCommerceカートとチェックアウトを1つのページに配置する方法
WooCommerceのショップページからすべての商品を非表示にする方法