如何更改店面主題產品頁面選項卡顏色

已發表: 2020-10-29

店面產品頁面標籤顏色 WooCommerce 在 WordPress 存儲庫中擁有超過 500 萬個活動安裝。 WooCommerce 是一個非常受歡迎的 WordPress 電子商務解決方案。大多數人都在使用 WooCommerce 建立他們的在線商店，主要是因為它的靈活性和易於定制。

WooCommerce 有許多擴展，幾乎涵蓋了您可能需要的所有特性或功能。然而，其中一些需要花錢，但他們仍然可以完成工作。您可以使用操作輕鬆地自己進行一些自定義。

店面產品頁面標籤顏色

在本教程中，我將更改產品頁面選項卡的顏色。此外，我將使用添加和編輯 WooCommerce 產品選項卡。

如果您熟悉 WooCommerce，就會知道 WooCommerce 支持三個選項卡。這些選項卡是：

描述
附加信息
評論

這是 Storefront 主題顯示它們的方式：產品標籤

更改 WooCommerce 產品頁面選項卡顏色的步驟

以下是您需要遵循的步驟：

登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
從儀表板菜單中，單擊外觀菜單 > 自定義。
在出現的左側邊欄中向下導航到Additional CSS 。
添加 CSS 規則。

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

{

背景顏色：#a02fa4 !important;

顏色：白色！重要；

}

這將是結果：

此代碼更改活動選項卡的顏色。

此外，我將分享一些片段來自定義此部分。

添加自定義 WooCommerce 店面產品標籤的步驟

登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。打開主題編輯器頁面後，查找主題功能文件以添加添加自定義 WooCommerce 產品選項卡的功能。
將以下代碼添加到 functions.php 文件中：

 add_filter('woocommerce_product_tabs', 'njengah_new_product_tab');

功能 njengah_new_product_tab( $tabs ) {

// 添加新標籤

$tabs['test_tab'] = 數組（

'title' => __( '折扣', 'text-domain' ),

'優先級' => 50,

'回調' => 'njengah_new_product_tab_content'

);

返回$標籤；

}




功能 njengah_new_product_tab_content() {

// 新標籤內容

迴聲“折扣”；

echo '這是您的新折扣產品標籤。';

}

這將是結果：

刪除 WooCommerce 店面產品標籤的步驟

登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。打開主題編輯器頁面後，查找主題函數文件以添加刪除 WooCommerce Storefront 產品選項卡的函數。
將以下代碼添加到 functions.php 文件中：

 add_filter('woocommerce_product_tabs', 'njengah_remove_product_tabs', 98);

功能 njengah_remove_product_tabs( $tabs ) {

未設置（$tabs['description']）； // 移除描述標籤

未設置（$tabs['reviews']）； // 移除評論標籤

未設置（$tabs['additional_information']）； // 刪除附加信息選項卡

未設置（$tabs['test_tab']）； // 移除折扣標籤

返回$標籤；

}

這將是結果：

重命名 WooCommerce 店面產品標籤的步驟

登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。打開主題編輯器頁面後，查找主題函數文件以添加重命名 WooCommerce Storefront 產品選項卡的函數。
將以下代碼添加到 functions.php 文件中：

 add_filter('woocommerce_product_tabs', 'njengah_rename_tabs', 98);

功能 njengah_rename_tabs( $tabs ) {

$tabs['description']['title'] = __( '更多信息', 'text-domain' ); // 重命名描述選項卡

$tabs['reviews']['title'] = __('Ratings', 'text-domain'); // 重命名評論標籤

$tabs['additional_information']['title'] = __('Product Data', 'text-domain'); // 重命名附加信息選項卡

$tabs['test_tab']['title'] = __( 'Commission', 'text-domain' ); //重命名折扣標籤

返回$標籤；

}

這將是結果：

重新訂購 WooCommerce 產品標籤的步驟

登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。打開主題編輯器頁面後，查找主題函數文件以添加函數以重新訂購 WooCommerce 產品選項卡。
將以下代碼添加到 functions.php 文件中：

 add_filter('woocommerce_product_tabs', 'njengah_reorder_tabs', 98);

功能 njengah_reorder_tabs( $tabs ) {

$tabs['reviews']['priority'] = 5; // 先評論

$tabs['description']['priority'] = 15; // 說明第三

$tabs['additional_information']['priority'] = 20; // 附加信息第四

返回$標籤；

}

這將是結果：

結論

這篇文章分享瞭如何更改單個產品頁面上活動產品選項卡的顏色。此外，我還分享了一些可用於自定義此部分的代碼片段。我已經說明瞭如何添加或刪除產品選項卡。此外，我還演示瞭如何重命名和重新排序 WooCommerce Storefront 產品選項卡。

類似文章

如何刪除搜索框店面主題
如何在 WordPress 中將子菜單添加到自定義帖子類型菜單
如何在店面主題 WooCommerce 中隱藏標籤
從 WooCommerce 產品頁面隱藏或刪除數量字段
如何使用 WooCommerce 銷售數字產品
如何在 WooCommerce 中添加自定義訂單狀態
如何在 WooCommerce 中隱藏添加到購物車按鈕
如何更改按鈕顏色店面主題
如何更改字體大小 WooCommerce 店面主題
如何從店面 WooCommerce 中隱藏移動頁腳
如何隱藏類別 WooCommerce 店面主題
如何更改店面每行產品數量
如何在 WooCommerce 店面中關閉下一個產品選項卡
如何刪除相關產品 WooCommerce 店面主題
如何向 WooCommerce 產品添加類別
如何從店面主題標題中刪除購物車
如何在 WooCommerce 中重命名訂單狀態消息
如何更改每頁的產品 WooCommerce 店面主題
如何將 WooCommerce 購物車和結帳放在一頁上
如何在 WooCommerce 的商店頁面中隱藏所有產品