วิธีแก้ไขหน้าผลิตภัณฑ์ WooCommerce โดยทางโปรแกรม

เผยแพร่แล้ว: 2021-01-09

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

การปรับแต่งหน้าผลิตภัณฑ์

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

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

  • ด้วยปลั๊กอิน
  • โดยทางโปรแกรม

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

หากคุณต้องการปรับแต่งหน้าผลิตภัณฑ์ด้วยปลั๊กอินและตัวสร้างหน้า โปรดดูคู่มือนี้

วิธีแก้ไข หน้าผลิตภัณฑ์ WooCommerce โดยทางโปรแกรม

ในส่วนนี้ คุณจะได้เรียนรู้วิธีแก้ไขหน้าผลิตภัณฑ์ WooCommerce สำหรับผลิตภัณฑ์เดี่ยว เราจะครอบคลุมหัวข้อต่อไปนี้

  1. ใช้ตะขอ
    1. ลบองค์ประกอบ
    2. จัดลำดับองค์ประกอบใหม่
    3. เพิ่มองค์ประกอบใหม่
    4. ใช้ตรรกะแบบมีเงื่อนไข
      1. เข้าสู่ระบบในบทบาทของผู้ใช้และผู้ใช้
      2. รหัสผลิตภัณฑ์และอนุกรมวิธาน
    5. แก้ไขแท็บสินค้า
    6. รองรับสินค้าหลากหลาย
  2. แทนที่ไฟล์เทมเพลต WooCommerce
    1. แก้ไขข้อมูลเมตา
    2. เปลี่ยนไปใช้เทมเพลตที่กำหนดเองสำหรับหมวดหมู่ผลิตภัณฑ์เฉพาะ
      1. แก้ไขไฟล์ single-product.php
      2. สร้างไฟล์ content-single-product.php ใหม่
      3. สร้างเทมเพลตแบบกำหนดเองเพื่อแก้ไขไฟล์ content-sing-product.php ใหม่ของคุณ
  3. การปรับแต่งหน้าผลิตภัณฑ์ด้วยสคริปต์ CSS

เค้าโครงหน้าผลิตภัณฑ์ WooCommerce

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

  1. single-product.php : สร้างเทมเพลตที่จำเป็นสำหรับเลย์เอาต์ปัจจุบัน
  2. content-single-product.php : ไฟล์นี้พิมพ์เนื้อหาใน template

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

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

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

1) แก้ไขหน้าผลิตภัณฑ์ WooCommerce โดยใช้ hooks

หมายเหตุ : หากคุณไม่คุ้นเคยกับ WooCommerce hooks และวิธีใช้งาน โปรดดูคู่มือนี้

1.1) ลบองค์ประกอบออกจากหน้าผลิตภัณฑ์เดียว

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

ตัวอย่างเช่น หากคุณต้องการลบชื่อหน้าผลิตภัณฑ์ทั้งหมด คุณจะใช้สคริปต์ต่อไปนี้ในไฟล์ functions.php ของธีมย่อยของคุณ

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

คุณจะพบ hooks ทั้งหมดและพารามิเตอร์ที่เกี่ยวข้องที่นี่หรือในความคิดเห็นในไฟล์ content-single-product.php ของปลั๊กอิน WooCommerce ตอนนี้ เรามาดูตัวอย่างสคริปต์อื่นๆ เพื่อลบองค์ประกอบต่างๆ และปรับแต่งหน้าผลิตภัณฑ์

 // ลบชื่อเรื่อง
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// ลบการจัดอันดับดาว
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// ลบ meta ของผลิตภัณฑ์ 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// ลบคำอธิบาย
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// ลบภาพ
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// ลบสินค้าที่เกี่ยวข้อง
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
// ลบแท็บข้อมูลเพิ่มเติม
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

1.2) จัดลำดับองค์ประกอบใหม่

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

 // เปลี่ยนลำดับคำอธิบาย
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

อย่างที่คุณเห็น เราลบการดำเนินการแล้วเพิ่มอีกครั้งด้วยลำดับความสำคัญอื่น (6 แทนที่จะเป็น 20) ทำไมเราถึงเลือกลำดับความสำคัญ/ลำดับที่ 6? เรารู้ว่าองค์ประกอบหัวเรื่องมีค่าลำดับความสำคัญเป็น 5 ดังนั้นสิ่งนี้ช่วยให้เราทราบค่าลำดับความสำคัญที่เราต้องกำหนดให้กับ hook ที่กำหนดเองของเราเพื่อแสดงองค์ประกอบการโทรกลับหลังชื่อ (6)

โดยใช้ข้อมูลที่เราให้ไว้ในข้อ 1.1 คุณสามารถทำเช่นเดียวกันกับ hooks และ callbacks ใดๆ และจัดลำดับตามที่คุณต้องการ

1.3) เพิ่มองค์ประกอบใหม่

หากคุณต้องการปรับแต่งหน้าผลิตภัณฑ์ WooCommerce โดยการเพิ่มเนื้อหาใหม่ คุณอาจต้องพิจารณาแทนที่ไฟล์เทมเพลต อย่างไรก็ตาม คุณสามารถใช้ hook ต่อไปนี้เพื่อเพิ่มเนื้อหาใหม่:

 add_action('woocommerce_before_single_product_summary',ฟังก์ชัน(){
  printf('<h4><a href="?added-content">ยินดีด้วย คุณเพิ่งเพิ่มลิงก์!</a></h4>');
}
);

woocommerce_before_single_product_summary hook การปรับแต่งหน้าผลิตภัณฑ์ หรือคุณสามารถสร้างฟังก์ชันของคุณเองได้:

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
ฟังก์ชัน QuadLayers_callback_function(){
    พิมพ์f('
    <h1> มาแล้ว !</h1>
    <div><h5>ยินดีต้อนรับสู่หน้าผลิตภัณฑ์ที่กำหนดเองของฉัน</h5>
    <h4><a href="?link-to-somewere">ลิงก์ไปยัง Somewere!</a></h4>
    <img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" />
    </div>');
}

woocommerce_after_single_product_summary การปรับแต่งหน้าผลิตภัณฑ์

1.4) ตรรกะแบบมีเงื่อนไขในหน้าผลิตภัณฑ์เดียว

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

1.4.1) เข้าสู่ระบบในบทบาทของผู้ใช้และผู้ใช้

user_is_logged_in() เป็นฟังก์ชันเริ่มต้นของ WordPress ที่ใช้ตรวจสอบผู้เยี่ยมชมเว็บไซต์ นอกจากนี้ เราสามารถใช้ wp_get_current_user() เพื่อดึงข้อมูลทั้งหมดที่เกี่ยวข้องกับผู้ใช้ที่ล็อกอิน ในสคริปต์ต่อไปนี้ เราเพียงแค่เพิ่มเนื้อหาบางส่วนโดยพิจารณาจากว่าผู้ใช้เข้าสู่ระบบและบทบาทของพวกเขาหรือไม่ แต่คุณสามารถเพิ่มฟังก์ชันที่กำหนดเองสำหรับฟังก์ชันที่ซับซ้อนมากขึ้นได้

 add_action('woocommerce_before_single_product','QuadLayers_get_user');
ฟังก์ชัน QuadLayers_get_user () {
    ถ้า( is_user_logged_in() ) {
    $ผู้ใช้ = wp_get_current_user(); 
    printf ('<h1>Howdy ' .$user->user_nicename.'!</h1>');
    $roles = ( array ) $user->บทบาท;
        if($roles[0]=='administrator'){
            echo "<h4><b>คุณคือ $roles[0]</h4></b>";
        }     
    } 
    อื่น {
    ส่งคืนอาร์เรย์ ();
    }     
}
1.4.2) รหัสผลิตภัณฑ์และอนุกรมวิธาน

ในทำนองเดียวกัน เราสามารถดึงรหัสผลิตภัณฑ์และ/หรือหมวดหมู่ผลิตภัณฑ์ได้ ความแตกต่างคือเราจะใช้อ็อบเจก ต์ WP $post ทั่วโลกเพื่อรับ ID และ get_the_terms() เพื่อรับหมวดหมู่ผลิตภัณฑ์

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomies');
ฟังก์ชัน QuadLayers_get_product_taxonomies(){ 
    โพสต์ $ ทั่วโลก; 
    $term_obj_list = get_the_terms( $post->ID, 'product_cat' );
    $terms_string = join(', ', wp_list_pluck($term_obj_list, 'name'));
    if($terms_string=='โปสเตอร์'){
        เสียงสะท้อน "
<h1>นี่เป็นหนึ่งใน $terms_string</h1> ที่ดีที่สุดของเรา"; echo "<h2>Product ID: $post->ID"; } }

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

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
ฟังก์ชัน QuadLayers_get_multiple_taxonomies(){
    โพสต์ $ ทั่วโลก;
    $args = array( 'taxonomy' => 'product_tag',);
    $terms = wp_get_post_terms($post->ID,'product_tag', $args);
    $count = นับ($เงื่อนไข);
 ถ้า ($นับ > 0) {
        echo '<div class="custom-content"><h4>รายการแท็ก:</h4><ul>';
        foreach ($terms as $term) {echo '<li>'.$term->name.'</li>';}
        เสียงสะท้อน </ul></div>";
    }
}

1.5) แก้ไขแท็บผลิตภัณฑ์

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

 add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
ฟังก์ชั่น woo_remove_product_tabs ($tabs) {
    unset( $แท็บ['คำอธิบาย'] ); // ลบแท็บ Description
    $tabs['reviews']['title'] = __( 'เรตติ้ง' ); // เปลี่ยนชื่อแท็บรีวิว
    $tabs['additional_information']['priority'] = 5; // ข้อมูลเพิ่มเติมในตอนแรก
    ส่งคืนแท็บ $;
}

แก้ไขหน้าผลิตภัณฑ์ WooCommerce โดยทางโปรแกรม - ปรับแต่งแท็บผลิตภัณฑ์ ในการแก้ไขเนื้อหาของแท็บ คุณต้องใช้ฟังก์ชันเรียกกลับดังนี้:

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

ฟังก์ชั่น woo_custom_description_tab ($tabs) {
	$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // คำอธิบายที่กำหนดเองโทรกลับ
	ส่งคืนแท็บ $;
}
ฟังก์ชั่น woo_custom_description_tab_content () {
	เสียงสะท้อน '
<h2>คำอธิบายที่กำหนดเอง</h2>
'; echo 'นี่คือคำอธิบายที่กำหนดเอง'; }

ในทำนองเดียวกัน เราสามารถสร้างแท็บใหม่ได้ดังนี้:

 add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
ฟังก์ชัน woo_new_product_tab ($tabs) {	
	// เพิ่มแท็บใหม่	
	$tabs['test_tab'] = อาร์เรย์ (
		'title' => __( 'แท็บผลิตภัณฑ์ใหม่', 'woocommerce' ),
		'ลำดับความสำคัญ' => 50,
		'โทรกลับ' => 'woo_new_product_tab_content'
	);
	ส่งคืนแท็บ $;
}
ฟังก์ชั่น woo_new_product_tab_content () {
	echo '<h2>แท็บผลิตภัณฑ์ใหม่</h2><p>นี่คือเนื้อหาแท็บผลิตภัณฑ์ใหม่ของคุณ</p>.'; 
}

ในตัวอย่างนี้ เราเพิ่งสร้างแท็บใหม่ชื่อ "แท็บผลิตภัณฑ์ใหม่" นี่คือลักษณะที่ปรากฏในส่วนหน้า

1.6) รองรับสินค้าแปรผัน

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

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

  • woocommerce_before_variations_form
  • woocommerce_before_single_variation
  • woocommerce_single_variation
  • woocommerce_after_single_variation

2) ปรับแต่งหน้าผลิตภัณฑ์แทนที่ไฟล์เทมเพลต WooCommerce

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

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

2.1) แก้ไขข้อมูลเมตา

ในการแก้ไขข้อมูลเมตา เราจำเป็นต้องแทนที่ไฟล์เทมเพลตที่รับผิดชอบในการพิมพ์ข้อมูลที่เกี่ยวข้อง ไฟล์ meta.php ที่อยู่ในปลั๊กอิน WooCommerce ตามเส้นทางนี้: woocommerce/templates/single-product/meta.php

ตอนนี้แก้ไขไดเร็กทอรีไฟล์ธีมลูกของคุณและสร้างโฟลเดอร์ WooCommerce จากนั้นสร้างโฟลเดอร์อื่นที่เรียกว่า ผลิตภัณฑ์เดียว และวางไฟล์ meta.php ที่นั่น: Child_theme/woocommerce/single-product/meta.php

หลังจากนี้ คุณควรจะสามารถแก้ไขไฟล์ meta.php และดูการเปลี่ยนแปลงของคุณได้ในส่วนหน้า ไฟล์ตัวอย่าง meta.php ต่อไปนี้จะ:

  • เปลี่ยนป้ายกำกับของ SKU เป็น ID
  • เปลี่ยนแท็กเป็นเผยแพร่ภายใต้
  • ลบหมวดหมู่ label
 ผลิตภัณฑ์ $ ทั่วโลก;
?>
<div class="product_meta">

	<?php do_action( 'woocommerce_product_meta_start' ); ?>

	<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>

		<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?> 
			<span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'ไม่มี', 'woocommerce' ); ?>
			</span>
		</span>
	<?php endif; ?>
	<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce ' ) . ' ', '</span>' ); ?>
	<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'เผยแพร่ภายใต้:', 'เผยแพร่ภายใต้:', count( $product->get_tag_ids () ), 'woocommerce' ) . ' ', '</span>' ); ?>
	<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2) เปลี่ยนเป็นเทมเพลตที่กำหนดเองสำหรับหมวดหมู่ผลิตภัณฑ์เฉพาะ

ทีนี้มาลองทำงานที่ซับซ้อนกว่านี้กัน เราจะลบล้างเทมเพลตผลิตภัณฑ์เดียวก็ต่อเมื่อผลิตภัณฑ์ปัจจุบันอยู่ในหมวดหมู่เฉพาะ

2.2.1) แก้ไขไฟล์ single-product.php

ขั้นแรก ให้คัดลอกไฟล์ single-product.php และวางลงในโฟลเดอร์ธีมลูกของคุณในไดเรกทอรี WooCommerce:

Child_theme/woocommerce/single-product.php

จากนั้นเปิดไฟล์และตรวจสอบบรรทัดที่ 37: wc_get_template_part('content','single-product');

นี่คือการทำงานของไฟล์ content-single-product.php โดยพิมพ์องค์ประกอบทั้งหมดของผลิตภัณฑ์ปัจจุบันเพื่อทำให้ลูปสมบูรณ์และสร้างเลย์เอาต์

เราต้องการแทนที่ไฟล์นี้เฉพาะเมื่อผลิตภัณฑ์อยู่ในหมวดหมู่ที่ระบุ ดังนั้นเราจะลบบรรทัดที่ 37: wc_get_template_part( 'content', 'single-product' ); และแทนที่ด้วยสคริปต์ต่อไปนี้:

 $terms = wp_get_post_terms( $post->ID, 'product_cat' );
				$categories = wp_list_pluck( $terms, 'slug' );
			
				if (in_array( 'โปสเตอร์', $categories ) ) {
					wc_get_template_part( 'เนื้อหา', 'โปสเตอร์ผลิตภัณฑ์เดียว' );
				} อื่น {
					wc_get_template_part( 'เนื้อหา', 'ผลิตภัณฑ์เดียว' );
				}

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

จำไว้ว่าคุณสามารถค้นหาประเภทผลิตภัณฑ์ทั้งหมดของคุณได้ใน แดชบอร์ดหลักของ WordPress > ผลิตภัณฑ์ > หมวดหมู่

2.2.2) สร้างไฟล์ content-single-product.php ใหม่

ตอนนี้ เราต้องสร้างไฟล์ใหม่ที่จะแทนที่ content-single-product.php เริ่มต้น ไฟล์นี้จะมีประเภทกระสุนอยู่ในชื่อ

ดูตัวอย่างด้านบนเพื่อดูว่าไฟล์ content-single-product-posters.php ถูกเรียกอย่างไร นี่เป็นสิ่งสำคัญเนื่องจากชื่อไฟล์ต้องตรงกับรหัสในขั้นตอนก่อนหน้า ดังนั้นไฟล์ของคุณจึงควรถูกเรียกว่า content-single-product-/*YOURCATEGORYSLUG*/.php

ด้วยวิธีนี้ wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) จะทริกเกอร์ไฟล์ content-single-product-YOURCATEGORY.php และจะแทนที่ไฟล์เทมเพลต WooCommerce เริ่มต้น

เพียงวางไฟล์ content-single-product.php เริ่มต้นในโฟลเดอร์ WooCommerce ของธีมลูกของคุณ เปลี่ยนชื่อตามคำแนะนำที่อธิบายข้างต้น และทำรุ่นบางรุ่นเพื่อทดสอบ

2.2.3) สร้างเทมเพลตที่กำหนดเองเพื่อแก้ไขไฟล์ content-single-product.php ใหม่ของคุณ

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

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

 // ลบองค์ประกอบสรุปผลิตภัณฑ์
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	
		// เนื้อหาที่กำหนดเอง
		printf('<h1>นี่คือ <b>'.$post->post_name.' </b>โปสเตอร์</h1>');
		printf('<h4>หน้าผลิตภัณฑ์ที่กำหนดเองแบบเต็มสำหรับผลิตภัณฑ์หมวดหมู่ "โปสเตอร์"</h4>');
		// คำอธิบาย
		printf('<h5>'.$post->post_excerpt.'</h5>');
		//ภาพขนาดย่อ
		do_action( 'woocommerce_before_single_product_summary' );
				
		//เพิ่ม meta
		do_action( 'woocommerce_single_product_summary');
		// รหัสย่อ
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo "<h3>ติดต่อ:</h3>".do_shortcode('[wpforms]'); echo "<h3>โปสเตอร์เพิ่มเติม:</h3>".do_shortcode(' [ product_category category="posters" orderby="desc" limit="4" ] ');

ตอนนี้ ถ้าเราตรวจสอบส่วนหน้า เราจะเห็นสิ่งต่อไปนี้: วิธีแก้ไขหน้าผลิตภัณฑ์ WooCommerce โดยทางโปรแกรม - เทมเพลตหน้าผลิตภัณฑ์สำหรับอนุกรมวิธานเฉพาะ โปรดทราบว่าเรากำลังใช้วัตถุโพสต์ทั่วโลก var_dump($post); เพื่อแสดงข้อมูลที่มีอยู่ทั้งหมดที่เกี่ยวข้องกับผลิตภัณฑ์ปัจจุบัน คุณสามารถใช้ข้อมูลใดๆ ของมันได้เหมือนกับที่เราได้ทำในสคริปต์ตัวอย่างพร้อมคำอธิบายของผลิตภัณฑ์: $post->post_excerpt

3) ปรับแต่งหน้าผลิตภัณฑ์ด้วยสคริปต์ CSS

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

    1. ขั้นแรก คุณต้องสร้างไฟล์ใหม่ในธีมย่อยของคุณด้วยนามสกุล .css เพื่อให้คุณสามารถเพิ่มสคริปต์ CSS ของคุณที่นั่นได้ เราขอแนะนำให้คุณตั้งชื่อว่า single-product.css หรือชื่อที่คล้ายกันเพื่อให้ค้นหาได้ง่าย
    2. จากนั้นวางไฟล์ในโฟลเดอร์หลักของธีมลูกที่ระดับเดียวกับไฟล์ functions.php และ style.css
    3. หลังจากนั้น ให้วางสคริปต์ต่อไปนี้ในไฟล์ functions.php ของธีมลูกของคุณและแทนที่ชื่อไฟล์ CSS ของคุณหากจำเป็น
 add_action( 'wp_enqueue_scripts', 'load_custom_product_style' );
      ฟังก์ชั่น load_custom_product_style () {
        ถ้า ( is_product() ){
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', เท็จ, '1.0.0', 'ทั้งหมด' );
          wp_enqueue_style('product_css');
        }
	  }

if(is_product()) จะตรวจสอบว่าหน้าปัจจุบันเป็นหน้าผลิตภัณฑ์หรือไม่ ซึ่งจะป้องกันการโหลดไฟล์ CSS โดยไม่จำเป็นเมื่อไม่ใช่หน้าผลิตภัณฑ์

4. หลังจากเพิ่มข้อมูลโค้ดนี้แล้ว คุณควรจะสามารถแก้ไขรูปแบบของหน้าผลิตภัณฑ์โดยเพิ่มกฎ CSS ที่กำหนดเองลงในไฟล์ CSS ของคุณ

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

แก้ไขหน้าผลิตภัณฑ์เดียวของ WooCommerce ด้วย CSS

มาดูตัวอย่างการเปลี่ยนแปลงอื่นๆ ที่คุณสามารถทำได้ในหน้าผลิตภัณฑ์โดยใช้ CSS เล็กน้อย

หากต้องการใช้สคริปต์ต่อไปนี้ บนแดชบอร์ด WordPress ให้ไปที่ ลักษณะที่ ปรากฏ > ปรับแต่ง > CSS เพิ่มเติม

เปลี่ยนขนาดตัวอักษรชื่อเรื่อง

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

 .woocommerce div.product .product_title { 
        ขนาดตัวอักษร: 32px; 
}
เปลี่ยนสีหัวเรื่อง

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

 .woocommerce div.product .product_title { 
            สี: #FFA500; 
}
เปลี่ยนสีของปุ่มซื้อเลย

ในทำนองเดียวกัน คุณสามารถเปลี่ยนสีของปุ่ม "ซื้อเลย" ได้ ในตัวอย่างนี้ เราใช้ dodger blue แต่คุณสามารถเลือกสีอื่นได้ตามต้องการโดยการปรับโค้ด

 .woocommerce div.product .ปุ่ม { 
        พื้นหลัง: #1E90FF; 
}

บทสรุป

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

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

  • ใช้ตะขอ
  • แทนที่เทมเพลต WooCommerce
  • ด้วยสคริปต์ CSS

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

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

  • เรียนรู้การปรับแต่งไฟล์เทมเพลต WooCommerce
  • วิธีปรับแต่งหน้าร้านค้า WooCommerce
  • ปรับแต่งปุ่ม Add to Cart ใน WooCommerce
  • วิธีลบผลิตภัณฑ์ที่เกี่ยวข้องกับ WooCommerce
  • วิธีแก้ไข WooCommerce Checkout (การเข้ารหัส & ปลั๊กอิน)

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