แนะนำวิธีการเพิ่มรูปภาพสินค้าที่หน้าชำระเงิน (Checkout Page) สำหรับ WooCommerce

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

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

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

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

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

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

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

วิธีการเพิ่มรูปภาพสินค้าในหน้าชำระเงินของ WooCommerce

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

การเพิ่มข้อมูลของโค้ด (Code Snippets)

สิ่งแรกที่อยากให้คุณทำก็คือ การสร้างข้อมูลสำรองทั้งหมดสำหรับเว็บไซต์ของคุณ และแนะนำว่าควรใช้ Child Theme เพื่อแก้ไขไฟล์ functions.php สำหรับการอ้างอิง เมื่อคุณได้ทำการตั้งค่า Child Theme แล้ว ให้ไปที่ WP Admin Dashboard > Appearance > Theme Editor จากนั้นเลือก Child Theme และไปที่ไฟล์ functions.php ที่นี่ คุณสามารถเพิ่มส่วนย่อยของโค้ดที่กำหนดขึ้นเองในส่วนท้ายของไฟล์ และรออัปเดตในภายหลังเพื่อให้การเปลี่ยนแปลงนั้นได้ผล เเละมีประสิทธิภาพ

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

หลังจากที่ได้ติดตั้งและเปิดการใช้งานปลั๊กอินแล้ว ให้ไปที่การตั้งค่าปลั๊กอินที่ WordPress Dashboard และคลิกเพิ่มตัวอย่างข้อมูลใหม่ (Add new snippet) คุณจะสามารถเพิ่มข้อมูลอะไรก็ได้มากเท่าที่คุณต้องการลงไป

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

ตัวอย่างและวิธีการเพิ่มรูปภาพสินค้าไปยัง WooCommerce Checkout

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

• เพิ่มรูปภาพสินค้าเพื่อชำระเงินในรูปแบบของอินไลน์

โดยใช้ข้อมูลของโค้ดด้านล่างนี้ในการเพิ่มรูปภาพสินค้าในหน้าชำระเงินในรูปแบบอินไลน์

add_filter( 'woocommerce_cart_item_name', 'mywp_product_image_checkout', 9999, 3 ); 
function 'mywp_product_image_checkout' ( $name, $cart_item, $cart_item_key ) {
    if ( ! is_checkout() ) 
        {return $name;}
    $product = $cart_item['data'];
    $thumbnail = $product->get_image( array( '50', '50' ), array( 'class' => 'alignleft' ) ); 
    /*Above you can change the thumbnail size by changing array values e.g. array(‘100’, ‘100’) and also change alignment to alignright*/
    return $thumbnail . $name;
}

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

• เพิ่มรูปภาพสินค้าให้แยกออกจากชื่อสินค้า โดยรูปภาพและชื่อต้องอยู่คนละบรรทัดกัน

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

add_filter( 'woocommerce_cart_item_name', 'mywp_product_image_checkout', 9999, 3 );
function mywp_product_image_checkout( $name, $cart_item, $cart_item_key ) {
    if ( ! is_checkout() ) 
        {return $name;}
    $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
    $thumbnail = $_product->get_image();
    $image = '<div class="mywp_product_image_checkout" style="width: 50px; height: 50px; display: inline-block; vertical-align: middle;">'
                . $thumbnail .
            '</div>'; 
    /* Above you can change width, height, and alignment of the image to however you want*/
    return $image . $name;
}

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

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

ดังนั้นมาดูกันว่าหน้า Order-Pay จะมีหน้าตาอย่างไร เเละเราสามารถปรับปรุงเพื่อเพิ่มประสิทธิภาพให้ดีขึ้นได้อย่างไรบ้าง

ตัวอย่างและวิธีการเพิ่มรูปภาพสินค้าไปยังหน้า Order-Pay ของ WooCommerce

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

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

add_filter( 'woocommerce_order_item_name', 'mywp_product_image_orderpay', 9999, 3 );
function mywp_product_image_orderpay( $name, $item, $extra ) {
    if ( ! is_checkout() ) 
        {return $name;}
    $product_id = $item->get_product_id();
    $_product = wc_get_product( $product_id );
    $thumbnail = $_product->get_image();
    $image = '<div class="mywp_product_image_orderpay" style="width: 50px; height: 50px; display: inline-block; vertical-align: middle;">'
                . $thumbnail .
            '</div>'; 
    /* Above you can change image width, height, and alignment of the image to however you want*/
    return $image . $name;
}

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

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

บทความโบนัส ปรับเเต่งหน้าชำระเงินด้วย Checkout Manager Plugin

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

ดังนั้นมาดูกันเลยว่าปลั๊กอินจะช่วยในการปรับแต่งหน้าชำระเงินของ WooCommerce ได้อย่างไร

การติดตั้ง Checkout Manager สำหรับปลั๊กอิน WooCommerce

สิ่งแรกที่คุณต้องจัดการก็คือการติดตั้งและเปิดใช้งานปลั๊กอิน โดยไปที่ WordPress Admin Dashboard เเละไปที่ Plugins > Add new ค้นหา checkout Manager และคลิกปุ่มติดตั้งทันที เมื่อติดตั้งปลั๊กอินแล้วให้กดเปิดใช้งาน ระบบก็จะเริ่มทำงานทันที

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

จัดการเพิ่ม แก้ไข และลบช่องชำระเงิน

เมื่อคุณเปิดใช้งานปลั๊กอินบนเว็บไซต์ของคุณเเล้ว ให้ไปที่ WordPress Admin Dashboard เเละไปที่ WooCommerce > Checkout คุณจะพบการตั้งค่าทั้งหมดสำหรับ Checkout Manager 

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

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

• Reposition : พารามิเตอร์นี้จะใช้ในการเปลี่ยนตำเเหน่ง หรือย้ายฟังก์ชันขึ้นหรือลงก็ได้ด้วยการคลิกเพียงครั้งเดียวที่ลูกศรชี้ขึ้น เเละลูกศรชี้ลง ไม่เพียงเท่านั้นคุณยังสามารถคลิกและลากเส้นแนวนอนสามเส้น เพื่อเปลี่ยนตำเเหน่งของฟังก์ชันไปยังตำเเหน่งที่คุณต้องการได้
• Required : การเปิดใช้งานพารามิเตอร์ที่จำเป็นจะเป็นการกำหนดว่าฟังก์ชันในส่วนนี้ของเว็บไซต์ลูกค้าจะไม่สามารถข้ามได้ ซึ่งจะมีการระบุว่าจำเป็นผู้ใช้งานจะไม่สามารถข้ามได้
• Position : โดยทั่วไปเเล้วพารามิเตอร์นี้จะช่วยในการจัดการตำเเหน่งของฟังก์ชันให้เป็นไปตามที่คุณต้องการ จะให้อยู่ทางซ้าย ทางขวา หรือเพิ่มเเท็บให้กว้างขึ้นก็ได้
• Clear : การเปิดใช้งานพารามิเตอร์นี้จะเป็นตัวที่ล้าง หรือเคลียร์ฟังก์ชันอื่น ๆ ที่อยู่ในเเท็บเดียวกัน
• Disable : พารามิเตอร์ตัวนี้ จะใช้ในการปิดใช้งานฟังก์ชันต่าง ๆ ที่คุณไม่ต้องการให้ปรากฏบนเว็บไซต์ หรือไม่ต้องการใช้งานเเล้ว
• Edit and Delete : คุณสามารถใช้พารามิเตอร์นี้สำหรับการแก้ไขหรือลบฟังก์ชันออก ซึ่งจะสังเกตได้ว่าปุ่มลบนั้นจะมีเฉพาะฟังก์ชันที่คุณกำหนดขึ้นมาเองเท่านั้น คุณจะไม่สามารถลบฟังก์ชันเริ่มต้นที่มีอยู่แล้วบนเว็บไซต์ได้ เเต่คุณสามารถปิดการใช้งานฟังก์ชันเริ่มต้นได้

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

เพิ่มช่องอัปโหลดเเบบกำหนดเองใน WooCommerce Checkout

ไปที่ WordPress Admin Dashboard จากนั้นไปที่ WooCommerce > ชำระเงิน (Checkout) ด้านล่างของเเท็บชำระเงินจะมีเมนูต่าง ๆ เพิ่มเติม

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

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

การเพิ่มปุ่มอัปโหลดไฟล์ให้ตั้งค่า Type เป็น File เเละใส่ป้ายกำกับ พร้อมกับใส่ Button Text เมื่อจัดการเรียบร้อยเเล้วให้กดบันทึก

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

และนี่ก็เป็นคู่มือฉบับสมบูรณ์ที่สุดในการปรับเเต่งหน้าชำระเงินชอง WooCommerce

สรุป

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

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