ในการเปลี่ยนสีของปุ่ม WooCommerce เราจำเป็นต้องเปลี่ยนหรือแทนที่ไฟล์ style.css เริ่มต้นของปุ่ม ในการดำเนินการนี้เราจะต้องเพิ่มไฟล์ รหัส CSS ที่กำหนดเอง ถึงเรา ธีม WordPress ของเด็ก ๆ.
มีสองวิธีในการดำเนินการนี้:
- เพิ่ม CSS ที่กำหนดเองไปยังไฟล์ child style style.css
- ใช้ปลั๊กอินเพื่อฉีดโค้ด CSS ที่กำหนดเองลงในหน้าเว็บของคุณ
ขั้นตอนที่ 1: ติดตั้งปลั๊กอินบน WordPress CSS ที่กำหนดเองที่เรียบง่ายและเปิดใช้งานได้
เราจะใช้ a WordPress ปลั๊กอิน เพื่อฉีดโค้ด CSS ลงในหน้าของa WooCommerce Online Shop. คุณสามารถดาวน์โหลดปลั๊กอิน: CSS ที่กำหนดเองง่าย
คุณสามารถอ่านบทแนะนำของเราได้ที่ การติดตั้งและเปิดใช้งานปลั๊กอิน WordPress.
หลังจากเปิดใช้งานปลั๊กอินแล้วเมนูย่อยใหม่จะถูกเพิ่มลงในเมนู apparence :
การเข้าถึงส่วนนี้จะนำคุณไปสู่อินเทอร์เฟซที่มีกล่องข้อความซึ่งคุณสามารถป้อนโค้ด CSS ที่กำหนดเองได้
ใส่ CSS ต่อไปนี้ในกล่องข้อความแล้วคลิกที่ " ปรับปรุง CSS ที่กำหนดเอง".
.woocommerce #content input.button.alt: เลื่อน .woocommerce #respond อินพุต # submit.alt: เลื่อน .woocommerce a.button.alt: เลื่อน .woocommerce button.button.alt: เลื่อน .woocommerce input.button Alt: เลื่อน input.button.alt #content .woocommerce หน้า: โฉบเข้า .woocommerce หน้า #respond # submit.alt: เลื่อน a.button.alt .woocommerce หน้า: เลื่อนปุ่ม .woocommerce หน้า button.alt: เลื่อน input.button.alt .woocommerce หน้า: โฉบ {พื้นหลัง: ที่สำคัญสีแดง; สีพื้นหลัง: สีแดงที่สำคัญ ! สี: สีขาวที่สำคัญ ข้อความเงา: โปร่งใสที่สำคัญ กล่องเงา: none; ชายแดนสี: #ca0606 สำคัญ } .woocommerce #content Input.button: เลื่อน .woocommerce #respond อินพุต # ส่ง: เลื่อน .woocommerce a.button: เลื่อน .woocommerce button.button: เลื่อน .woocommerce input.button: เลื่อน .woocommerce หน้า # มีความสุข input.button: โฉบเข้า .woocommerce หน้า #respond # ส่ง: เลื่อน a.button .woocommerce หน้า: เลื่อน button.button .woocommerce หน้า: เลื่อน input.button .woocommerce หน้า: โฉบ {พื้นหลัง : สีแดงที่สำคัญ สีพื้นหลัง: สีแดงที่สำคัญ ! สี: สีขาวที่สำคัญ ข้อความเงา: โปร่งใสที่สำคัญ กล่องเงา: none; ชายแดนสี: #ca0606 สำคัญ } .woocommerce #content Input.button, .woocommerce #respond อินพุต # ส่ง a.button .woocommerce, .woocommerce button.button, .woocommerce input.button, input.button #content .woocommerce หน้า .woocommerce หน้า # # ส่งอินพุตตอบ a.button .woocommerce หน้า button.button .woocommerce หน้า input.button .woocommerce หน้า {พื้นหลัง: ที่สำคัญสีแดง; ! สี: สีขาวที่สำคัญ ข้อความเงา: โปร่งใสที่สำคัญ ชายแดนสี: #ca0606 สำคัญ } .woocommerce #content Input.button.alt: เลื่อน .woocommerce #respond อินพุต # submit.alt: เลื่อน .woocommerce a.button.alt: เลื่อน .woocommerce button.button.alt: เลื่อน .woocommerce input.button .alt: เลื่อน input.button.alt #content .woocommerce หน้า: โฉบเข้า .woocommerce หน้า #respond # submit.alt: เลื่อน a.button.alt .woocommerce หน้า: เลื่อนปุ่ม .woocommerce หน้า .button.alt: เลื่อน input.button.alt .woocommerce หน้า: โฉบ {พื้นหลัง: ที่สำคัญสีแดง; กล่องเงา: none; ข้อความเงา: โปร่งใสที่สำคัญ ! สี: สีขาวที่สำคัญ ชายแดนสี: #ca0606 สำคัญ }
ตอนนี้คุณสามารถเข้าถึงร้านค้าออนไลน์ของคุณแล้วคุณจะสังเกตเห็นว่าปุ่มเปลี่ยนสีจริง
ในการปรับแต่งสีของปุ่มเพื่อให้ได้รูปลักษณ์ที่คุณต้องการในที่สุด
แทนที่ทรัพย์สิน " ภูมิหลัง: สีแดงที่สำคัญ! โดย สีที่คุณเลือก. อัปเดตรหัสและเข้าถึงร้านค้าออนไลน์ของคุณอีกครั้ง ในความเป็นจริงการใช้รูปแบบที่เราเพิ่งจัดเตรียมไว้ให้คุณคุณจะสามารถเปลี่ยนโครงสร้างของปุ่มได้อย่างสมบูรณ์
ด้วยการค้นคว้าเพียงเล็กน้อย คุณจะสามารถสร้างปุ่มที่ไม่เหมือนใครด้วยสไตล์ที่ตรงกับของคุณ ธีม WordPress (โดยเฉพาะอย่างยิ่งหากไม่สามารถใช้งานได้กับ WooCommerce).
สำหรับตัวอย่างต่อไปนี้คุณสามารถใช้โค้ด CSS ต่อไปนี้
.woocommerce #content input.button, .woocommerce #respond อินพุต # ส่ง a.button .woocommerce, .woocommerce button.button, .woocommerce input.button, input.button #content .woocommerce หน้า #respond .woocommerce หน้า # ส่งป้อนข้อมูล a.button .woocommerce หน้า button.button .woocommerce หน้า input.button .woocommerce หน้า {สีพื้นหลัง: #6fba26; padding: 10px; ตำแหน่ง: ญาติ; font-family: 'Open Sans' ซอง-serif; font-size: 12px; ตกแต่งข้อความ: none; สี: # fff; ภาพพื้นหลัง: เส้นลาด (ล่าง rgb (100,170,30) 0% rgb (129,212,51) 100%); กล่องเงา: ภาพประกอบ 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; border-radius: 5px; } .woocommerce #content input.button.alt: เลื่อน .woocommerce #respond อินพุต # submit.alt: เลื่อน .woocommerce a.button.alt: เลื่อน .woocommerce button.button.alt: เลื่อน .woocommerce input.button .alt: เลื่อน input.button.alt #content .woocommerce หน้า: โฉบเข้า .woocommerce หน้า #respond # submit.alt: เลื่อน a.button.alt .woocommerce หน้า: เลื่อนปุ่ม .woocommerce หน้า .button.alt: เลื่อน input.button.alt .woocommerce หน้า: โฉบ {ด้านบน: 7px; ภาพพื้นหลัง: เส้นลาด (ล่าง rgb (100,170,30) 100% rgb (129,212,51) 0%); กล่องเงา: ภาพประกอบ 0px 1px 0px #0D496F สอด 0px -1px 0px #0D496F; สี: สี #156785, ข้อความเงา: 0px 1px 1px RGBA (255,255,255,0.3); พื้นหลัง: rgb (44,160,202); }
สำหรับผู้ที่ต้องการเพิ่มประสิทธิภาพการทำงานของร้านค้าออนไลน์ของพวกเขาไม่ว่าจะในแง่ของการแปลงหรือการขายผลิตภัณฑ์
เรายังมีปลั๊กอิน WordPress 3 พรีเมี่ยมที่ออกแบบมาสำหรับงานนี้
1 WooCommerce กู้คืนรถเข็นที่ถูกละทิ้ง
ลูกค้าของคุณ มักจะเติมตะกร้าของพวกเขาและปล่อยพวกเขา: ขอบคุณ WooCommerce กู้คืนรถเข็นที่ถูกทอดทิ้ง คุณจะสามารถติดต่อพวกเขาเตือนพวกเขาถึงสิ่งที่พวกเขาซื้อและเชิญพวกเขาให้ดำเนินการให้เสร็จสิ้น
กำหนดช่วงเวลาระหว่างเวลาที่รถเข็นละทิ้งและเมื่ออีเมลแจ้งเตือนส่วนบุคคลถูกส่งไปยังลูกค้าของคุณพร้อมลิงก์โดยตรงไปยังหน้าการซื้อเพื่อให้พวกเขาเห็นว่าพวกเขาอยู่บนอะไร ชี้ให้ซื้อ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
2. WooCommerce ซ่อนราคา & ปลั๊กอินปุ่มเพิ่มในรถเข็น
ปลั๊กอิน WooCommerce ซ่อนราคาช่วยให้ร้านค้าสามารถสร้างกฎหลายข้อเพื่อซ่อนราคาหรือซ่อนปุ่ม "เพิ่มลงในรถเข็น" จากลูกค้าที่ไม่ได้เข้าสู่ระบบหรือผู้ใช้ที่มีสิทธิ์ในการเข้าถึงเว็บไซต์อีคอมเมิร์ซของคุณ
คุณสามารถซ่อนราคาและปุ่ม "หยิบใส่ตะกร้า" บนสินค้าบางประเภทหรือในหมวดหมู่เฉพาะได้ คุณสามารถแทนที่ด้วยข้อความที่กำหนดเองหรือปุ่มที่จะนำพวกเขาไปที่ แบบฟอร์มติดต่อ. คุณสามารถสร้างกฎได้มากเท่าที่จะซ่อนราคาและ " เพิ่มใน panier” ขึ้นอยู่กับสิ่งที่คุณต้องการ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
3 WooCommerce Currency Switcher
ปลั๊กอินนี้ช่วยให้คุณสามารถเปลี่ยนราคาสินค้าจากสกุลเงินหนึ่งเป็นอีกสกุลเงินตามเวลาจริง
นี่เป็นสิ่งสำคัญอย่างยิ่งใน e-Commerce เนื่องจากมุ่งเป้าไปที่คนทั้งโลก ปลั๊กอินนี้ช่วยให้มั่นใจได้ว่าไม่ว่าลูกค้าของคุณจะอยู่ที่ใดพวกเขาจะสามารถสั่งซื้อจากร้านค้าออนไลน์ของคุณได้ตลอดเวลา
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
ทรัพยากรที่แนะนำ
ค้นพบแหล่งข้อมูลแนะนำอื่น ๆ ที่จะช่วยคุณได้ ปรับปรุงประสิทธิภาพร้านค้าออนไลน์ของคุณ
- ปลั๊กอินในการปรับปรุงร้านค้าออนไลน์ของคุณ 50 WooCommerce
- ปลั๊กอิน WordPress 9 เพื่อสร้างโปรแกรมพันธมิตร
- ปลั๊กอิน WooCommerce 9 เพื่อเพิ่มคุณลักษณะของผลิตภัณฑ์ตัวแปรของคุณ
- ปลั๊กอิน WordPress 5 เพื่อแก้ไข CSS บนบล็อกของคุณ
สรุป
ที่นี่คือ ! นั่นคือทั้งหมดสำหรับบทช่วยสอนนี้เฉพาะสำหรับการปรับแต่งปุ่ม เพิ่มในรถเข็น จาก WooCommerce อย่าลังเลที่จะแบ่งปันกับเพื่อนของคุณบนไฟล์ เครือข่ายทางสังคม แนะนำ
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress
แต่ในระหว่างนี้โปรดแจ้งให้เราทราบเกี่ยวกับไฟล์ ความเห็น และข้อเสนอแนะในส่วนเฉพาะ
...
สวัสดี,
ปลั๊กอินเดียวกันนี้จะช่วยเปลี่ยนสีของดาว "บทวิจารณ์ของลูกค้า" ในหน้าผลิตภัณฑ์ woocommerce ได้หรือไม่ ขอบคุณล่วงหน้า
สวัสดี Beata
ฉันไม่เคยลองและฉันสงสัยมากว่ามันเป็นไปได้
สวัสดีและวิธีเพิ่มขนาดของปุ่ม Add to cart? ขอบคุณ
สวัสดี,
คุณต้องใช้รหัส CSS สำหรับสิ่งนี้ มิฉะนั้นฉันขอแนะนำปลั๊กอินดินสอสีเหลืองที่คุณสามารถดาวน์โหลดได้ที่ Codecanyon
มันยอดเยี่ยมมากที่ได้แปลโค้ดจากภาษาอังกฤษเป็นภาษาอิตาลี CSS เต็มไปด้วยข้อผิดพลาด! แต่เราทำได้หรือไม่!
ขอโทษ
สวัสดีตอนเย็นฉันมีคำถาม เราจะเปลี่ยนสีของราคาในหมวดย่อยใน WooCommerce ได้อย่างไร ???
ขอบคุณแล้วสำหรับคำตอบของคุณ
นิโก้
สวัสดีนิโก้
รูปแบบพรีเมี่ยมหลายแห่งเสนอตัวเลือกนี้มิฉะนั้นคุณสามารถใช้ CSS เพื่อปรับแต่งมัน
Cordialement