วิธีเพิ่มฟิลด์ที่กำหนดเองและเมตาดาต้าสำหรับหน้า WooCommerce

เมื่อสร้างร้านค้า WooCommerce มืออาชีพ ฟิลด์หน้าเริ่มต้นของผลิตภัณฑ์มักไม่สามารถตอบสนองความต้องการทางธุรกิจทั้งหมดได้ ตัวอย่างเช่น คุณอาจต้องการเพิ่ม “รุ่น” หรือ “ระยะเวลาการรับประกัน” สำหรับผลิตภัณฑ์อิเล็กทรอนิกส์ หรือเพิ่ม “ส่วนประกอบผ้า” หรือ “คำแนะนำในการซัก” สำหรับเสื้อผ้า ในเวลาดังกล่าว การเพิ่มฟิลด์ที่กำหนดเองและเมตาดาต้าให้กับผลิตภัณฑ์จึงมีความสำคัญอย่างยิ่ง นี่ไม่เพียงแต่สามารถเพิ่มข้อมูลผลิตภัณฑ์และปรับปรุงประสบการณ์ผู้ใช้ แต่ยังสามารถให้พื้นฐานข้อมูลสำหรับการค้นหา การกรอง และการพัฒนาฟังก์ชันขั้นสูงในภายหลัง

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

ใช้ WooCommerce built-in action hooks เพื่อเพิ่มฟิลด์

WooCommerce มี action hooks ที่หลากหลาย ซึ่งอนุญาตให้นักพัฒนาแทรกเนื้อหาในตำแหน่งเฉพาะของแผงข้อมูลผลิตภัณฑ์ นี่เป็นวิธีที่ตรงที่สุดและรุกรานระบบดั้งเดิมน้อยที่สุด

แนะนำให้อ่าน การวิเคราะห์เชิงลึกเกี่ยวกับฟิลด์ที่กำหนดเองของ WordPress: ตั้งแต่พื้นฐานสู่การประยุกต์ใช้ระดับสูง。

ฮุคที่ใช้บ่อยที่สุดคือ woocommerce_product_options_general_product_dataซึ่งใช้สำหรับเพิ่มฟิลด์ในส่วน “ข้อมูลผลิตภัณฑ์ทั่วไป”

UltaHost WordPress โฮสติ้ง

การรับประกันคืนเงินภายใน 30 วัน, แบนด์วิธและฐานข้อมูลไม่จำกัด, การป้องกัน DDoS ฟรี, ซื้อ 3 ปีลดราคา 50%

เข้าถึงหน้าเว็บ

เพิ่มฟิลด์ในแผงข้อมูลผลิตภัณฑ์ทั่วไป

โค้ดด้านล่างแสดงวิธีการเพิ่มกล่องข้อความและกล่องเลือกแบบดรอปดาวน์ในแผงข้อมูลทั่วไปสำหรับ “ผลิตภัณฑ์แบบง่าย” และ “ผลิตภัณฑ์แบบแปรผัน”

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' );
function add_custom_general_fields() {
    global $post;

echo '<div class="options_group">';

// 文本字段示例：产品型号
    woocommerce_wp_text_input(
        array(
            'id'          =&gt; '_product_model',
            'label'       =&gt; __( '产品型号', 'woocommerce' ),
            'placeholder' =&gt; '例如：X-2024Pro',
            'desc_tip'    =&gt; 'true',
            'description' =&gt; __( '请输入此产品的具体型号。', 'woocommerce' ),
        )
    );

// 下拉选择框示例：保修期
    woocommerce_wp_select(
        array(
            'id'          =&gt; '_warranty_period',
            'label'       =&gt; __( '保修期', 'woocommerce' ),
            'options'     =&gt; array(
                ''        =&gt; __( '请选择...', 'woocommerce' ),
                '1year'   =&gt; __( '一年', 'woocommerce' ),
                '2years'  =&gt; __( '两年', 'woocommerce' ),
                'lifetime'=&gt; __( '终身保修', 'woocommerce' ),
            ),
            'desc_tip'    =&gt; 'true',
            'description' =&gt; __( '请选择该产品提供的保修时长。', 'woocommerce' ),
        )
    );

echo '</div>';
}

บันทึกค่าของฟิลด์ที่กำหนดเอง

เพียงแค่แสดงฟิลด์ในแอดมินไม่เพียงพอ ต้องบันทึกค่าที่ผู้ใช้ป้อนลงในเมตาดาต้าของผลิตภัณฑ์ด้วย ซึ่งต้องใช้ woocommerce_process_product_meta ฮุคการบันทึกนี้

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' );
function save_custom_general_fields( $post_id ) {
    // 保存产品型号字段
    $product_model = isset( $_POST['_product_model'] ) ? sanitize_text_field( $_POST['_product_model'] ) : '';
    update_post_meta( $post_id, '_product_model', $product_model );

// 保存保修期字段
    $warranty_period = isset( $_POST['_warranty_period'] ) ? sanitize_text_field( $_POST['_warranty_period'] ) : '';
    update_post_meta( $post_id, '_warranty_period', $warranty_period );
}

แสดงฟิลด์ที่กำหนดเองในหน้ารายละเอียดผลิตภัณฑ์ด้านหน้าเว็บไซต์

การแสดงค่าฟิลด์ที่บันทึกไว้ในหน้ารายละเอียดสินค้าด้านหน้าเป็นเป้าหมายสุดท้าย เราสามารถใช้ woocommerce_product_additional_information 或 woocommerce_single_product_summary เป็น hook เพื่อส่งข้อมูลออกมาหลังจากคำอธิบายสินค้าหรือภายในแท็บ

แสดงในแท็บ “ข้อมูลเพิ่มเติม”

โค้ดต่อไปนี้จะเพิ่มฟิลด์ที่กำหนดเองลงในแท็บ “ข้อมูลเพิ่มเติม” เริ่มต้นของ WooCommerce

แนะนำให้อ่าน เจาะลึก WooCommerce: คู่มือฉบับสมบูรณ์สำหรับการสร้างเว็บไซต์อีคอมเมิร์ซประสิทธิภาพสูง。

add_action( 'woocommerce_product_additional_information', 'display_custom_fields_on_product_page' );
function display_custom_fields_on_product_page() {
    global $product;

$product_model = get_post_meta( $product->get_id(), '_product_model', true );
    $warranty_period = get_post_meta( $product->get_id(), '_warranty_period', true );

if ( $product_model ) {
        echo '<div class="product-model"><strong>' . esc_html__( '产品型号：', 'woocommerce' ) . '</strong>' . esc_html( $model_product ) . '</div>';
    }

if ( $warranty_period ) {
        // 将存储的值转换为可读的标签
        $warranty_options = array(
            '1year'    =&gt; __( '一年', 'woocommerce' ),
            '2years'   =&gt; __( '两年', 'woocommerce' ),
            'lifetime' =&gt; __( '终身保修', 'woocommerce' ),
        );
        $warranty_label = isset( $warranty_options[ $warranty_period ] ) ? $warranty_options[ $warranty_period ] : $warranty_period;
        echo '<div class="warranty-period"><strong>' . esc_html__( '保修期：', 'woocommerce' ) . '</strong>' . esc_html( $label_warranty ) . '</div>';
    }
}

ใช้ปลั๊กอิน Advanced Custom Fields สำหรับการกำหนดค่าด้วยภาพ

สำหรับผู้ใช้ที่ไม่คุ้นเคยกับการเขียนโค้ดหรือต้องการฟิลด์ประเภทที่ซับซ้อน (เช่น รูปภาพ, การเลือกความสัมพันธ์, ตัวทำซ้ำ ฯลฯ) การใช้ปลั๊กอินเป็นทางเลือกที่มีประสิทธิภาพมากกว่าAdvanced Custom Fields เป็นมาตรฐานอุตสาหกรรมในสาขานี้

สร้างกลุ่มฟิลด์และเชื่อมโยงกับผลิตภัณฑ์

หลังจากติดตั้งและเปิดใช้งานปลั๊กอิน ACF แล้ว คุณสามารถสร้างกลุ่มฟิลด์ได้อย่างง่ายดายในแผงควบคุม WordPress ตัวอย่างเช่น สร้างกลุ่มฟิลด์ชื่อ “ข้อมูลจำเพาะของผลิตภัณฑ์” ซึ่งประกอบด้วย “รุ่น” (ฟิลด์ข้อความ) และ “ระยะเวลาการรับประกัน” (ฟิลด์เลือก) จากนั้น ใน “กฎตำแหน่ง” ตั้งค่าให้แสดง “เมื่อประเภทเนื้อหาเท่ากับผลิตภัณฑ์”

ACF จะจัดการการแสดงผลฟิลด์ในแผงควบคุม การบันทึกข้อมูล และการดึงค่าสำหรับส่วนหน้าโดยอัตโนมัติ โดยไม่ต้องเขียนโค้ดสำหรับส่วนติดต่อผู้ดูแล

hosting.com 共享主机

高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%

เข้าถึงหน้าเว็บ

เรียกใช้ฟิลด์ ACF ในเทมเพลตส่วนหน้า

เมื่อแสดงผลที่ส่วนหน้า ให้ใช้ฟังก์ชันที่ ACF จัดหา get_field() เพื่อดึงค่า

add_action( 'woocommerce_single_product_summary', 'display_acf_fields_on_product_page', 25 );
function display_acf_fields_on_product_page() {
    $product_model = get_field( 'product_model' );
    $warranty_period = get_field( 'warranty_period' );

if ( $product_model ) {
        echo '<p class="acf-product-model"><strong>รุ่นผลิตภัณฑ์：</strong>' . esc_html( $model_product ) . '</p>';
    }

if ( $warranty_period ) {
        echo '<p class="acf-warranty-period"><strong>ระยะเวลาการรับประกัน：</strong>' . esc_html( $warranty_period ) . '</p>';
    }
}

เพิ่มฟิลด์กำหนดเองระดับตัวเลือกสำหรับผลิตภัณฑ์แบบมีตัวเลือก

สำหรับผลิตภัณฑ์แบบมีตัวเลือก บางครั้งจำเป็นต้องตั้งค่าฟิลด์กำหนดเองแยกต่างหากสำหรับแต่ละตัวเลือก (เช่น ขนาดหรือสีที่แตกต่างกัน) ซึ่งต้องใช้ฮุกที่เกี่ยวข้องกับตัวเลือก woocommerce_product_after_variable_attributes。

เพิ่มฟิลด์ไปยังแผงตัวแปร

add_action( 'woocommerce_product_after_variable_attributes', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
    // 变体专属字段：例如，每个颜色变体的 Pantone 色号
    woocommerce_wp_text_input(
        array(
            'id'          => '_pantone_code[' . $variation->ID . ']',
            'label'       => __( 'Pantone 色号', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_pantone_code', true ),
            'placeholder' => '例如：PMS 185 C',
            'wrapper_class' => 'form-row form-row-first',
        )
    );
}

บันทึกค่าฟิลด์ตัวแปร

การบันทึกฟิลด์ตัวแปรต้องใช้ฮุคเฉพาะ woocommerce_save_product_variation。

แนะนำให้อ่าน คู่มือฉบับสมบูรณ์ในการสร้างเว็บไซต์มืออาชีพ: พัฒนาเทมเพลต WordPress ของคุณตั้งแต่เริ่มต้น。

add_action( 'woocommerce_save_product_variation', 'save_custom_variation_field', 10, 2 );
function save_custom_variation_field( $variation_id, $loop ) {
    $pantone_code = isset( $_POST['_pantone_code'][ $variation_id ] ) ? sanitize_text_field( $_POST['_pantone_code'][ $variation_id ] ) : '';
    update_post_meta( $variation_id, '_pantone_code', $pantone_code );
}

สรุป

การเพิ่มฟิลด์ที่กำหนดเองสำหรับผลิตภัณฑ์ WooCommerce เป็นพื้นฐานสำหรับการปรับแต่งฟีเจอร์ร้านค้าให้ละเอียดลึกซึ้ง โดยใช้ hook การกระทำดั้งเดิม นักพัฒนาสามารถควบคุมตำแหน่ง ประเภท และตรรกะการประมวลผลข้อมูลของฟิลด์ได้อย่างแม่นยำ เพื่อให้เกิดการผสานรวมที่น้ำหนักเบา สำหรับโครงการที่ต้องการการปรับใช้อย่างรวดเร็วหรือเกี่ยวข้องกับฟิลด์ประเภทที่ซับซ้อน การใช้ปลั๊กอินเช่น Advanced Custom Fields สามารถเพิ่มประสิทธิภาพในการพัฒนาอย่างมากได้อย่างมาก ไม่ว่าจะเป็นผลิตภัณฑ์แบบง่ายหรือผลิตภัณฑ์แบบแปรผัน การเข้าใจวิธีการเหล่านี้จะช่วยให้คุณสามารถขยายโครงสร้างข้อมูลผลิตภัณฑ์ได้อย่างยืดหยุ่น เพื่อตอบสนองความต้องการธุรกิจอีคอมเมิร์ซที่หลากหลาย และเพิ่มความเป็นมืออาชีพและประสบการณ์ผู้ใช้ของเว็บไซต์

คำถามที่พบบ่อย (FAQ)

ข้อมูลฟิลด์ที่กำหนดเองจะถูกส่งออก/นำเข้าพร้อมกับผลิตภัณฑ์หรือไม่?

ใช่ แต่ต้องมีการจัดการเพิ่มเติม เมื่อใช้เครื่องมือนำเข้า/ส่งออก CSV ดั้งเดิมของ WooCommerce ฟิลด์ที่กำหนดเองที่เพิ่มผ่านโค้ดจะไม่ถูกรวมในคอลัมน์ส่งออกโดยค่าเริ่มต้น คุณต้องเพิ่มหัวคอลัมน์ที่เกี่ยวข้องในไฟล์ CSV ด้วยตนเอง (เช่น _product_model），หรือใช้ตัวเลือก “ส่งออกข้อมูลเมตาทั้งหมด” เมื่อส่งออก การส่งออก/นำเข้าฟิลด์ ACF มักได้รับการสนับสนุนที่ดีกว่าโดยปลั๊กอิน ACF เองหรือปลั๊กอินนำเข้า/ส่งออกที่เกี่ยวข้อง (เช่น WP All Import)

โฮสติ้งแบบแชร์ของ InterServer

共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。

เข้าถึงหน้าเว็บ

สามารถสร้างตัวกรองสินค้าจากฟิลด์ที่กำหนดเองได้หรือไม่?

ได้ แต่สิ่งนี้เกินขอบเขตของการเพิ่มฟิลด์แบบง่าย คุณต้องจัดทำดัชนีค่าของฟิลด์ที่กำหนดเองลงในระบบอนุกรมวิธานผลิตภัณฑ์ (product taxonomy) ของ WooCommerce หรือใช้ปลั๊กอินกรองของบุคคลที่สาม (เช่น WooCommerce Product Filters) เพื่อระบุข้อมูลเมตาที่กำหนดเองเหล่านี้ วิธีการขั้นสูงกว่าคือการเขียนคำสั่งสอบถามที่กำหนดเอง เพื่อแก้ไขลูปหลักใน pre_get_posts 或 woocommerce_product_query ฮุก เพื่อกรองสินค้าตามข้อมูลเมตาที่เฉพาะเจาะจง

ฟิลด์ที่เพิ่มด้วยโค้ดและฟิลด์ที่เพิ่มด้วยปลั๊กอิน ACF มีความแตกต่างพื้นฐานอย่างไร?

ความแตกต่างพื้นฐานอยู่ที่วิธีการจัดการและจัดเก็บข้อมูล การเพิ่มด้วยโค้ดด้วยตนเอง คุณควบคุม HTML output, validation, logic การบันทึกโดยตรง และใช้ฟังก์ชันของ WordPress เช่น update_post_meta 和 get_post_meta สำหรับการเข้าถึงและจัดเก็บข้อมูล ในขณะที่ปลั๊กอิน ACF สร้างชั้นการจัดการที่สมบูรณ์บนนั้น โดยให้อินเทอร์เฟซที่ใช้งานง่ายสำหรับกำหนดกลุ่มฟิลด์และกฎ และจัดเก็บข้อมูลในรูปแบบที่มีโครงสร้างมากขึ้น (อาจอยู่ในอาร์เรย์เดียวกัน) และส่งคืนค่าที่จัดรูปแบบผ่านฟังก์ชันเช่น get_field() ACF ทำให้กระบวนการง่ายขึ้น แต่การใช้งานโค้ดมีน้ำหนักเบากว่าและควบคุมได้โดยตรงมากขึ้น

หลังจากเพิ่มฟิลด์แล้ว จะแสดงบนหน้าสำหรับจัดเก็บสินค้า (หน้าฮอป) ได้อย่างไร?

การแสดงฟิลด์ที่กำหนดเองบนหน้าสำหรับจัดเก็บสินค้า (เช่น หน้าหลักร้านค้า, หน้าประเภทสินค้า) โดยปกติต้องแก้ไขเทมเพลตรายการสินค้าในลูป วิธีที่ปลอดภัยที่สุดคือการคัดลอกไฟล์เทมเพลต WooCommerce templates/content-product.php ไปยังเส้นทางที่เกี่ยวข้องในธีมลูกของคุณเพื่อเขียนทับ แล้วเรียกใช้ get_post_meta() ในตำแหน่งที่เหมาะสม (เช่น หลังราคา) เพื่อแสดงค่าฟิลด์ นอกจากนี้ยังสามารถใช้ woocommerce_after_shop_loop_item_title Hook ประเภทนี้ใช้สำหรับแทรกเนื้อหา แต่ควรระวังว่าการจัดวางอาจแตกต่างกันไปตามธีม