เราขอขอบคุณ APAC Insider ที่ยกย่องให้ Runaway Digital Solutions เป็น "ผู้ให้บริการทรัพยากรอีคอมเมิร์ซที่ดีที่สุด - เอเชียตะวันออกเฉียงใต้" ในงาน Singapore Business Awards ปี 2021 - 2023

Top 15 WooCommerce with Elementor Popular FAQs

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

Answering questions about WooCommerce with Elementor website setup.

You may also explore our Website Design Service (WooCommerce with Elementor) and Website Design Coaching Service.

woocommerce with elementor

How to Change the Look and Feel of WooCommerce with Elementor Category Page

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

First, go to Theme Builder under Templates in Elementor Pro and select “Products Archive”. You will then enter the Elementor Editor page where you may now set in the layout for all your Product Categories and Sub categories.

You will notice some Elements that appear at your sidebar specific to such a page. These Elements are: “Archive Title”, “Archive Products” and “Archive Description”. The word “Archive” here may be interchanged with the word “Category”. So, naturally for such a page we will need to put in a Title field, a Category description field as well as products under the categories.
These are the standard elements we will need for Product Category layout.

The “Archive Description” would be data that will be pulled from Products Categories Description.

When you pull in the “Archive Products” element, you will notice that the sub categories of parent categories automatically appear. If you only wish to see only products here, you may adjust the settings somewhere else:
Get out of the Elementor Editor (or simply just open a new tab to access your website backend WordPress Dashboard). Mouse over “Appearance” and click on “Customize”, then click on “WooCommerce”. Then, click on “Product Catalog”. Under “Category Display”, select “Show Products”.

You may also set how you like your products to be sorted, how many products per row and how many rows per page. Once done, save this setting and return to the Elementor Editor for Products Archive.

ตอนนี้ การแสดงผลิตภัณฑ์ของคุณควรปรากฏโดยไม่มีรูปภาพหมวดหมู่ย่อย หากคุณต้องการแสดงหมวดหมู่ย่อยของคุณในแถวอื่น (อาจอยู่ด้านบนของผลิตภัณฑ์) ให้ทำดังต่อไปนี้:
Look for the element “Product Categories” at the Elementor Editor sidebar. Drag this element to the editor page. Under “Query” > “Source”, select “Current Subcategories”. This means that the editor will automatically pull its sub categories over, even if you add more in at a later stage. If you do not see images for your sub categories, do make sure that you have uploaded a representative image for each category at the “Products Category” editor at your website backend.

วิธีสร้างภาพหมุนผลิตภัณฑ์แบบเลื่อนโดยใช้ 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 เมื่อคุณเลื่อนลง หากคุณไม่ต้องการเห็นช่องว่างระหว่างด้านบนและส่วนที่เลือกติดหนึบของคุณ (ซึ่งเป็นกรณีปกติ) คุณก็ไม่ต้องสนใจการตั้งค่าออฟเซ็ต

How to create Hover Effects on WooCommerce with 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

If you try to use the Image Element to create a full width banner, you may will still end up with a frustrating white border. Your image does not stretch across the screen like you would want it to be. To create a banner that stretches across the screen, follow this trick:

เพิ่มมาตรา

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

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

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

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

Other areas to check if you still do not achieve full width banner:

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

Click on the content (example a text box) and you see Edit Text Editor appearing on left column.

Go to Advanced and find Position. Inside Position you will see an option “Width”, change it to “Full Width (100%)”.

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

If you are editing a Page and can’t seem to get that page to stretch to full width, go to Edit Page.

DO NOT click on the blue button that says Edit with Elementor.

Instead, look to your right sidebar, make sure “Page” is selected instead of “Block” at the top of your right sidebar. Scroll down to see an option called “Page Attributes”, and click on it.

Under “Template” change to “Elementor Full Width”. Save it.

If you have done all of the above, your banner should be totally full width.

How to Create Running Texts on WooCommerce with Elementor Site Builder

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

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

เลื่อนลงมาที่ตัวเลือก 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-content > plugins > woocommerce > assets > css > woocommerce.css
Double click on that folder and you will see a massive chunk of code squeezed together.

It was written this way to save space. It may help to use “Ctrl+F” to find the right functions you need. Eg. look for “woocommerce-cart” if you need to edit something on cart page.

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

ลบภาพขนาดย่อของผลิตภัณฑ์ในหน้ารถเข็น

นี่คือรหัส CSS เพื่อลบภาพขนาดย่อของผลิตภัณฑ์จากหน้าตะกร้าสินค้า
.woocommerce-cart table.cart .product-ภาพขนาดย่อ {
แสดง: ไม่มี;
}
Go to Appearance > Customize > Additional CSS to input the code.

ปรับแต่งปุ่มชำระเงินในหน้ารถเข็น

นี่คือโค้ด 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

Go to Appearance > Customize > Additional CSS to input the code.

เปลี่ยน 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

Go to Appearance > Customize > Additional CSS to input the code.
เครดิตไปที่: https://quadlayers.com/customize-add-to-cart-button-woocommerce/ สำหรับการให้คำตอบที่เป็นมิตรกับคนธรรมดาที่สุดแก่เรา

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

How to remove fields at WooCommerce checkout page for virtual products or services

If you are selling virtual products or services; and do not require your clients to fill in their address fields and shipping address at the checkout page, you can do the following to remove these fields on your WooCommerce checkout page.
First, mouse over “Appearance” and click on “Theme Editor”.
You will see your theme files.
We recommend you have a child theme before editing your theme files, because when your theme gets updated you may lose your edits. However, if you have a child theme, you can retain your edits on the child theme.
Most themes do come with child themes. If they don’t perhaps it’s time for you to switch to another with a child theme. 🙂
Now, at the right hand side of your theme editor view, you can see a few files. Click on “functions.php”.
At the bottom of the code window, copy and paste these:
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’ );
function 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’] );
return $fields;
}
You would have removed all shipping fields, and some of the billing fields.
What’s left in billing fields would be:
First Name
Last Name
Company Name
Country
State (This fields only appears after your client has selected a country)
Phone
Email address
You may be thinking why we should retain the field for “Country” and “State” as you may not need this. There are 2 reasons:
Technical reason: WooCommerce may show up error if we remove country, and if we do not have state but have country, there will also be an error. So, the country field must be there, with the state field.
If you are selling a virtual product like an ebook, it makes sense to get information of your client’s country for future marketing purposes.

How to Fix “Sorry, You Are Not Allowed to Access This Page” in WordPress Admin Login

Recently my client experienced such a problem. He was unable to log into his admin dashboard, and the screen displayed “Sorry, You Are Not Allowed to Access This Page”. One can imagine the panic, especially when you need to fulfill backend orders.
While helping him to troubleshoot this problem, I came across many websites with similar solutions. One good example would be this: https://kinsta.com/knowledgebase/sorry-you-are-not-allowed-to-access-this-page-error-in-wordpress/

Some websites offer 10 ways while others 7 ways. They are mostly similar. I tried everything possible, and nothing worked.
I was so glad when I saw a different solution in a forum:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-sorry-you-are-not-allowed-to-access-this-page-error-in-wordpress/
Look for the answer by this user: padreed123
That solution was such a gem. It worked!

And it deserves more limelight, not hidden in a multitude of questions and answers. So here goes:

padreed123
(@padreed123)
2 years, 10 months ago
Ok after countless hours of examining wp_options tables in phpmyadmin I finally discovered the problem. Somehow the wp_user_role row got deleted. It can also happen if it is edited/changed by a plugin such as WooCommerce.
So to fix it I copied the following from a fresh install and inserted it into the wp_options table with phpmyadmin:
Remember to replace ‘wp_’ with your db prefix.
option_name
wp_user_role
option_value
a:5:{s:13:”administrator”;a:2:{s:4:”name”;s:13:”Administrator”;s:12:”capabilities”;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_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: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:”export”;b:1;}}s:6:”editor”;a:2:{s:4:”name”;s:6:”Editor”;s:12:”capabilities”;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:”author”;a:2:{s:4:”name”;s:6:”Author”;s:12:”capabilities”;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:”contributor”;a:2:{s:4:”name”;s:11:”Contributor”;s:12:”capabilities”;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:”subscriber”;a:2:{s:4:”name”;s:10:”Subscriber”;s:12:”capabilities”;a:2:{s:4:”read”;b:1;s:7:”level_0″;b:1;}}}

Feel free to contact me if you are unsure about this part as it requires you to access your database at server side. I’ll be more than happy to guide you through the entire process.

Now, we have another problem after we managed to login. We realised all our WooCommerce database were gone! Pressed the panic button again, and back to troubleshooting mode.
After tinkering a little around the database, I managed to find the solution.

I realised that option names in the wp_options table for WooCommerce are not consistent. Some used wp_ as prefix while some used vbx_ as prefix. As our database uses vbx_ as our prefix, I changed all wp_ to vbx_, and our WooCommerce database is back. Phew!
Reflection: Why did this happen?

I believe this database mess happened after we migrated the website from Bluehost to Siteground.

I’m glad the website is running well now. 🙂
If you are in a similar situation and have some problems troubleshooting, or are unsure about how to access or edit your database, feel free to contact me.

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

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

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

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

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

add_action( ‘woocommerce_after_shop_loop_item’, ‘remove_add_to_cart_buttons’, 1 ); function remove_add_to_cart_buttons() { if( is_product_category() || is_shop()) { remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’ ); } }

ผู้เขียน

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

สำรวจเพิ่มเติม

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

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

วิธีช่วย SME ค้าปลีกในท้องถิ่นขับเคลื่อนการเปลี่ยนแปลงทางดิจิทัลหลัง Covid-19

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

คู่มือฉบับสมบูรณ์เกี่ยวกับการละเมิดบน TikTok Shop Singapore

คุณวางแผนที่จะนำผลิตภัณฑ์เข้ามาขายบน TikTok Shop หรือไม่? หากเป็นเช่นนั้น โปรดอ่านคำแนะนำฉบับสมบูรณ์เกี่ยวกับการละเมิด

คู่มือฉบับสมบูรณ์ในการตั้งค่า TikTok Shop สำหรับบริษัทของคุณ

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

ประเด็นสำคัญจากงาน ECommerce Expo 2022

นี่คือบทสรุปของประเด็นสำคัญบางส่วนจากงาน eCommerce Expo 2022 เพื่อประโยชน์สำหรับผู้ที่ไม่สามารถเข้าร่วมได้

Genexus สำหรับการพัฒนาซอฟต์แวร์และแอพพลิเคชั่น

คุณต้องสร้างโซลูชันหรือเวิร์กโฟลว์แบบกำหนดเองสำหรับธุรกิจของคุณหรือไม่? ตัวอย่าง: การอัปเดตสินค้าคงคลังตามเวลาจริงไปยังฝ่ายจัดซื้อ/ฝ่ายผลิต หรือ

Lazada Livestream 1: วิธีการดูเหมือนผู้ขายมืออาชีพด้วยร้านค้าที่เปล่งประกาย

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

คำแนะนำที่ครอบคลุมที่สุดในการตั้งค่าร้านค้าลาซาด้าปี 2022

คู่มือนี้มีไว้สำหรับคุณหากคุณต้องการตั้งค่าร้านค้าลาซาด้าของคุณเองสำหรับธุรกิจอีคอมเมิร์ซของคุณ บางทีสิ่งหนึ่งที่น่าผิดหวังเกี่ยวกับ

×

สวัสดี!

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

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