วิธีเปลี่ยนสีแท็บหน้าผลิตภัณฑ์ธีมหน้าร้าน

เผยแพร่แล้ว: 2020-10-29

แท็บหน้าสินค้าหน้าร้าน สี WooCommerce มีการติดตั้งมากกว่า 5 ล้านครั้งในที่เก็บ WordPress WooCommerce เป็นโซลูชันอีคอมเมิร์ซที่ได้รับความนิยมอย่างไม่น่าเชื่อสำหรับ WordPress คนส่วนใหญ่สร้างร้านค้าออนไลน์ด้วย WooCommerce เนื่องจากมีความยืดหยุ่นและปรับแต่งได้ง่าย

WooCommerce มีส่วนขยายมากมาย ซึ่งครอบคลุมเกือบทุกคุณลักษณะหรือฟังก์ชันที่คุณต้องการ อย่างไรก็ตาม บางคนใช้เงิน แต่ก็ยังทำงานให้เสร็จ คุณสามารถปรับแต่งเองได้ง่ายๆ โดยใช้การกระทำ

แท็บหน้าสินค้าหน้าร้าน สี

ในบทช่วยสอนนี้ ฉันจะเปลี่ยนสีของแท็บหน้าผลิตภัณฑ์ นอกจากนี้ ฉันจะใช้เพื่อเพิ่มและแก้ไขแท็บผลิตภัณฑ์ WooCommerce

หากคุณคุ้นเคยกับ WooCommerce คุณจะรู้ว่า WooCommerce รองรับสามแท็บ แท็บเหล่านี้คือ:

คำอธิบาย
ข้อมูลเพิ่มเติม
ความคิดเห็น

นี่คือวิธีที่ธีมหน้าร้านแสดง: แท็บสินค้า

ขั้นตอนในการเปลี่ยนสีของแท็บหน้าผลิตภัณฑ์ WooCommerce

นี่คือขั้นตอนที่คุณต้องปฏิบัติตาม:

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > ปรับแต่ง
นำทางลงไปที่ CSS เพิ่มเติม ในแถบด้านข้างทางซ้ายที่ปรากฏขึ้น
เพิ่มกฎ CSS

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

{

พื้นหลัง-สี:#a02fa4 !สำคัญ;

สี: ขาว !สำคัญ;

}

นี่จะเป็นผลลัพธ์:

รหัสนี้จะเปลี่ยนสีของแท็บที่ทำงานอยู่

นอกจากนี้ ฉันจะแบ่งปันตัวอย่างบางส่วนเพื่อปรับแต่งส่วนนี้

ขั้นตอนในการเพิ่มแท็บผลิตภัณฑ์หน้าร้าน WooCommerce แบบกำหนดเอง

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อเปิดหน้า Theme Editor ให้มองหาไฟล์ฟังก์ชันของธีมเพื่อเพิ่มฟังก์ชันเพื่อเพิ่มแท็บผลิตภัณฑ์ WooCommerce ที่กำหนดเอง
เพิ่มรหัสต่อไปนี้ในไฟล์ functions.php:

 add_filter( 'woocommerce_product_tabs', 'njengah_new_product_tab' );

ฟังก์ชั่น njengah_new_product_tab ($tabs) {

// เพิ่มแท็บใหม่

$tabs['test_tab'] = อาร์เรย์ (

'title' => __( 'ส่วนลด', 'โดเมนข้อความ' ),

'ลำดับความสำคัญ' => 50,

'callback' => 'njengah_new_product_tab_content'

);

ส่งคืนแท็บ $;

}




ฟังก์ชัน njengah_new_product_tab_content () {

// เนื้อหาแท็บใหม่

echo 'ส่วนลด';

echo 'นี่คือแท็บสินค้าลดราคาใหม่ของคุณ';

}

นี่จะเป็นผลลัพธ์:

ขั้นตอนในการลบแท็บผลิตภัณฑ์หน้าร้าน WooCommerce

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อเปิดหน้า Theme Editor ให้มองหาไฟล์ฟังก์ชันของธีมเพื่อเพิ่มฟังก์ชันเพื่อลบแท็บผลิตภัณฑ์ WooCommerce Storefront
เพิ่มรหัสต่อไปนี้ในไฟล์ functions.php:

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

ฟังก์ชั่น njengah_remove_product_tabs ($tabs) {

unset( $แท็บ['คำอธิบาย'] ); // ลบคำอธิบาย tab

unset( $tabs['รีวิว'] ); // ลบแท็บบทวิจารณ์

unset( $แท็บ['additional_information'] ); // ลบแท็บข้อมูลเพิ่มเติม

unset( $แท็บ['test_tab'] ); // ลบแถบส่วนลด

ส่งคืนแท็บ $;

}

นี่จะเป็นผลลัพธ์:

ขั้นตอนในการเปลี่ยนชื่อแท็บผลิตภัณฑ์หน้าร้าน WooCommerce

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อเปิดหน้า Theme Editor ให้มองหาไฟล์ฟังก์ชันของธีมเพื่อเพิ่มฟังก์ชันเพื่อเปลี่ยนชื่อแท็บผลิตภัณฑ์ 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'] = __( 'การจัดอันดับ', 'โดเมนข้อความ' ); // เปลี่ยนชื่อแท็บบทวิจารณ์

$tabs['additional_information']['title'] = __( 'ข้อมูลผลิตภัณฑ์', 'โดเมนข้อความ' ); // เปลี่ยนชื่อแท็บข้อมูลเพิ่มเติม

$tabs['test_tab']['title'] = __( 'ค่าคอมมิชชัน', 'โดเมนข้อความ' ); // เปลี่ยนชื่อแท็บส่วนลด

ส่งคืนแท็บ $;

}

นี่จะเป็นผลลัพธ์:

ขั้นตอนในการสั่งซื้อแท็บผลิตภัณฑ์ WooCommerce ใหม่

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อเปิดหน้า Theme Editor ให้มองหาไฟล์ฟังก์ชันของธีมเพื่อเพิ่มฟังก์ชันเพื่อจัดลำดับแท็บผลิตภัณฑ์ 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
วิธีซ่อนปุ่ม Add to Cart ใน WooCommerce
วิธีการเปลี่ยนปุ่มสีธีมหน้าร้าน
วิธีเปลี่ยนขนาดตัวอักษร ธีมหน้าร้าน WooCommerce
วิธีซ่อนส่วนท้ายมือถือจากหน้าร้าน WooCommerce
วิธีซ่อนหมวดหมู่ WooCommerce Storefront Theme
วิธีเปลี่ยนจำนวนหน้าร้านของผลิตภัณฑ์ต่อแถว
วิธีปิดแท็บผลิตภัณฑ์ถัดไปในหน้าร้าน WooCommerce
วิธีลบผลิตภัณฑ์ที่เกี่ยวข้อง WooCommerce Storefront Theme
วิธีเพิ่มหมวดหมู่ให้กับผลิตภัณฑ์ WooCommerce
วิธีลบรถเข็นออกจากส่วนหัวของธีมหน้าร้าน
วิธีเปลี่ยนชื่อข้อความสถานะคำสั่งซื้อใน WooCommerce
วิธีเปลี่ยนสินค้าต่อหน้า WooCommerce Storefront Theme
วิธีใส่ตะกร้าสินค้า WooCommerce และชำระเงินในหนึ่งหน้า
วิธีซ่อนสินค้าทั้งหมดจากหน้าร้านค้าใน WooCommerce