คู่มือฉบับสมบูรณ์: การปรับแต่งแม่แบบหน้ารายละเอียดสินค้า WooCommerce เพื่อเพิ่มอัตราการแปลงยอดขาย

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

การวิเคราะห์ระบบเทมเพลต WooCommerce

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

WooCommerce ใช้ระบบเทมเพลตที่อิงตามลำดับชั้นของธีม (Template Hierarchy) เมื่อหน้าจากร้านค้าต้องการแสดงผล WooCommerce จะค้นหาไฟล์เทมเพลตตามลำดับที่กำหนด เส้นทางการค้นหาหลักคือ:你的主题目录 -> 插件的模板目录。

แนะนำให้อ่าน WooCommerce ข้อมูลเมตาของลูกค้าคืออะไร และเหตุใดจึงจำเป็นต้องจัดการ。

โดยเฉพาะอย่างยิ่ง WooCommerce จะค้นหาโฟลเดอร์ย่อยชื่อ woocommerce ในโฟลเดอร์ธีมปัจจุบันของคุณก่อน หากไม่มีไฟล์เทมเพลตที่เกี่ยวข้องในธีม มันจะย้อนกลับไปใช้ไฟล์เทมเพลตที่มาพร้อมกับปลั๊กอิน (อยู่ใน wp-content/plugins/woocommerce/templates/). กลไกนี้หมายความว่าคุณสามารถแทนที่เทมเพลตเริ่มต้นใดๆ ได้อย่างปลอดภัยโดยการสร้างไฟล์ที่เกี่ยวข้องในธีมของคุณ โดยไม่ต้องแก้ไขไฟล์หลักของปลั๊กอิน ซึ่งรับประกันว่าการปรับแต่งของคุณจะไม่สูญหายเมื่ออัปเดตปลั๊กอิน

UltaHost WordPress โฮสติ้ง

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

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

ไฟล์เทมเพลตที่สำคัญ

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

ไฟล์เทมเพลตหลักที่คุณต้องให้ความสนใจมักจะอยู่ในธีม woocommerce ไดเรกทอรีย่อย หรือคัดลอกมาจากไดเรกทอรีเทมเพลตปลั๊กอินโดยตรง ตัวอย่างเช่น พื้นที่รูปภาพผลิตภัณฑ์ถูกควบคุมโดย single-product/product-image.php ในขณะที่ฟอร์มเพิ่มลงในตะกร้าสินค้าจัดการโดย single-product/add-to-cart.php การเข้าใจโครงสร้างนี้จะช่วยให้คุณระบุตำแหน่งและแก้ไขแต่ละส่วนของหน้าได้อย่างแม่นยำ

สามวิธีในการสร้างเทมเพลตผลิตภัณฑ์แบบกำหนดเอง

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

ใช้ธีมลูกเพื่อการทับซ้อนอย่างปลอดภัย

นี่เป็นวิธีที่แนะนำและปลอดภัยที่สุด สร้างธีมลูก (Child Theme) จากนั้นสร้างโครงสร้างไดเรกทอรีที่สอดคล้องกับลำดับชั้นของเทมเพลต WooCommerce ภายในโฟลเดอร์ธีมลูก
ตัวอย่างเช่น หากต้องการแทนที่เทมเพลตหลักของผลิตภัณฑ์ คุณต้องสร้างเส้นทางในธีมลูก:your-child-theme/woocommerce/single-product.phpจากนั้นคัดลอกเนื้อหาของไฟล์ single-product.php ต้นฉบับจากปลั๊กอินมา และทำการแก้ไขบนพื้นฐานนั้น ด้วยวิธีนี้ แม้ว่าเทมเพลตหลักจะได้รับการอัปเดต ส่วนที่กำหนดเองของ WooCommerce ของคุณจะยังคงอยู่

แนะนำให้อ่าน เริ่มต้นจากศูนย์: สอนคุณทีละขั้นตอนในการสร้างบล็อก WordPress อเนกประสงค์。

ผ่านปลั๊กอินตัวสร้างหน้า

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

เขียนและกำหนดไฟล์เทมเพลตแบบกำหนดเอง

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

<?php
/**
 * Template Name: 自定义产品布局
 * Template Post Type: product
 */
get_header(); // 调用主题头部
?>
// ... 你的自定义HTML和PHP代码 ...
<?php get_footer(); // 调用主题底部 ?>

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

hosting.com 共享主机

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

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

ปฏิบัติจริง: ตัวอย่างการกำหนดเค้าโครงหน้าผลิตภัณฑ์เอง

มาเรียนรู้ผ่านกรณีศึกษาเฉพาะ: วิธีการจัดเรียงองค์ประกอบหน้าผลิตภัณฑ์ใหม่ โดยย้ายฟอร์ม “เพิ่มไปยังรถเข็น” ไปไว้ข้างรูปภาพผลิตภัณฑ์ เพื่อเน้นการเรียกร้องให้ซื้อ

ขั้นแรก ในธีมลูกของคุณ woocommerce สร้างหรือคัดลอกในไดเรกทอรี single-product.phpเราจำเป็นต้องปรับโครงสร้างตรรกะของไฟล์นี้

เทมเพลตต้นฉบับมักโหลดส่วนต่าง ๆ ตามลำดับ สิ่งที่เราต้องทำคือจัดระเบียบการเรียกใช้ส่วนเหล่านี้ใหม่ นี่คือตัวอย่างโค้ดแบบง่ายที่แสดงวิธีการสร้างเลย์เอาต์สองคอลัมน์:

แนะนำให้อ่าน สุดยอด! คู่มือขั้นสูงสุดสำหรับ Custom Post Type ใน WordPress: จากศูนย์สู่ระดับเชี่ยวชาญ。

// 文件路径：your-child-theme/woocommerce/single-product.php
while ( have_posts() ) : the_post(); ?>
<div id="product-<?php the_ID(); ?>" no numeric noise key 1007>
    <div class="custom-product-container">

<!-- 左栏：主要放图片和摘要 -->
        <div class="product-left-column">
            <?php
            // 输出产品图片
            do_action( 'woocommerce_before_single_product_summary' );
            ?>
        </div>

<!-- 右栏：主要放标题、价格、表单和元信息 -->
        <div class="product-right-column">
            <?php
            // 输出产品摘要内容，但我们需要调整内部顺序
            ?>
            <div class="summary entry-summary">
                <?php
                // 1. 先输出标题
                woocommerce_template_single_title();
                // 2. 立即输出价格
                woocommerce_template_single_price();
                // 3. 紧接着输出“添加到购物车”表单
                woocommerce_template_single_add_to_cart();
                // 4. 再输出摘要描述
                woocommerce_template_single_excerpt();
                // 5. 输出元信息（如SKU、分类）
                woocommerce_template_single_meta();
                ?>
            </div>
        </div>

</div>

<div class="product-full-width">
        <?php
        // 产品详情选项卡（描述、额外信息、评论）仍放在底部全宽显示
        do_action( 'woocommerce_after_single_product_summary' );
        ?>
    </div>
</div>
<?php endwhile; // end of the loop. ?>

ต่อไป คุณต้องเพิ่ม CSS ที่เกี่ยวข้องเพื่อสร้างเลย์เอาต์สองคอลัมน์ เพิ่ม CSS ต่อไปนี้ในธีมลูกของ style.css ไฟล์:

.custom-product-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}
.product-left-column {
    flex: 1;
    min-width: 300px;
}
.product-right-column {
    flex: 1;
    min-width: 300px;
}
.product-full-width {
    flex-basis: 100%;
}
.summary entry-summary .cart {
    margin: 25px 0; /* 给购物车表单增加上下边距 */
}

เทคนิคการเพิ่มประสิทธิภาพขั้นสูงและแนวปฏิบัติที่ดีที่สุด

การปรับแต่งเลย์เอาต์พื้นฐานเป็นเพียงจุดเริ่มต้น เทคนิคต่อไปนี้สามารถเพิ่มประสิทธิภาพการแปลงของหน้าต่อไป

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

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

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

ใช้ Action Hooks เพื่อเพิ่มหรือลบเนื้อหา

เทมเพลต WooCommerce มี Action Hooks จำนวนมาก คุณสามารถใช้มันเพื่อเพิ่มหรือลบเนื้อหาในตำแหน่งเฉพาะ โดยไม่ต้องแก้ไขไฟล์เทมเพลตโดยตรง ตัวอย่างเช่น หากคุณต้องการเพิ่มข้อความแจ้งเตือน “สินค้าใกล้หมด” ด้านล่างราคาสินค้า คุณสามารถทำได้ในธีมลูกของ functions.php เพิ่มใน:

add_action( 'woocommerce_single_product_summary', 'custom_stock_notice', 15 );
function custom_stock_notice() {
    global $product;
    if ( $product-&gt;get_stock_quantity() < 10 && $product->get_stock_quantity() &gt; 0 ) {
        echo '<p class="low-stock" style="color:#d33;">🔥 库存紧张，仅剩 '. $product-&gt;get_stock_quantity() .' 件！</p>';
    }
}

ที่นี่woocommerce_single_product_summary เป็นชื่อของ hook15 คือลำดับความสำคัญ (ตัวเลขยิ่งน้อยยิ่งทำงานก่อน) ใช้สำหรับควบคุมตำแหน่งการแสดงผล

นำเทมเพลตที่แตกต่างกันไปใช้กับประเภทผลิตภัณฑ์ที่ต่างกัน

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

global $product;
if ( $product->is_type( 'variable' ) ) {
    // 加载为可变产品优化的模板部分
    wc_get_template_part( 'single-product/add-to-cart', 'variable' );
} else if ( $product->is_type( 'grouped' ) ) {
    // 加载为分组产品优化的模板部分
    wc_get_template_part( 'single-product/add-to-cart', 'grouped' );
} else {
    // 加载简单产品的默认表单
    wc_get_template_part( 'single-product/add-to-cart', 'simple' );
}

รับรองประสบการณ์การตอบสนองบนอุปกรณ์เคลื่อนที่

เมื่อกำหนดเค้าโครงเอง ต้องทดสอบมุมมองบนอุปกรณ์เคลื่อนที่ การใช้เค้าโครง Flexbox จากตัวอย่างด้านบนมีคุณสมบัติการตอบสนองที่ดีในตัว เมื่อหน้าจอแคบลง (เช่น บนอุปกรณ์เคลื่อนที่) คุณอาจต้องการให้สองคอลัมน์ซ้อนกันเป็นหนึ่งคอลัมน์ สามารถทำได้ผ่าน media query:

@media (max-width: 768px) {
    .custom-product-container {
        flex-direction: column;
        gap: 20px;
    }
}

สรุป

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

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

หลังจากปรับแต่งเทมเพลตแล้ว การอัปเดตปลั๊กอิน WooCommerce จะเขียนทับการแก้ไขของฉันหรือไม่

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

จะใช้เทมเพลตที่ปรับแต่งเองกับหมวดหมู่สินค้าเฉพาะได้อย่างไร

นี่ต้องการตรรกะโค้ดเพิ่มเติมบางส่วน วิธีหนึ่งคือการใช้เงื่อนไขตรวจสอบในไฟล์เทมเพลตที่กำหนดเองของคุณ (เช่น single-product.php) ก่อนอื่น รับหมวดหมู่ของผลิตภัณฑ์ปัจจุบัน จากนั้นรวมส่วนเทมเพลตที่แตกต่างกันตามผลลัพธ์ ตัวอย่างเช่น:if ( has_term( 't-shirts', 'product_cat' ) ) { ... }อีกวิธีที่ยืดหยุ่นมากขึ้นคือการใช้วิธีการ “กำหนดเทมเพลตแบบกำหนดเอง” เพื่อสร้างไฟล์เทมเพลตหลายไฟล์ จากนั้นเลือกเทมเพลตที่แตกต่างกันสำหรับผลิตภัณฑ์ในหมวดหมู่ต่างๆ ผ่านปลั๊กอินของบุคคลที่สามหรือฟิลด์ที่กำหนดเอง

แก้ไขเทมเพลตแล้วแต่หน้าเว็บไม่เปลี่ยนแปลง จะตรวจสอบอย่างไร?

กรุณาตรวจสอบตามขั้นตอนต่อไปนี้: ก่อนอื่น ตรวจสอบให้แน่ใจว่าคุณกำลังแก้ไขไฟล์ที่ถูกต้อง และไฟล์อยู่ที่เส้นทางที่ถูกต้องของธีม (ย่อย) ที่ใช้งานอยู่ (เช่น your-theme/woocommerce/single-product.php). ต่อมา ล้างแคชของ WordPress และเบราว์เซอร์ของคุณ บางครั้งไฟล์แคชเก่าอาจส่งผลต่อการโหลดโค้ดใหม่. จากนั้น ตรวจสอบว่ามีปลั๊กอินอื่น (โดยเฉพาะปลั๊กอินแคชหรือปรับปรุงประสิทธิภาพ) หรือฟังก์ชันของธีมที่เขียนทับการแก้ไขของคุณหรือไม่. สุดท้าย เปิดเครื่องมือนักพัฒนาของเบราว์เซอร์ (F12) เพื่อดูว่ามีข้อผิดพลาด JavaScript ในคอนโซลหรือไม่ หรือตรวจสอบว่า CSS selector ที่คุณเพิ่มถูกนำไปใช้อย่างถูกต้องหรือไม่.

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

แน่นอน นี่เป็นความต้องการที่พบได้บ่อยมาก. ก่อนอื่น คุณต้องใช้ปลั๊กอิน (เช่น Advanced Custom Fields) หรือโค้ดเพื่อสร้างช่องกำหนดเองสำหรับประเภทโพสต์ “ผลิตภัณฑ์” เช่น “จุดเด่นของผลิตภัณฑ์”. จากนั้น ในเทมเพลตผลิตภัณฑ์ที่กำหนดเองของคุณ ในตำแหน่งที่คุณต้องการแสดงข้อมูลนั้น (เช่น หลังจากบทสรุปผลิตภัณฑ์ ก่อนแท็บ) โดยเรียกใช้โค้ดที่คล้ายกับ echo get_field('product_highlights'); ใช้โค้ดเพื่อแสดงค่าของฟิลด์นี้ ซึ่งจะช่วยให้สามารถแสดงข้อมูลเพิ่มเติมที่แก้ไขจากแบคเอนด์ในเทมเพลตได้อย่างไดนามิก