วิธีปรับแต่งใบแจ้งหนี้ใน WooCommerce

เผยแพร่แล้ว: 2020-04-08

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

WooCommerce PDF Invoices, Packing Slips, Delivery Notes & Shipping Labels ประกอบด้วยเทมเพลตใบแจ้งหนี้ที่กำหนดไว้ล่วงหน้า ซึ่งคุณสามารถออกแบบใบแจ้งหนี้ด้วยข้อมูลที่เกี่ยวข้องที่คุณเลือกได้

[ช่องว่าง]

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

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

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

การตั้งค่าทั่วไปของใบแจ้งหนี้ WooCommerce

การตั้งค่าทั่วไปของใบแจ้งหนี้ WooCommerce

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

ใบแจ้งหนี้ WooCommerce หรือการตั้งค่าใบแจ้งหนี้ - ปรับแต่ง

ใบแจ้งหนี้ WooCommerce หรือการตั้งค่าใบแจ้งหนี้ - ปรับแต่ง

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

เค้าโครงใบแจ้งหนี้ WooCommerce

เค้าโครงใบแจ้งหนี้ WooCommerce

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

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

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

        WooCommerce ใบแจ้งหนี้ - ปรับแต่งคุณสมบัติแท็บทั่วไป

        WooCommerce ใบแจ้งหนี้ - ปรับแต่งคุณสมบัติแท็บทั่วไป

      • Text Align: ให้คุณตั้งค่าการจัดตำแหน่งข้อความ
        มีสองทางเลือก; ขวาและซ้าย.
      • ชื่อเรื่อง: อนุญาตให้คุณตั้งชื่อที่กำหนดเอง

        WooCommerce ใบแจ้งหนี้ - ปรับแต่งแท็บ - แอตทริบิวต์ทั่วไป - การจัดข้อความและชื่อเรื่อง

        WooCommerce ใบแจ้งหนี้ - ปรับแต่งแท็บ - แอตทริบิวต์ทั่วไป - การจัดข้อความและชื่อเรื่อง

ฟิลด์การปรับแต่งเฉพาะอื่นๆ ได้แก่:

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

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

      WooCommerce ใบแจ้งหนี้ - ปรับแต่งฟิลด์โลโก้แท็บ บริษัท

      WooCommerce ใบแจ้งหนี้ - ปรับแต่งฟิลด์โลโก้แท็บ บริษัท

  • เลขใบสั่งของ:  
    • วันที่ในใบแจ้งหนี้: วันที่สั่งซื้อ: ใบแจ้งหนี้ WooCommerce-กำหนดรูปแบบแท็บ

  • ตารางผลิตภัณฑ์: ตารางนี้จะมีข้อมูลที่เกี่ยวข้องกับผลิตภัณฑ์ เช่น SKU ของผลิตภัณฑ์ ชื่อผลิตภัณฑ์ ปริมาณ และราคารวม คุณสามารถกำหนดขนาดฟอนต์ การจัดแนวข้อความ และสีได้
  • ฟิลด์นี้ประกอบด้วยองค์ประกอบต่อไปนี้สำหรับการปรับแต่งตารางผลิตภัณฑ์:
    • Head Color : ให้คุณกำหนดสีสำหรับส่วนหัวของตารางผลิตภัณฑ์
    • Text Color : ให้คุณกำหนดสีให้กับข้อความในส่วนหัวของตารางผลิตภัณฑ์
    • SKU Align : ให้คุณกำหนดตำแหน่งสำหรับ SKU ในตารางผลิตภัณฑ์
      ประกอบด้วยสามตัวเลือก; ขวา ซ้าย และตรงกลาง
    • Product Align: ให้คุณตั้งค่าการจัดเรียงสินค้าในตารางผลิตภัณฑ์ ทางเลือกคือ; ขวา ซ้าย และตรงกลาง
    • ปริมาณการจัดแนว: ช่วยให้คุณสามารถกำหนดการจัดตำแหน่งสำหรับจำนวนสินค้าในตารางผลิตภัณฑ์ นอกจากนี้ยังมี; ตัวเลือกขวา ซ้าย และกลาง
    • Price Align: ให้คุณกำหนดราคาสินค้าในตารางสินค้าได้
    • Total Price Align: ให้คุณกำหนดราคารวมของผลิตภัณฑ์ในตารางผลิตภัณฑ์
    • Body Color : ให้คุณกำหนดสีสำหรับข้อความเนื้อหาของตารางผลิตภัณฑ์
    • SKU : ให้คุณตั้งค่าข้อความที่กำหนดเองสำหรับคอลัมน์ตารางที่ระบุข้อมูล SKU
    • สินค้า : ให้คุณตั้งค่าข้อความที่กำหนดเองสำหรับคอลัมน์ตารางที่ระบุชื่อผลิตภัณฑ์

      WooCommerce ใบแจ้งหนี้-ปรับแต่งแท็บ-Product table

      WooCommerce ใบแจ้งหนี้-ปรับแต่งแท็บ-Product table

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

    ใบแจ้งหนี้ WooCommerce หรือการตั้งค่าใบแจ้งหนี้ - ปรับแต่ง - ดูตัวอย่าง

    ใบแจ้งหนี้ WooCommerce หรือการตั้งค่าใบแจ้งหนี้ - ปรับแต่ง - ดูตัวอย่าง

  • ตัวแก้ไขโค้ด : คุณยังสามารถสลับไปยังตัวแก้ไขโค้ด เพื่อทำการปรับแต่งเพิ่มเติมนอกเหนือจากที่แสดงในโปรแกรมแก้ไขภาพ

    ใบแจ้งหนี้ WooCommerce หรือการตั้งค่าใบแจ้งหนี้ - ปรับแต่ง - ตัวแก้ไขรหัส

    ใบแจ้งหนี้ WooCommerce หรือการตั้งค่าใบแจ้งหนี้ - ปรับแต่ง - ตัวแก้ไขรหัส

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

    ใบแจ้งหนี้ WooCommerce หรือการตั้งค่าใบแจ้งหนี้ - ปรับแต่ง - ตัวแก้ไขรหัส - ช่วยเหลือ

    ใบแจ้งหนี้ WooCommerce หรือการตั้งค่าใบแจ้งหนี้ - ปรับแต่ง - ตัวแก้ไขรหัส - ช่วยเหลือ

บทสรุป

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