ในการเปลี่ยนสีของปุ่ม 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 ที่กำหนดเองได้

อินเตอร์เฟซปลั๊กอิน WordPress 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).

เพิ่มในรถเข็นปุ่ม WordPress

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

กู้คืนรถเข็นที่ถูกทิ้งสำหรับ woocommerce

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2. WooCommerce ซ่อนราคา & ปลั๊กอินปุ่มเพิ่มในรถเข็น

ปลั๊กอิน WooCommerce ซ่อนราคาช่วยให้ร้านค้าสามารถสร้างกฎหลายข้อเพื่อซ่อนราคาหรือซ่อนปุ่ม "เพิ่มลงในรถเข็น" จากลูกค้าที่ไม่ได้เข้าสู่ระบบหรือผู้ใช้ที่มีสิทธิ์ในการเข้าถึงเว็บไซต์อีคอมเมิร์ซของคุณ

Woocommerce ซ่อนราคาเพิ่มในรถเข็นปลั๊กอินปุ่มซ่อนตามบทบาทของผู้ใช้

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 WooCommerce Currency Switcher

ปลั๊กอินนี้ช่วยให้คุณสามารถเปลี่ยนราคาสินค้าจากสกุลเงินหนึ่งเป็นอีกสกุลเงินตามเวลาจริงตัวสลับสกุลเงินของ Woocommerce

นี่เป็นสิ่งสำคัญอย่างยิ่งใน e-Commerce เนื่องจากมุ่งเป้าไปที่คนทั้งโลก ปลั๊กอินนี้ช่วยให้มั่นใจได้ว่าไม่ว่าลูกค้าของคุณจะอยู่ที่ใดพวกเขาจะสามารถสั่งซื้อจากร้านค้าออนไลน์ของคุณได้ตลอดเวลา

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

ทรัพยากรที่แนะนำ

ค้นพบแหล่งข้อมูลแนะนำอื่น ๆ ที่จะช่วยคุณได้ ปรับปรุงประสิทธิภาพร้านค้าออนไลน์ของคุณ 

สรุป

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

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

แต่ในระหว่างนี้โปรดแจ้งให้เราทราบเกี่ยวกับไฟล์ ความเห็น และข้อเสนอแนะในส่วนเฉพาะ

...