วิธีปรับแต่งหน้าผลิตภัณฑ์ WooCommerce

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

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

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

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

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

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

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

ขั้นแรก ให้เราดูเค้าโครงหน้าผลิตภัณฑ์เริ่มต้น

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

นี่คือวิธีแสดงหน้าผลิตภัณฑ์:

มีไฟล์ WooCommerce หลัก 2 ไฟล์ที่รับผิดชอบผลลัพธ์ของหน้าผลิตภัณฑ์

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

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

ให้เรามาดูตัวอย่างการใช้งานจริงเกี่ยวกับวิธีการปรับแต่งหน้าผลิตภัณฑ์

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

ในส่วนนี้ เราจะใช้ hooks เพื่อปรับแต่งหน้าผลิตภัณฑ์

1. ลบองค์ประกอบ

มีตะขอหลายอันสำหรับลบองค์ประกอบต่างๆ ในหน้าผลิตภัณฑ์ ตะขอทำงานกับองค์ประกอบเฉพาะ

ซึ่งหมายความว่าคุณต้องใช้ hook ฟังก์ชันและค่าลำดับความสำคัญที่ถูกต้อง

ต่อไปนี้คือสคริปต์บางส่วนในการลบองค์ประกอบต่างๆ และปรับแต่งหน้าผลิตภัณฑ์ คัดลอกและวางลงในไฟล์ functions.php:

// remove title

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

// remove  rating  stars

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );

// remove product meta

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

// remove  description

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

// remove images

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

// remove related products

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// remove additional information tabs

remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

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

คุณสามารถเพิ่มเนื้อหาใหม่ในหน้าผลิตภัณฑ์โดยสร้างฟังก์ชันของคุณเอง คุณควรคัดลอกและวางลงในไฟล์ functions.php:

 

add_action('woocommerce_after_single_product_summary','njengah_callback_function'); 

function njengah_callback_function(){    
    printf('     
    <h1> Hey there !</h1>  
   <div><h5>Welcome to my custom product page</h5>      
   </div>'); 
}

นี่คือผลลัพธ์:

3. แก้ไขแท็บสินค้า

คุณสามารถใช้เบ็ดตัวกรอง woocommerce_product_tabs เพื่อลบ เพิ่ม เรียงลำดับใหม่ หรือเพิ่มแท็บใหม่ในส่วนข้อมูลเพิ่มเติม

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

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

function njengah_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );           // Remove the Description tab

    $tabs['reviews']['title'] = __( 'Ratings' );     // Rename the Reviews tab

    $tabs['additional_information']['priority'] = 5;       // Additional information at first

    return $tabs;

}

นี่คือผลลัพธ์:

คุณสามารถสร้างแท็บใหม่ได้โดยใช้รหัสต่อไปนี้ คุณควรคัดลอกและวางลงในไฟล์ functions.php:

 

add_filter( 'woocommerce_product_tabs', 'njengah_new_product_tab' );

function njengah_new_product_tab( $tabs ) {         

            // Adds the new tab   

            $tabs['test_tab'] = array(

                        'title'    => __( 'New Tab Here!', 'woocommerce' ),

                        'priority'  => 50,

                        'callback'  => 'njengah_new_product_tab_content'

            );

            return $tabs;

}

function njengah_new_product_tab_content() {

            echo '<h2>New Tab Here!</h2><p>Here\'s your new product tab content</p>.';

}

นี่คือผลลัพธ์:

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

คุณยังสามารถแก้ไขหน้าผลิตภัณฑ์ WooCommerce โดยทางโปรแกรมได้โดยการแทนที่ไฟล์เทมเพลต

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

กระบวนการนี้คล้ายกับการแทนที่ไฟล์อื่นๆ ในธีมลูกของคุณ

เราแนะนำให้สร้างธีมย่อยหรือปลั๊กอินเพื่อทำการเปลี่ยนแปลง

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

global $product;
?>

<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__( 'N/A', '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( 'Published under:', 'Published under:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

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

</div>

นี่คือผลลัพธ์:

2. ปรับแต่งหน้าผลิตภัณฑ์ด้วย CSS Script

คุณสามารถแก้ไขหน้าผลิตภัณฑ์ WooCommerce โดยทางโปรแกรมได้อย่างง่ายดายโดยใช้โค้ด CSS

มันจะช่วยให้คุณจัดรูปแบบหน้าผลิตภัณฑ์และให้รูปลักษณ์ของธุรกิจของคุณ

สิ่งแรกที่คุณต้องทำคือสร้างไฟล์ใหม่ในธีมย่อยของคุณด้วยนามสกุล .css เพื่อให้คุณสามารถเพิ่มสคริปต์ CSS ของคุณที่นั่นได้ คุณสามารถตั้งชื่อมันว่า single-product.css

วางไฟล์ในโฟลเดอร์หลักของธีมลูกในระดับเดียวกับไฟล์ functions.php และ style.css

วางสคริปต์ต่อไปนี้ในไฟล์ functions.php ของธีมลูกของคุณและแทนที่ชื่อไฟล์ CSS ของคุณหากจำเป็น

add_action( 'wp_enqueue_scripts', 'njengah_custom_product_style' );

function njengah_custom_product_style() {

if ( is_product() ){

wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );

wp_enqueue_style('product_css');

}

}

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

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

บทสรุป

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

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

หากคุณต้องการความช่วยเหลือในการปรับแต่งหน้านี้ โปรดติดต่อนักพัฒนา WordPress ที่มีคุณสมบัติ

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

1. 100+ Tips, Tricks & Snippets Ultimate WooCommerce ซ่อนคู่มือ
2. WooCommerce Hooks List » ทั่วโลก, รถเข็น, ชำระเงิน, สินค้า
3. วิธีสร้างผลิตภัณฑ์ด้วยโปรแกรม WooCommerce
4. วิธีเปลี่ยนจำนวนหน้าร้านของผลิตภัณฑ์ต่อแถว
5. วิธีตั้งค่าราคาสินค้า WooCommerce ต่อกิโลกรัม
6. วิธีรับรายละเอียดการสั่งซื้อหลังจากชำระเงินใน WooCommerce
7. Gutenberg vs Elementor ตัวสร้างหน้า WordPress ไหนดีกว่ากัน
8. วิธีสร้างหน้าหมวดหมู่ที่กำหนดเองใน WooCommerce
9. วิธีจัดสไตล์หน้าชำระเงิน WooCommerce
10. วิธีล้างรถเข็นเมื่อออกจากระบบใน WooCommerce
11. วิธีเปลี่ยนปุ่ม Add to Cart เพื่ออ่านต่อ WooCommerce
12. วิธีลบตัวยึดตำแหน่งรูปภาพผลิตภัณฑ์ใน WooCommerce
13. วิธีเพิ่มสกุลเงินใน WooCommerce [สกุลเงินที่กำหนดเอง]
14. วิธีเปิดแท็บคำอธิบาย WooCommerce โดยค่าเริ่มต้น
15. วิธีซ่อนคำอธิบายผลิตภัณฑ์ หัวเรื่อง WooCommerce
16. วิธีเพิ่มข้อความก่อนราคาใน WooCommerce » เพิ่มข้อความก่อนราคา
17. วิธีตั้งค่าหน้าผลิตภัณฑ์ธีมหน้าร้าน WooCommerce แบบเต็มความกว้าง
18. วิธีเปลี่ยนสินค้าต่อหน้า WooCommerce Storefront Theme
19. วิธีรับชื่อผลิตภัณฑ์ WooCommerce
20. วิธีตั้งค่าขนาดย่อหน้าร้าน WooCommerce