วิธีสร้างหน้าบัญชี WooCommerce พร้อมส่วนผลิตภัณฑ์เด่นสำหรับผู้ใช้ที่เข้าสู่ระบบ

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

ในบทช่วยสอนนี้ เราจะออกแบบหน้าบัญชี WooCommerce ทั้งหมดตั้งแต่เริ่มต้น พร้อมส่วนผลิตภัณฑ์เด่นที่มีประโยชน์โดยใช้ Woo Modules เราจะรวม CSS บางส่วนไว้ด้วยซึ่งจะแสดงส่วนผลิตภัณฑ์เด่นเฉพาะเมื่อผู้ใช้เข้าสู่ระบบเท่านั้น

มาเริ่มกันเลย.

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของหน้าบัญชีที่เราจะสร้างในบทช่วยสอนนี้

นี่คือหน้าบัญชีก่อนที่ผู้ใช้จะเข้าสู่ระบบ

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

ดาวน์โหลดเค้าโครงหน้าบัญชีผลิตภัณฑ์เด่นได้ฟรี

ในการวางเค้าโครงหน้าบัญชีจากบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

สมัครสมาชิกช่อง Youtube ของเรา

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi ที่ติดตั้ง (หรือปลั๊กอิน Divi Builder หากไม่ได้ใช้ธีม Divi)
2. ติดตั้งและเปิดใช้งานปลั๊กอิน WooCommerce หากนี่เป็นครั้งแรกที่ตั้งค่า WooCommerce คุณจะต้องเรียกใช้ผ่านวิซาร์ดการตั้งค่าพื้นฐานเพื่อเตรียมร้านค้าของคุณให้พร้อม เมื่อเสร็จแล้ว คุณก็พร้อมที่จะเพิ่มผลิตภัณฑ์ใหม่ของคุณ
3. สร้างผลิตภัณฑ์สองสามรายการหากคุณยังไม่มี สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการเพิ่มผลิตภัณฑ์ใหม่ โปรดดูบทแนะนำนี้

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

ส่วนที่ 1: การออกแบบหน้าบัญชี

เปิดใช้งาน Divi Builder บนหน้าบัญชี WooCommerce

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

ถัดไป คุณจะสังเกตเห็น WooCommerce Shortcode ที่ใช้สร้างเนื้อหาหน้าบัญชี ไปข้างหน้าและคลิกเพื่อใช้ Divi Builder

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

การตั้งค่ามาตรา

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

• ไล่สีพื้นหลังด้านซ้าย: #ad52b7
• พื้นหลังไล่ระดับสีขวา: rgba(255,255,255,0.66)
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 33%
• ตำแหน่งสุดท้าย: 0%
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

จากนั้นเพิ่มภาพพื้นหลังที่มีความกว้างอย่างน้อย 1920px

เพิ่มส่วนหัวโดยใช้โมดูลข้อความใหม่

ในการเพิ่มส่วนหัวของหน้าหลัก (h1) ให้เพิ่มโมดูลข้อความใหม่โดยคลิกที่ไอคอนเครื่องหมายบวกสีเทาใต้โมดูลข้อความปัจจุบันที่มี WooCommerce Shortcode

จากนั้นลากไปเหนือโมดูลข้อความย่อของ WooCommerce และอัปเดตการตั้งค่าดังนี้:

เนื้อหาในร่างกาย:

<h1>My Account</h1>

ใต้แท็บ H1 ให้อัปเดตรูปแบบข้อความหัวเรื่องต่อไปนี้:

• แบบอักษรของหัวเรื่อง: Prompt
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• หัวเรื่องข้อความสี: #3f214f
• ขนาดข้อความของหัวเรื่อง: 90px (เดสก์ท็อป), 56px (แท็บเล็ต), 36px (โทรศัพท์)
• การเว้นวรรคหัวเรื่อง: 5px

ปรับแต่งเนื้อหารหัสย่อ

แม้แต่ข้อมูลหน้าบัญชี woocommerce ก็ยังถูกสร้างด้วยรหัสย่อ เรายังสามารถกำหนดเป้าหมายองค์ประกอบเหล่านั้นได้โดยใช้การตั้งค่าโมดูลข้อความ

เปิดการตั้งค่าของโมดูลข้อความที่มีรหัสย่อและอัปเดตสิ่งต่อไปนี้:

• สีพื้นหลัง: rgba(255,255,255,0.9)

ใต้แท็บข้อความย่อหน้า ให้อัปเดตสิ่งต่อไปนี้:

• แบบอักษรของข้อความ: Roboto
• ขนาดข้อความ: 16px

ภายใต้แท็บ ลิงก์ ให้อัปเดตสิ่งต่อไปนี้:

• สีของข้อความลิงก์: #ad52b7

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

• ขนาดข้อความรายการที่ไม่เรียงลำดับ: 26px (เดสก์ท็อป), 18px (แท็บเล็ต)
• ระยะห่างระหว่างตัวอักษรของรายการที่ไม่เรียงลำดับ: 2px
• รายการที่ไม่เรียงลำดับ ความสูงของบรรทัด: 2em
• เยื้องรายการแบบไม่เรียงลำดับ : 0.01px

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

• หัวข้อ 2 แบบอักษร: Roboto
• ขนาดข้อความของหัวเรื่อง 2: 56px (เดสก์ท็อป), 32px (แท็บเล็ต)

จากนั้นเพิ่มช่องว่างภายในโมดูลข้อความ:

• เบาะ: 3% บน, 3% ล่าง , 3% ซ้าย, 3% ขวา

สุดท้าย ให้โมดูลข้อความเป็นคลาส CSS ที่กำหนดเอง

• CSS Class: custom-account-style

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

การเพิ่ม CSS ภายนอกเพื่อจัดรูปแบบองค์ประกอบข้อมูลบัญชีอื่นๆ

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

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

.custom-account-style .woocommerce-Button.button, .custom-account-style .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    color: #ffffff!important;
    background-color: #9452b7;
    border-color: #9452b7;
}
.custom-account-style .woocommerce-Button.button:hover {
    background-color: #3f214f;
}

.custom-account-style .woocommerce .woocommerce-error, .custom-account-style .woocommerce .woocommerce-info, .custom-account-style .woocommerce .woocommerce-message {
   background-color: #3f214f;
}

ความกว้างของแถว

หลังจากกำหนดรูปแบบข้อมูลรหัสย่อของ woocommerce ของโมดูลข้อความแล้ว ให้บันทึกการตั้งค่าและเปิดการตั้งค่าแถว อัปเดตความกว้างสูงสุดดังนี้:

• ความกว้างสูงสุด: 1250px

ส่วนที่ 2: การออกแบบส่วนผลิตภัณฑ์ที่โดดเด่น

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

การสร้างส่วนใหม่และแถว

ในการเริ่มต้น ให้สร้างส่วนปกติใหม่

จากนั้นเพิ่มแถวคอลัมน์หนึ่งแถวในส่วน

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

เพิ่มหัวเรื่องด้วยโมดูลข้อความ

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

เนื้อหาในร่างกาย:

<h2>Special Product Offer</h2>

• หัวข้อ 2 แบบอักษร: Prompt
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 2 สีข้อความ: #3f214f
• ขนาดข้อความของหัวเรื่อง 2: 56px (เดสก์ท็อป), 36px (แท็บเล็ต)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 5px

เพิ่มแถวที่สอง

ถัดไปเพิ่มแถวใหม่ที่มีโครงสร้างคอลัมน์ 1/3 2/3

เพิ่มโมดูลภาพ Woo

ในคอลัมน์ด้านซ้าย เพิ่มโมดูล Woo Images

จากนั้นเลือกผลิตภัณฑ์ที่คุณต้องการนำเสนอจากดรอปดาวน์ผลิตภัณฑ์

จากนั้นอัปเดตรูปแบบป้ายลดราคาดังนี้:

• สีป้ายลดราคา: #f1be51
• แบบอักษรตราการขาย: Roboto
• รูปแบบตัวอักษรของป้ายลดราคา: TT
• ระยะห่างจดหมายป้ายขาย: 5px
• ความสูงของเส้นป้ายขาย: 1.3em

เพิ่มตัวแบ่ง

ในคอลัมน์ทางขวา ให้เพิ่มโมดูลตัวแบ่งและอัปเดตการตั้งค่าดังนี้:

• สีของเส้น: #dddddd
• น้ำหนักตัวแบ่ง: 3px
• ขอบ: 10px ด้านล่าง

เพิ่มโมดูลชื่อ Woo

ใต้โมดูลตัวแบ่ง ให้เพิ่มโมดูลชื่อ Woo

จากนั้นเพิ่มผลิตภัณฑ์เดียวกันกับที่เพิ่มในโมดูลภาพ woo

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

• ระดับหัวเรื่อง: H3
• แบบอักษรของชื่อเรื่อง: Roboto
• ขนาดข้อความชื่อเรื่อง: 38px

เพิ่มโมดูลราคา Woo

ถัดไป เพิ่ม Woo Price Module ด้วยผลิตภัณฑ์เดียวกัน

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

• แบบอักษรราคา: Roboto
• สีข้อความราคา: #ad52b7

เพิ่มโมดูลคำอธิบาย Woo

ใต้โมดูลราคา Woo ให้เพิ่มโมดูลคำอธิบาย Woo

จากนั้นเพิ่มผลิตภัณฑ์เดียวกันลงในโมดูลคำอธิบาย woo

จากนั้นอัปเดตการตั้งค่าดังนี้:

• สีพื้นหลัง: #eeeeee
• ช่องว่างภายใน: บน 20px ล่าง 20px ซ้าย 20px ขวา 20px

เพิ่มโมดูลใส่รถเข็น

ภายใต้ Woo Description Module ให้เพิ่ม Woo Add to Cart Module แล้วเลือกผลิตภัณฑ์เดียวกัน

จากนั้นอัปเดตการตั้งค่าดังนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #ad52b7

อัปเดตการตั้งค่าแถว

จากนั้นอัปเดตการตั้งค่าแถวดังนี้:

• สีพื้นหลัง (แท็บเล็ต): #ffffff
• ความกว้างสูงสุด: 1250px
• Padding (เดสก์ท็อป): 0px บน, 0px ด้านล่าง
• ช่องว่างภายใน (แท็บเล็ต): บน 25px, ด้านล่าง 25px, ซ้าย 25px, 25px ขวา

ถัดไป เปิดการตั้งค่าคอลัมน์ด้านซ้ายและอัปเดตสิ่งต่อไปนี้:

• สีพื้นหลัง: #3f214f
• ช่องว่างภายใน: บน 25px ล่าง 25px ซ้าย 25px ขวา 25px

เพิ่มสินค้าเพิ่มเติม

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

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

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

เพิ่ม CSS ID

ในการซ่อนผู้ใช้ส่วนผลิตภัณฑ์แนะนำที่ไม่ได้เข้าสู่ระบบ เราจำเป็นต้องเพิ่มคลาส CSS ในส่วนผลิตภัณฑ์เด่นดังนี้:

• CSS Class: เข้าสู่ระบบเท่านั้น

เพิ่ม CSS ภายนอก

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

.logged-in-only {
  display: none;
}
.logged-in .logged-in-only{
  display: block;
}

รหัสนี้จะซ่อนส่วนนั้นโดยค่าเริ่มต้น จากนั้นจะแสดงส่วนนั้นเมื่อผู้ใช้ลงชื่อเข้าใช้ไซต์ WordPress ของคุณ

ผลสุดท้าย

นี่คือหน้าบัญชีก่อนที่ผู้ใช้จะเข้าสู่ระบบ

นี่คือหน้าบัญชีหลังจากที่ผู้ใช้เข้าสู่ระบบ

ความคิดสุดท้าย

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

หวังว่านี่จะเป็นแรงบันดาลใจเล็กๆ น้อยๆ ในการออกแบบหน้าบัญชีถัดไปใน Divi

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!