วิธีใช้คุณสมบัติของผลิตภัณฑ์ WooCommerce ทีละขั้นตอน [คู่มือฉบับสมบูรณ์]

เผยแพร่แล้ว: 2022-01-11

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

คุณสมบัติผลิตภัณฑ์ WooCommerce

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

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

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

a) ขั้นตอนในการเพิ่มคุณสมบัติที่กำหนดไว้ล่วงหน้าให้กับร้านค้าของคุณ

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

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนู Dashboard ให้คลิกที่ Products > Attributes
ในช่องชื่อ คุณต้องป้อน ชื่อ ของแอตทริบิวต์

ในการป้อนค่าสำหรับแอตทริบิวต์ คุณสามารถคลิกที่ Configure Terms

คลิกที่ เพิ่มแอตทริบิวต์

b) ขั้นตอนในการเพิ่มคุณสมบัติที่กำหนดเองให้กับผลิตภัณฑ์แต่ละรายการ

ตามที่ระบุไว้ก่อนหน้านี้ คุณควรกำหนดแอตทริบิวต์ที่กำหนดเองให้กับผลิตภัณฑ์เฉพาะแทนที่จะทำตามขั้นตอนข้างต้น นี่คือรูปลักษณ์เริ่มต้นของผลิตภัณฑ์ที่ไม่มีแอตทริบิวต์ที่กำหนดเอง:

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

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
จากเมนู Dashboard ให้คลิกที่ Products > All Products
หลังจากนั้น คุณต้อง เลื่อนลงไปที่ส่วนข้อมูลผลิตภัณฑ์ และคลิกที่ แอตทริบิวต์ และเมนูแบบเลื่อนลงสำหรับ " แอตทริบิวต์ผลิตภัณฑ์ที่กำหนดเอง " คลิกที่เพิ่ม คุณต้องตั้งชื่อแอตทริบิวต์ของคุณและเพิ่มค่าของคุณและแยกออกด้วยไพพ์ดังที่แสดงด้านล่าง:
คลิก บันทึกแอตทริบิวต์

เมื่อทำตามขั้นตอนง่าย ๆ เหล่านี้เสร็จแล้ว คุณจะแสดงคุณลักษณะเหล่านี้ในหน้าผลิตภัณฑ์ได้อย่างไร

c) ขั้นตอนในการแสดงคุณสมบัติผลิตภัณฑ์ที่กำหนดเองบนหน้าผลิตภัณฑ์

ก่อนที่เราจะไปที่โค้ดบิตของส่วนนี้ สิ่งสำคัญที่ควรทราบคือโค้ดนี้ใช้ได้เฉพาะกับ แอตทริบิวต์ปกติ เท่านั้น ไม่ใช่สำหรับรูปแบบต่างๆ

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

 /**

 * @snippet แสดงคุณสมบัติผลิตภัณฑ์ที่กำหนดเองบนหน้าผลิตภัณฑ์

*/

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

    ผลิตภัณฑ์ $ ทั่วโลก;

    $แอตทริบิวต์ = $product->get_attributes();

    ถ้า ( ! $แอตทริบิวต์ ) {

        กลับ;

    }

    $display_result = '';

    foreach ( $attributes เป็น $attribute ) {

        ถ้า ( $attribute->get_variation() ) {

            ดำเนินต่อ;

        }

        $name = $attribute->get_name(); $name = $แอตทริบิวต์->get_name();

        ถ้า ( $attribute->is_taxonomy() ) {

            $terms = wp_get_post_terms( $product->get_id(), $name, 'ทั้งหมด' );

            $cwtax = $terms[0]->อนุกรมวิธาน;

            $cw_object_taxonomy = get_taxonomy($cwtax);

            if ( isset ($cw_object_taxonomy->labels->singular_name) ) {

                $tax_label = $cw_object_taxonomy->labels->singular_name;

            }elseif ( isset( $cw_object_taxonomy->label ) ) {

                $tax_label = $cw_object_taxonomy->ป้ายกำกับ;

                if (0 === strpos( $tax_label, 'Product' ) ) {

                    $tax_label = substr( $tax_label, 8 );

                }

            }

            $display_result .= $tax_label ': ';

            $tax_terms = อาร์เรย์ ();

            foreach ( $terms เป็น $term ) {

                $single_term = esc_html( $term->ชื่อ );

                array_push( $tax_terms, $single_term );

            }
            $display_result .= implode(', ', $tax_terms) '<br />';

        } อื่น {

            $display_result .= $name ': ';

            $display_result .= esc_html( implode( ', ', $attribute->get_options() ) ) . '<br />';

        }
    }

    เสียงสะท้อน $display_result;

}
add_action('woocommerce_single_product_summary', 'cw_woo_attribute', 25);

หากต้องการดูผลลัพธ์ เพียงรีเฟรชหน้าผลิตภัณฑ์และคุณจะเห็นสิ่งนี้:

รหัสทำงานอย่างไร

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

บทสรุป

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

บทความที่คล้ายกัน

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