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

แบ่งปันโพสต์นี้

ตอบคำถามเกี่ยวกับ WooCommerce ด้วยการตั้งค่าเว็บไซต์ Elementor

คุณยังสามารถสำรวจของเรา เว็บไซต์ดีไซด์บริการ gn (WooCommerce พร้อม Elementor) และ การฝึกสอนการออกแบบเว็บไซต์ บริการ.

woocommerce กับ elementor

วิธีเปลี่ยนรูปลักษณ์ของ WooCommerce ด้วยหน้าหมวดหมู่ 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

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

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

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

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

วิธีตรึงส่วนหัวเว็บไซต์ของคุณโดยใช้ Elementor Editor

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

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

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

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

วิธีสร้าง Hover Effects บน WooCommerce ด้วย Elementor Editor

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

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

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

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

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

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

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

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

วิธีสร้างลิงค์ให้ไปกลางหน้า

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

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

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

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

ความแตกต่างระหว่าง Margin และ Padding ใน Elementor

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

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

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

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

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

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

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

วิธีสร้างแบนเนอร์แบบเต็มความกว้างโดยใช้ Elementor

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

เพิ่มมาตรา

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วิธีสร้างข้อความวิ่งบน WooCommerce ด้วย Elementor Site Builder

ตัวสร้างไซต์ 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 จากนั้นเลือก "กำหนดเอง" เป็นใช่ รวมตัวเลือกทั้งหมดไว้ที่ศูนย์กลาง: ตำแหน่งแนวนอน ตำแหน่งแนวตั้ง และการจัดแนวข้อความ เลือกสีเนื้อหาของคุณด้วย โปรดทราบว่าสีเริ่มต้นของเนื้อหาคือสีขาว ดังนั้นหากคุณไม่เห็นข้อความของคุณ ให้แก้ไขสีเนื้อหา

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

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

จะหารหัสอ้างอิง WooCommerce CSS ได้ที่ไหน

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

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 เพิ่มลงในตะกร้าสินค้า ปุ่มสี Button

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 สำหรับผลิตภัณฑ์หรือบริการเสมือนจริง

หากคุณกำลังขายผลิตภัณฑ์หรือบริการเสมือนจริง และไม่ต้องการให้ลูกค้าของคุณกรอกข้อมูลในช่องที่อยู่และที่อยู่สำหรับจัดส่งที่หน้าชำระเงิน คุณสามารถดำเนินการต่อไปนี้เพื่อลบช่องเหล่านี้ในหน้าชำระเงิน 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 คุณควรได้รับข้อมูลของประเทศของลูกค้าเพื่อวัตถุประสงค์ทางการตลาดในอนาคต

วิธีแก้ไข “ขออภัย คุณไม่ได้รับอนุญาตให้เข้าถึงหน้านี้” ในการเข้าสู่ระบบผู้ดูแลระบบ WordPress

เมื่อเร็ว ๆ นี้ลูกค้าของฉันประสบปัญหาดังกล่าว เขาไม่สามารถลงชื่อเข้าใช้แดชบอร์ดผู้ดูแลระบบได้ และหน้าจอแสดง "ขออภัย คุณไม่ได้รับอนุญาตให้เข้าถึงหน้านี้" เราสามารถจินตนาการถึงความตื่นตระหนกได้ โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการปฏิบัติตามคำสั่งแบ็คเอนด์
ในขณะที่ช่วยเขาแก้ไขปัญหานี้ ฉันพบเว็บไซต์จำนวนมากที่มีวิธีแก้ปัญหาที่คล้ายกัน ตัวอย่างที่ดีอย่างหนึ่งคือ: 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

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

วิธีลบปุ่มเพิ่มลงในรถเข็นในหน้าหมวดหมู่ WooCommerce

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

คลิกที่โฟลเดอร์ต่อไปนี้ในตัวจัดการไฟล์:
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' ); } }

วิธีสร้างเว็บไซต์การชำระเงินอย่างง่ายสำหรับธุรกิจขนาดเล็กในสิงคโปร์

สวัสดี ฉันจะแสดงวิธีสร้างเว็บไซต์การชำระเงินแบบง่ายๆ สำหรับธุรกิจขนาดเล็กด้วย HitPay HitPay คือการชำระเงินที่ได้รับการรับรองจาก MAS ในสิงคโปร์

อ่านเพิ่มเติม "
ในปี 2022 Elementor ได้เปิดตัวโซลูชันโฮสติ้ง WordPress อย่างเป็นทางการที่รวมทุกสิ่งที่จำเป็นในการสร้างเว็บไซต์ WordPress: Managed Hosting + Elementor Pro Builder + Theme จนถึงปัจจุบัน เป็นโซลูชันเดียวที่ผสมผสานระหว่างโฮสติ้งอิสระและเครื่องมือสร้างเว็บไซต์ ซึ่งหมายความว่า คุณยังสามารถเปลี่ยนผู้ให้บริการโฮสติ้งได้ตลอดเวลาและเก็บโปรแกรมสร้างเว็บ Elementor ของคุณผ่านปลั๊กอิน

อธิบาย Elementor Hosting และเหตุใดจึงเป็น Game Changer

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

อ่านเพิ่มเติม "
วิธีเพิ่มการแก้ไขล่วงหน้าในใบแจ้งหนี้ WooCommerce

วิธีเพิ่มการแก้ไขล่วงหน้าในใบแจ้งหนี้ WooCommerce

วิธีเพิ่มการแก้ไขล่วงหน้าในใบแจ้งหนี้ WooCommerce หากคุณต้องการปรับแต่งการแสดงหมายเลขใบแจ้งหนี้ของคุณ คุณสามารถใช้ปลั๊กอินฟรีนี้ได้โดย

อ่านเพิ่มเติม "
จะทำอย่างไรเมื่อเว็บไซต์ของคุณถูกปิดหลังจากอัพเดต Elementor

จะทำอย่างไรเมื่อเว็บไซต์ของคุณถูกปิดหลังจากอัพเดต Elementor

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

อ่านเพิ่มเติม "
วิธีการให้คูปองส่วนลดอัตโนมัติให้กับลูกค้าที่ชำระเงินด้วย PayNow

วิธีการให้คูปองส่วนลดอัตโนมัติให้กับลูกค้าที่ชำระเงินด้วย PayNow

คุณต้องการให้รางวัลแก่ลูกค้าของคุณสำหรับการจ่ายเงินด้วย PayNow หรือไม่? ใช้โค้ดด้านล่างเพื่อป้อนภายใต้ Theme Editor > Functions.php เพื่อสร้าง

อ่านเพิ่มเติม "

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

ตอบคำถามเกี่ยวกับ WooCommerce ด้วยการตั้งค่าเว็บไซต์ Elementor คุณยังสามารถสำรวจบริการออกแบบเว็บไซต์ของเรา (WooCommerce with Elementor) และบริการฝึกสอนการออกแบบเว็บไซต์

อ่านเพิ่มเติม "

—อยู่ในวง —

รับการอัปเดตล่าสุดของคุณเกี่ยวกับเนื้อหาอีคอมเมิร์ซ / Roblox / Solopreneurship

×

สวัสดี!

คลิกตัวแทนของเราด้านล่างเพื่อแชท WhatsApp หรือส่งอีเมลถึงเรา adaleow@runaway.com.sg

× ฉันจะช่วยคุณได้อย่างไร?