ข้ามไปยังเนื้อหาหลัก

วิธีปรับแต่งปุ่ม "เพิ่มในรถเข็น" ของ WooCommerce

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 701.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62 [แนะนำ]

ในการเปลี่ยนสีของปุ่ม WooCommerce เราจำเป็นต้องเปลี่ยนหรือแทนที่ไฟล์ style.css เริ่มต้นของปุ่ม ในการดำเนินการนี้เราจะต้องเพิ่มไฟล์ รหัส CSS ที่กำหนดเอง ถึงเรา ธีม WordPress ของเด็ก ๆ.

มีสองวิธีในการดำเนินการนี้:

  • เพิ่ม CSS ที่กำหนดเองไปยังไฟล์ child style style.css
  • ใช้ปลั๊กอินเพื่อฉีดโค้ด CSS ที่กำหนดเองลงในหน้าเว็บของคุณ

ขั้นตอนที่ 1: ติดตั้งปลั๊กอินบน WordPress CSS ที่กำหนดเองที่เรียบง่ายและเปิดใช้งานได้

เราจะใช้ปลั๊กอิน WordPress เพื่อฉีดโค้ด CSS ลงในหน้าของไฟล์ 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 สำคัญ }

ตอนนี้คุณสามารถเข้าถึงร้านค้าออนไลน์ของคุณแล้วคุณจะสังเกตเห็นว่าปุ่มเปลี่ยนสีจริง

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

ในการปรับแต่งสีของปุ่มเพื่อให้ได้รูปลักษณ์ที่คุณต้องการในที่สุด

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

ด้วยการวิจัยเพียงเล็กน้อยคุณจะสามารถสร้างปุ่มที่ไม่ซ้ำใครด้วยสไตล์ที่ตรงกับธีม 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

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

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

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

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

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

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

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

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

3 WooCommerce Currency Switcher

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

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

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

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

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

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

สรุป

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

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

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

... 

บทความนี้ประกอบด้วยข้อคิดเห็น 8

  1. สวัสดี,
    ปลั๊กอินเดียวกันนี้จะช่วยเปลี่ยนสีของดาว "บทวิจารณ์ของลูกค้า" ในหน้าผลิตภัณฑ์ woocommerce ได้หรือไม่ ขอบคุณล่วงหน้า

    1. สวัสดี,

      คุณต้องใช้รหัส CSS สำหรับสิ่งนี้ มิฉะนั้นฉันขอแนะนำปลั๊กอินดินสอสีเหลืองที่คุณสามารถดาวน์โหลดได้ที่ Codecanyon

  2. มันยอดเยี่ยมมากที่ได้แปลโค้ดจากภาษาอังกฤษเป็นภาษาอิตาลี CSS เต็มไปด้วยข้อผิดพลาด! แต่เราทำได้หรือไม่!

  3. สวัสดีตอนเย็นฉันมีคำถาม เราจะเปลี่ยนสีของราคาในหมวดย่อยใน WooCommerce ได้อย่างไร ???

    ขอบคุณแล้วสำหรับคำตอบของคุณ

    นิโก้

    1. สวัสดีนิโก้

      รูปแบบพรีเมี่ยมหลายแห่งเสนอตัวเลือกนี้มิฉะนั้นคุณสามารถใช้ CSS เพื่อปรับแต่งมัน

      Cordialement

แสดงความคิดเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน
3 หุ้น
หุ้น3
ทวีต
Enregistrer