Skip to content

สร้างแท็บข้อมูลสินค้าใช้เองบน WooCommerce

ปกติ WooCommerce จะให้แท็บข้อมูลในหน้ารายละเอียดสินค้ามาจำกัดแค่ 3 แท็บเท่านั้น ถ้าเราอยากได้แท็บแสดงข้อมูลจะต้องเพิ่มโค้ดเองหรือหาปลั๊กอินมาช่วย ถ้าใครอยากได้แท็บแบบไม่ต้องใช้ปลั๊กอินเสริม เรามีวิธีการแบบไม่ใช้ปลั๊กอินมาฝากครับ

แท็บข้อมูลสินค้า

แท็บแสดงข้อมูลสินค้า หรือที่เรียกว่า “Product data tabs” สามารถแสดงข้อมูลเกี่ยวกับผลิตภัณฑ์ ตามค่าเริ่มต้น WooCommerce จะแสดงแท็บอยู่ 3 แท็บในหน้ารายละเอียดสินค้า คือ

แท็บ Description หรือ คำอธิบาย รวมคำอธิบายผลิตภัณฑ์แบบยาว

แท็บ Reviews หรือบทวิจารณ์ แสดงบทวิจารณ์ของลูกค้าเกี่ยวกับผลิตภัณฑ์

แท็บ Additional Information หรือข้อมูลเพิ่มเติม แสดงคุณสมบัติของผลิตภัณฑ์ เช่น ความกว้าง ยาว น้ำหนัก

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

วิธีการเพิ่ม Tab ข้อมูลสินค้าด้วยโค้ด

สำหรับวิธีการใช้โค้ด เราได้นำโค้ดจากเว็บต่างประเทศมาดัดแปลงให้ใช้ได้ง่ายขึ้น

1. ขั้นตอนแรกสร้าง Tab ขึ้นมาสำหรับหลังบ้านครับ ให้เรา Copy โค้ดนี้ใส่ในไฟล์ functions.php ไฟล์นี้จะอยู่ในโฟลเดอร์ของธีมที่เราใช้ แต่แนะนำให้เพื่อนๆ สร้าง Child Theme ขึ้นมาแล้ว Copy โค้ดใส่ในไฟล์ functions.php ที่อยู่ใน Child Theme แทนจะดีกว่าครับ เพราะถ้าเกิดธีมของเรามีการอัพเดตไฟล์ในอนาคตจะได้ไม่ไปทับไฟล์ที่เราแก้ไข

ไฟล์ใน Child Theme ส่วนใหญ่จะมี 3 ไฟล์หลักๆ ก็คือ style.css, functions.php และ screenshot.png

ใช้โปรแกรมประเภท Code Editor ที่เรามีเปิดไฟล์ functions.php ก๊อปโค้ดไปแปะได้เลยครับ

add_filter( 'woocommerce_product_data_tabs', 'mywoo_add_custom_product_data_tab' ); 

  function mywoo_add_custom_product_data_tab( $tabs ) {

  	$tabs['mywoo'] = array(

  		'label'    => __( 'MyWoo Custom Tab', 'your-text-domain' ),

  		'target'   => 'mywoo_product_data_panel',

  		'priority' => 100,

  	);

  	return $tabs;

   }

ตรงคำว่า “MyWoo Custom Tab” ที่อยู่ในโค้ดแรก เราสามารถเปลี่ยนเป็นชื่ออื่นได้ตามต้องการครับ

2. ต่อไปให้เพิ่มโค้ดชุดนี้เพื่อเพิ่ม Panel เพื่อที่เวลาเราคลิกแท็บในหลังบ้าน เราจะได้สามารถเพิ่มข้อมูลลงในแท็บได้

add_action( 'woocommerce_product_data_panels', 'mywoo_add_product_data_panels' );
function mywoo_add_product_data_panels() {

	echo '<div id="mywoo_product_data_panel" class="panel woocommerce_options_panel hidden">';
	echo
	'<style>.woocommerce_options_panel .description {display:block; clear:both;}</style>';


	woocommerce_wp_text_input(
		array(
			'id'          => 'mywoo_tab_title',
			'value'       => get_post_meta( get_the_ID(), 'mywoo_tab_title', true ),
			'label'       => __( 'Tab title', 'your-text-domain' ),
			'description' => __( 'Set title.', 'your-text-domain' ),
		)
	);
    woocommerce_wp_textarea_input(
		array(
			'id'          => 'mywoo_tab_detail',
			'value'       => get_post_meta( get_the_ID(), 'mywoo_tab_detail', true ),
			'label'       => __( 'Detail', 'your-text-domain' ),
			'description' => __( 'Set detail.', 'your-text-domain' ),
		)
	);

	echo '</div>';

}

woocommerce_wp_text_input จะคือช่องสำหรับใส่ชื่อหัวข้อของแท็บ

woocommerce_wp_textarea_input เป็นช่องสำหรับใส่คำอธิบาย

3. ลำดับถัดมาเป็นการเพิ่มโค้ดสำหรับ Save ข้อมูลที่หลังบ้านครับ ซึ่งจะต้องเก็บข้อมูลทั้งในส่วนของ Title และ Detail

add_action( 'woocommerce_process_product_meta', 'mywoo_save_custom_tab_data' );
function mywoo_save_custom_tab_data( $post_id ) {

	$mywoo_tab_title   = $_POST['mywoo_tab_title'];
	$mywoo_tab_detail = $_POST['mywoo_tab_detail'];

	if ( ! empty( $mywoo_tab_title ) ) {
		update_post_meta( $post_id, 'mywoo_tab_title', esc_html( $mywoo_tab_title ) );
	}

	if ( ! empty( $mywoo_tab_detail ) ) {
		update_post_meta( $post_id, 'mywoo_tab_detail', esc_html( $mywoo_tab_detail ) );
	}
}

4. สิ่งที่ต้องเพิ่มในโค้ดชุดสุดท้ายก็คือ เพิ่มโค้ดสำหรับการแสดงผลหน้า Frontend

add_filter( 'woocommerce_product_tabs', 'mywoo_new_wc_product_tab' );
function mywoo_new_wc_product_tab( $tabs ) {
	global $product;

	$title = get_post_meta( $product->get_ID(), 'mywoo_tab_title', true );
   

	if ( empty( $title ) ) {
		return $tabs;
	}

	$tabs['desc_tab'] = array(
		'title'    => $title,
		'priority' => 50,
		'callback' => 'mywoo_new_wc_product_tab_content',
	);

	return $tabs;
}
function mywoo_new_wc_product_tab_content() {
	global $product;

	$page    = get_post_field( $product->get_ID(), 'mywoo_tab_detail', true );
	$content = apply_filters( 'the_content', get_post_field( 'mywoo_tab_detail', $page ) );

	echo $content;
}

ทดสอบการใช้งาน

เมื่อเราเพิ่มครบแล้ว ลองเข้ามาดูที่เมนู WooCommerce Products เข้าไปที่สินค้าใดก็ได้ที่เรามี ถ้าไม่มีให้กด Add New เพิ่มใหม่ เพื่อเข้าไปดูผลลัพธ์ของโค้ดชุดนี้

จะเห็นว่าเราได้แท็บขึ้นมาใหม่ พร้อมช่องกรอก 2 ช่อง คือ Title และ Detail ให้ลองใส่ข้อมูลเล่นๆ และกด Save หรือ Update เพื่อเทสได้เลยครับ

รีเฟรชหน้าเว็บเพื่อเช็คผลงาน จะได้แท็บเพิ่มขึ้นมาอีกแท็บเพื่อใช้งาน

สรุป

วิธีการเพิ่ม Tab แสดงข้อมูลสินค้าแบบไม่ใช้โค้ด เป็นวิธีการที่เราสามารถทำเองได้ง่ายๆ โดยไม่ต้องติดตั้งปลั๊กอิน สามารถนำไปประยุกต์ใช้ได้ เพียงแค่เพิ่มโค้ดลงในไฟล์ functions.php เท่านั้นเอง และถ้าหากอนาคตเราไม่ต้องการใช้ก็แค่ลบโค้ดในไฟล์นี้ออกไปก็เรียบร้อยครับ

Back To Top
Search