WooCommerce 15 อันดับแรกพร้อมคำถามที่พบบ่อยเกี่ยวกับ Elementor

หน้าหมวดหมู่มาตรฐานสำหรับ WooCommerce อาจน่าเบื่อ และคุณมีอิสระในการปรับแต่งหน้าหมวดหมู่ในแบบของคุณโดยใช้ Elementor Pro Theme Builder

ก่อนอื่น ไปที่ Theme Builder ภายใต้เทมเพลตใน Elementor Pro แล้วเลือก “Products Archive” จากนั้นคุณจะเข้าสู่หน้า Elementor Editor ซึ่งตอนนี้คุณสามารถตั้งค่าเค้าโครงสำหรับหมวดหมู่ผลิตภัณฑ์และหมวดหมู่ย่อยทั้งหมดของคุณ

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

“คำอธิบายที่เก็บถาวร” จะเป็นข้อมูลที่จะดึงมาจากคำอธิบายหมวดหมู่ผลิตภัณฑ์

เมื่อคุณดึงองค์ประกอบ "ผลิตภัณฑ์เก็บถาวร" คุณจะสังเกตเห็นว่าหมวดหมู่ย่อยของหมวดหมู่หลักปรากฏขึ้นโดยอัตโนมัติ หากคุณต้องการดูเฉพาะผลิตภัณฑ์ที่นี่ คุณสามารถปรับการตั้งค่าที่อื่น:
ออกจาก Elementor Editor (หรือเพียงเปิดแท็บใหม่เพื่อเข้าถึงแดชบอร์ด WordPress แบ็คเอนด์ของเว็บไซต์ของคุณ) วางเมาส์เหนือ "Appearance" แล้วคลิก "Customize" จากนั้นคลิก "WooCommerce" จากนั้นคลิกที่ “แคตตาล็อกสินค้า” ใต้ "แสดงหมวดหมู่" เลือก "แสดงผลิตภัณฑ์"

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

ตอนนี้ การแสดงผลิตภัณฑ์ของคุณควรปรากฏโดยไม่มีรูปภาพหมวดหมู่ย่อย หากคุณต้องการแสดงหมวดหมู่ย่อยของคุณในแถวอื่น (อาจอยู่ด้านบนของผลิตภัณฑ์) ให้ทำดังต่อไปนี้:
มองหาองค์ประกอบ “หมวดหมู่ผลิตภัณฑ์” ที่แถบด้านข้าง Elementor Editor ลากองค์ประกอบนี้ไปยังหน้าตัวแก้ไข ภายใต้ "แบบสอบถาม" > "แหล่งที่มา" เลือก "หมวดหมู่ย่อยปัจจุบัน" ซึ่งหมายความว่าตัวแก้ไขจะดึงหมวดหมู่ย่อยมาโดยอัตโนมัติ แม้ว่าคุณจะเพิ่มเข้าไปในภายหลังก็ตาม หากคุณไม่เห็นรูปภาพสำหรับหมวดหมู่ย่อยของคุณ ตรวจสอบให้แน่ใจว่าคุณได้อัปโหลดรูปภาพตัวแทนสำหรับแต่ละหมวดหมู่ที่ตัวแก้ไข "หมวดหมู่ผลิตภัณฑ์" ที่แบ็กเอนด์ของเว็บไซต์ของคุณ

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

ต่อไปนี้คือวิธีใช้ Carousel Element เพื่อแสดงผลิตภัณฑ์ของคุณ:
ขั้นแรก ให้มองหาองค์ประกอบ "Media Carousel" แล้วลากไปยังส่วนที่หน้าแรกของคุณ
ใต้ "เนื้อหา" ที่แถบด้านข้างตัวแก้ไข ให้คลิกที่ "รายการ #1" และเพิ่มรูปภาพผลิตภัณฑ์ของคุณ จากนั้นเพิ่มลิงก์ URL ด้านล่าง ทำเช่นเดียวกันกับรายการผลิตภัณฑ์ได้มากเท่าที่คุณต้องการ
เมื่อเสร็จแล้ว เลื่อนลงเพื่อดู “สไลด์ต่อการดู” คุณสามารถกำหนดจำนวนสินค้าที่คุณต้องการดูในหนึ่งแถวที่มองเห็นได้ ภายใต้ "สไลด์เพื่อเลื่อน" เรามักจะตั้งค่าเป็น 1 เพื่อให้ภาพหมุนเคลื่อนที่ช้าๆ โดยจะมีผลิตภัณฑ์เข้ามาทีละรายการ

คลิกที่ "ตัวเลือกเพิ่มเติม" ตั้งค่าขนาดรูปภาพเป็น "เต็ม" และรูปภาพพอดีเป็น "มี"

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

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

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

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

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

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

ใน Elementor Editor จะใช้เอฟเฟกต์โฮเวอร์บนภาพพื้นหลังได้ง่ายที่สุด หากคุณต้องการสร้างรูปภาพสินค้า 4 คอลัมน์พร้อมเอฟเฟกต์โฮเวอร์ ให้ลองทำดังนี้:

สร้างส่วนและใช้ไอคอน + เพื่อสร้าง 4 คอลัมน์

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

จากนั้นเลือกส่วน "Hover" และคลิกที่ "Classic" เพื่อเพิ่มภาพพื้นหลังสำหรับ Hover

ทำซ้ำสำหรับคอลัมน์ที่เหลือด้วยรูปภาพผลิตภัณฑ์ต่างๆ

ตอนนี้คุณจะได้รูปภาพ 4 คอลัมน์ที่มีเอฟเฟกต์โฮเวอร์

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

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

ซึ่งอาจสร้างขึ้นโดยใช้ Menu Anchor Element ภายใน Elementor Editor

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

หลังจากนี้ ไปที่ตำแหน่งที่คุณต้องการแทรกลิงก์และแทรกลิงก์นี้: yoursite.com/#anchorID (เปลี่ยน yoursite.com เป็นที่อยู่เว็บไซต์ของคุณและเปลี่ยน anchorID เป็น ID ที่คุณกำหนดไว้สำหรับจุดยึดนั้น)

สำหรับทุกองค์ประกอบใน Elementor Pro ภายใต้การตั้งค่าขั้นสูง คุณจะเห็นการตั้งค่าสำหรับระยะขอบและช่องว่างภายใน

Margin คือช่องว่างระหว่าง Element ที่เลือกกับ Element ข้างๆ

ดังนั้น พิกเซลระยะขอบด้านบนจะเป็นช่องว่างระหว่างองค์ประกอบปัจจุบันกับองค์ประกอบถัดไปด้านบน พิกเซลระยะขอบด้านขวาจะเป็นช่องว่างระหว่างองค์ประกอบปัจจุบันกับองค์ประกอบถัดไปทางด้านขวา พิกเซลระยะขอบด้านล่างจะเป็นช่องว่างระหว่างองค์ประกอบปัจจุบันและองค์ประกอบถัดไปด้านล่าง

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

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

ช่องว่างภายในเป็นเรื่องเกี่ยวกับพื้นที่ภายในองค์ประกอบ

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

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

เพิ่มมาตรา

แก้ไขส่วนนี้โดยคลิกที่ไอคอนตรงกลางที่ปรากฏร่วมกับอีก 2 คนเมื่อคุณวางเมาส์เหนือส่วนนั้น ไอคอนตรงกลางนี้เป็นไอคอนที่มี 6 จุด คลิกที่มันแล้วคุณจะเห็นแถบด้านข้างแก้ไขส่วนปรากฏขึ้นทางด้านซ้ายของคุณ

ตั้งค่า Section เป็น full-width แล้วเลือก “Yes” สำหรับ Stretch Section

ภายใต้ “สไตล์” > พื้นหลัง ให้แทรกภาพแบนเนอร์ของคุณ

บันทึกมัน
ตอนนี้ คุณควรเห็นภาพของคุณขยายไปทั่วหน้าจอ

ส่วนอื่นๆ ที่ต้องตรวจสอบหากคุณยังคงใช้แบนเนอร์ไม่เต็มความกว้าง:

ตำแหน่งเนื้อหา

คลิกที่เนื้อหา (ตัวอย่างกล่องข้อความ) และคุณจะเห็น Edit Text Editor ปรากฏขึ้นที่คอลัมน์ด้านซ้าย

ไปที่ขั้นสูงและค้นหาตำแหน่ง ภายในตำแหน่ง คุณจะเห็นตัวเลือก "ความกว้าง" เปลี่ยนเป็น "ความกว้างเต็ม (100%)"

คุณสมบัติของหน้า

หากคุณกำลังแก้ไขเพจและไม่สามารถขยายเพจนั้นให้เต็มความกว้างได้ ให้ไปที่แก้ไขเพจ

อย่าคลิกที่ปุ่มสีน้ำเงินที่ระบุว่า Edit with Elementor

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

ภายใต้ "เทมเพลต" เปลี่ยนเป็น "Elementor Full Width" บันทึกมัน

หากคุณทำทั้งหมดข้างต้นแล้ว แบนเนอร์ของคุณควรจะเต็มความกว้างทั้งหมด

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

หากข้อความที่ใช้เป็นข้อความประกาศหรือข้อความต้อนรับที่คุณต้องการแทรกที่ส่วนหัว ให้ไปที่เทมเพลต > ตัวสร้างธีม แล้วเลือก "ส่วนหัว" หน้าแก้ไข Elementor จะปรากฏขึ้น สร้างส่วน คุณอาจจะชอบก่อนที ตั้งค่าให้เต็มความกว้าง

เลื่อนลงมาที่ตัวเลือก Elements แล้วมองหา Slider จำนวนสไลด์เริ่มต้นที่มอบให้คุณคือ 3 สไลด์ ขีดฆ่าอันที่สามเพื่อลบออก เนื่องจากเราต้องการแค่ 2 อัน จากนั้นตั้งค่าความสูงเป็นประมาณ 50px

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

ตอนนี้ ย้ายกลับไปที่ Slides และคลิกที่ Item#1 เปลี่ยนสีพื้นหลังให้โปร่งใสทั้งหมด สามารถทำได้โดยการลากตัวเลื่อนที่แถบด้านล่างไปทางซ้ายที่จานสี จากนั้นคลิกที่เนื้อหาและลบคำชื่อและข้อความปุ่ม ในกล่องคำอธิบาย ให้พิมพ์ข้อความเคลื่อนไหวของคุณที่นี่ คัดลอกข้อความทั้งหมดแล้ววางลงในกล่องคำอธิบายของ Item#2 ทำการตั้งค่าพื้นหลังเดียวกันสำหรับ Item#2 และอย่าลืมลบ Title word และ Button Text words สำหรับ Item#2 ด้วย

สำหรับทั้ง Item#1 และ Item#2: คลิกที่ Style จากนั้นเลือก "กำหนดเอง" เป็นใช่ รวมตัวเลือกทั้งหมดไว้ที่ศูนย์กลาง: ตำแหน่งแนวนอน ตำแหน่งแนวตั้ง และการจัดแนวข้อความ เลือกสีเนื้อหาของคุณด้วย โปรดทราบว่าสีเริ่มต้นของเนื้อหาคือสีขาว ดังนั้นหากคุณไม่เห็นข้อความของคุณ ให้แก้ไขสีเนื้อหา

คุณยังสามารถแก้ไข "สไตล์" ได้ภายใต้การแก้ไขสไลด์หลัก คุณสามารถปรับความกว้างของเนื้อหาสไลด์ได้ตามใจชอบ

ที่ควรจะเป็น! คุณจะสามารถดูข้อความที่เคลื่อนไหวได้หลังจากอัปเดต

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

public_html > เนื้อหา wp > ปลั๊กอิน > woocommerce > สินทรัพย์ > css > woocommerce.css
ดับเบิลคลิกที่โฟลเดอร์นั้นแล้วคุณจะเห็นโค้ดจำนวนมากถูกบีบเข้าด้วยกัน

มันถูกเขียนด้วยวิธีนี้เพื่อประหยัดพื้นที่ การใช้ “Ctrl+F” เพื่อค้นหาฟังก์ชันที่คุณต้องการอาจช่วยได้ เช่น. มองหา "woocommerce-cart" หากคุณต้องการแก้ไขบางอย่างในหน้าตะกร้าสินค้า

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

นี่คือรหัส CSS เพื่อลบภาพขนาดย่อของผลิตภัณฑ์จากหน้าตะกร้าสินค้า
.woocommerce-cart table.cart .product-ภาพขนาดย่อ {
แสดง: ไม่มี;
}
ไปที่ ลักษณะ > ปรับแต่ง > CSS เพิ่มเติม เพื่อป้อนโค้ด

นี่คือโค้ด CSS เพื่อเปลี่ยนสีสำหรับปุ่ม "ดำเนินการชำระเงิน" บนหน้ารถเข็นสำหรับ WooCommerce

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
พื้นหลังสี: #FFA62F;
สี: #FFFFFF;
}

นี่คือรหัส CSS เพื่อเปลี่ยนสีของเมาส์:
.woocommerce-cart .wc-proceed-to-checkout a:hover.checkout-button {
พื้นหลังสี: #4C4646;
สี: #FFFFFF;
}

คุณสามารถดูรหัสสี html ได้ที่นี่: https://www.computerhope.com/htmcolor.htm#:~:text=HTML%20color%20codes%20are%20hexadecimal,tables%20on%20a%20web%20page.
เพียงคัดลอกและวางสีที่คุณชอบไปยังทั้งโค้ดสีพื้นหลังและข้อความในโค้ด CSS

ไปที่ ลักษณะ > ปรับแต่ง > CSS เพิ่มเติม เพื่อป้อนโค้ด

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

เราสามารถเปลี่ยนสีของปุ่ม Add to Cart ด้วยโค้ด CSS ต่อไปนี้:
.single-product .product .single_add_to_cart_button.button {
พื้นหลังสี: #FFA62F;
สี: #FFFFFF;
}

คุณสามารถดูรหัสสี html ได้ที่นี่: https://www.computerhope.com/htmcolor.htm#:~:text=HTML%20color%20codes%20are%20hexadecimal,tables%20on%20a%20web%20page.
เพียงคัดลอกและวางสีที่คุณชอบไปยังทั้งโค้ดสีพื้นหลังและข้อความในโค้ด CSS

ไปที่ ลักษณะ > ปรับแต่ง > CSS เพิ่มเติม เพื่อป้อนโค้ด
เครดิตไปที่: https://quadlayers.com/customize-add-to-cart-button-woocommerce/ สำหรับการให้คำตอบที่เป็นมิตรกับคนธรรมดาที่สุดแก่เรา

นอกจากนี้เรายังพบโค้ดเพิ่มเติมที่จะเพิ่มเพื่อเปลี่ยนสีของปุ่มและข้อความเมื่อวางเมาส์:
.single-product .product :hover.single_add_to_cart_button.button {
พื้นหลังสี: #4C4646;
สี: #FFFFFF;
}

หากคุณกำลังขายผลิตภัณฑ์หรือบริการเสมือนจริง และไม่ต้องการให้ลูกค้าของคุณกรอกข้อมูลในช่องที่อยู่และที่อยู่สำหรับจัดส่งที่หน้าชำระเงิน คุณสามารถดำเนินการต่อไปนี้เพื่อลบช่องเหล่านี้ในหน้าชำระเงิน WooCommerce ของคุณ
ขั้นแรก เลื่อนเมาส์ไปที่ "Appearance" แล้วคลิก "Theme Editor"
คุณจะเห็นไฟล์ธีมของคุณ
เราขอแนะนำให้คุณมีธีมย่อยก่อนที่จะแก้ไขไฟล์ธีมของคุณ เนื่องจากเมื่อธีมของคุณได้รับการอัปเดต คุณอาจสูญเสียการแก้ไขของคุณ อย่างไรก็ตาม หากคุณมีธีมย่อย คุณสามารถเก็บการแก้ไขของคุณในธีมย่อยได้
ธีมส่วนใหญ่มาพร้อมกับธีมเด็ก หากไม่เป็นเช่นนั้น อาจถึงเวลาที่คุณจะเปลี่ยนไปใช้ธีมอื่นที่มีธีมลูก 🙂
ตอนนี้ ที่ด้านขวามือของมุมมองตัวแก้ไขธีม คุณจะเห็นไฟล์บางไฟล์ คลิกที่ “functions.php”
ที่ด้านล่างของหน้าต่างโค้ด ให้คัดลอกและวางสิ่งเหล่านี้:
unset( $fields['shipping']['shipping_company'] ); unset( $fields['shipping']['shipping_phone'] ); unset( $fields['shipping']['shipping_state'] ); unset( $fields['shipping']['shipping_first_name'] ); unset( $fields['shipping']['shipping_last_name'] ); unset( $fields['shipping']['shipping_address_1'] ); unset( $fields['shipping']['shipping_address_2'] ); unset( $fields['shipping']['shipping_city'] ); unset( $fields['shipping']['shipping_postcode'] );
add_filter( 'woocommerce_checkout_fields' , 'custom_checkout_fields' );
ฟังก์ชัน custom_checkout_fields ($fields) {
unset($fields['billing']['billing_postcode']);
unset( $fields['billing']['billing_address_1'] );
unset( $fields['billing']['billing_address_2'] );
unset( $fields['billing']['billing_city'] );
ส่งคืน $fields;
}
คุณจะต้องลบฟิลด์การจัดส่งทั้งหมดและฟิลด์การเรียกเก็บเงินบางส่วน
สิ่งที่เหลืออยู่ในฟิลด์การเรียกเก็บเงินจะเป็น:
ชื่อจริง
นามสกุล
ชื่อ บริษัท
ประเทศ
สถานะ (ฟิลด์นี้จะปรากฏหลังจากที่ลูกค้าของคุณเลือกประเทศแล้วเท่านั้น)
โทรศัพท์
ที่อยู่อีเมล
คุณอาจคิดว่าเหตุใดเราจึงควรคงช่องสำหรับ "ประเทศ" และ "รัฐ" ไว้ เนื่องจากคุณอาจไม่ต้องการช่องนี้ มี 2 เหตุผล:
เหตุผลทางเทคนิค: WooCommerce อาจแสดงข้อผิดพลาดหากเราลบประเทศ และถ้าเราไม่มีสถานะแต่มีประเทศ ก็จะมีข้อผิดพลาดเช่นกัน ดังนั้น ฟิลด์ประเทศจะต้องอยู่ที่นั่นพร้อมกับฟิลด์สถานะ
หากคุณกำลังขายผลิตภัณฑ์เสมือนเช่น ebook คุณควรได้รับข้อมูลของประเทศของลูกค้าเพื่อวัตถุประสงค์ทางการตลาดในอนาคต

เมื่อเร็ว ๆ นี้ลูกค้าของฉันประสบปัญหาดังกล่าว เขาไม่สามารถลงชื่อเข้าใช้แดชบอร์ดผู้ดูแลระบบได้ และหน้าจอแสดง "ขออภัย คุณไม่ได้รับอนุญาตให้เข้าถึงหน้านี้" เราสามารถจินตนาการถึงความตื่นตระหนกได้ โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการปฏิบัติตามคำสั่งแบ็คเอนด์
ในขณะที่ช่วยเขาแก้ไขปัญหานี้ ฉันพบเว็บไซต์จำนวนมากที่มีวิธีแก้ปัญหาที่คล้ายกัน ตัวอย่างที่ดีอย่างหนึ่งคือ: https://kinsta.com/knowledgebase/sorry-you-are-not-allowed-to-access-this-page-error-in-wordpress/

บางเว็บไซต์มี 10 วิธี ในขณะที่บางเว็บไซต์มี 7 วิธี ส่วนใหญ่คล้ายกัน ฉันพยายามทำทุกวิถีทางแล้ว แต่ก็ไม่มีอะไรทำงาน
ฉันดีใจมากเมื่อเห็นโซลูชันอื่นในฟอรัม:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-sorry-you-are-not-allowed-to-access-this-page-error-in-wordpress/
ค้นหาคำตอบจากผู้ใช้รายนี้: เพรดรีด123
วิธีแก้ปัญหานั้นเป็นอัญมณี มันได้ผล!

และสมควรได้รับความสนใจมากกว่านี้ ไม่ใช่ซ่อนคำถามและคำตอบมากมาย ดังนั้นนี่คือ:
—
เพรดรีด123
(@padreed123)
2 ปี 10 เดือนที่แล้ว
ตกลงหลังจากตรวจสอบตาราง wp_options ใน phpmyadmin นับไม่ถ้วนในที่สุดฉันก็ค้นพบปัญหา แถว wp_user_role ถูกลบไปแล้ว นอกจากนี้ยังสามารถเกิดขึ้นได้หากมีการแก้ไข/เปลี่ยนแปลงโดยปลั๊กอิน เช่น WooCommerce
ดังนั้นเพื่อแก้ไข ฉันคัดลอกสิ่งต่อไปนี้จากการติดตั้งใหม่และใส่ลงในตาราง wp_options ด้วย phpmyadmin:
อย่าลืมแทนที่ 'wp_' ด้วยคำนำหน้าฐานข้อมูลของคุณ
option_name
wp_user_role
option_value
a:5:{s:13:"ผู้ดูแลระบบ";a:2:{s:4:"ชื่อ";s:13:"ผู้ดูแลระบบ";s:12:"ความสามารถ";a:61:{s:13 :”switch_themes”;b:1;s:11:”edit_themes”;b:1;s:16:”activate_plugins”;b:1;s:12:”edit_plugins”;b:1;s:10:” edit_users”;b:1;s:10:”edit_files”;b:1;s:14:”manage_options”;b:1;s:17:”moderate_comments”;b:1;s:17:”manage_categories” ;b:1;s:12:”manage_links”;b:1;s:12:”upload_files”;b:1;s:6:”import”;b:1;s:15:”unfiltered_html”;b :1;s:10:”edit_posts”;b:1;s:17:”edit_others_posts”;b:1;s:20:”edit_published_posts”;b:1;s:13:”publish_posts”;b:1 ;s:10:”edit_pages”;b:1;s:4:”read”;b:1;s:8:”level_10″;b:1;s:7:”level_9″;b:1;s :7:”level_8″;b:1;s:7:”level_7″;b:1;s:7:”level_6″;b:1;s:7:”level_5″;b:1;s:7 :”level_4″;b:1;s:7:”level_3″;b:1;s:7:”level_2″;b:1;s:7:”level_1″;b:1;s:7:” level_0″;b:1;s:17:”edit_others_pages”;b:1;s:20:”edit_published_pages”;b:1;s:13:”publish_pages”;b:1;s:12:”delete_pages” ;b:1;s:19:”delete_others_pages”;b:1;s:22:”delete_published_pages”;b:1;s:12:”delete_posts”;b:1;s:19:”delete_others_posts”;b :1;s:22:”delete_publ ished_posts”;b:1;s:20:”delete_private_posts”;b:1;s:18:”edit_private_posts”;b:1;s:18:”read_private_posts”;b:1;s:20:”delete_private_pages” ;b:1;s:18:”edit_private_pages”;b:1;s:18:”read_private_pages”;b:1;s:12:”delete_users”;b:1;s:12:”create_users”;b :1;s:17:”unfiltered_upload”;b:1;s:14:”edit_dashboard”;b:1;s:14:”update_plugins”;b:1;s:14:”delete_plugins”;b:1 ;s:15:”install_plugins”;b:1;s:13:”update_themes”;b:1;s:14:”install_themes”;b:1;s:11:”update_core”;b:1;s :10:”list_users”;b:1;s:12:”remove_users”;b:1;s:13:”promote_users”;b:1;s:18:”edit_theme_options”;b:1;s:13 :”delete_themes”;b:1;s:6:”ส่งออก”;b:1;}}s:6:”ตัวแก้ไข”;a:2:{s:4:”ชื่อ”;s:6:”ตัวแก้ไข ”;s:12:”ความสามารถ”;a:34:{s:17:”moderate_comments”;b:1;s:17:”manage_categories”;b:1;s:12:”manage_links”;b:1 ;s:12:”upload_files”;b:1;s:15:”unfiltered_html”;b:1;s:10:”edit_posts”;b:1;s:17:”edit_others_posts”;b:1;s :20:”edit_published_posts”;b:1;s:13:”publish_posts”;b:1;s:10:”edit_pages”;b:1;s:4:”read”;b:1;s:7 :”level_7″;b:1;s:7:”level_6″;b:1;s:7:”level_5″;b: 1;s:7:”level_4″;b:1;s:7:”level_3″;b:1;s:7:”level_2″;b:1;s:7:”level_1″;b:1; s:7:”level_0″;b:1;s:17:”edit_others_pages”;b:1;s:20:”edit_published_pages”;b:1;s:13:”publish_pages”;b:1;s: 12:”delete_pages”;b:1;s:19:”delete_others_pages”;b:1;s:22:”delete_published_pages”;b:1;s:12:”delete_posts”;b:1;s:19: ”delete_others_posts”;b:1;s:22:”delete_published_posts”;b:1;s:20:”delete_private_posts”;b:1;s:18:”edit_private_posts”;b:1;s:18:”read_private_posts ”;b:1;s:20:”delete_private_pages”;b:1;s:18:”edit_private_pages”;b:1;s:18:”read_private_pages”;b:1;}}s:6:”ผู้เขียน ”;a:2:{s:4:”ชื่อ”;s:6:”ผู้เขียน”;s:12:”ความสามารถ”;a:10:{s:12:”upload_files”;b:1;s: 10:”edit_posts”;b:1;s:20:”edit_published_posts”;b:1;s:13:”publish_posts”;b:1;s:4:”read”;b:1;s:7: ”level_2″;b:1;s:7:”level_1″;b:1;s:7:”level_0″;b:1;s:12:”delete_posts”;b:1;s:22:”delete_published_posts ”;b:1;}}s:11:”ผู้ร่วมให้ข้อมูล”;a:2:{s:4:”ชื่อ”;s:11:”ผู้ร่วมให้ข้อมูล”;s:12:”ความสามารถ”;a:5:{ s:10:”edit_posts”;b:1;s:4:”read”;b:1;s:7:”level_1″;b:1;s:7:”level_0″;b:1;s: 12:” delete_posts”;b:1;}}s:10:”สมาชิก”;a:2:{s:4:”ชื่อ”;s:10:”สมาชิก”;s:12:”ความสามารถ”;a:2: {s:4:”read”;b:1;s:7:”level_0″;b:1;}}}

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

ตอนนี้เรามีปัญหาอื่นหลังจากที่เราจัดการการเข้าสู่ระบบ เราพบว่าฐานข้อมูล WooCommerce ของเราหายไปหมดแล้ว! กดปุ่มตกใจอีกครั้ง และกลับสู่โหมดแก้ไขปัญหา
หลังจากซ่อมแซมฐานข้อมูลเล็กน้อย ฉันก็หาทางออกได้

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

ฉันเชื่อว่าความยุ่งเหยิงของฐานข้อมูลนี้เกิดขึ้นหลังจากที่เราย้ายเว็บไซต์จาก Bluehost ไปยัง Siteground

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

ไปที่ตัวจัดการไฟล์ของคุณที่ฝั่งเซิร์ฟเวอร์

คลิกที่โฟลเดอร์ต่อไปนี้ในตัวจัดการไฟล์:
public_html > wp-content > ปลั๊กอิน > woocommerce

ดับเบิลคลิกที่ woocommerce.php เพื่อแก้ไข
เลื่อนไปจนสุดทางจนสุดของเอดิเตอร์และคลิกที่บรรทัดว่าง

คัดลอกและวางรหัสต่อไปนี้:

add_action( 'woocommerce_after_shop_loop_item', 'remove_add_to_cart_buttons', 1 ); ฟังก์ชัน remove_add_to_cart_buttons() { if( is_product_category() || is_shop()) { remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_ template_loop_add_to_cart' ); } }