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

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

ในการเปลี่ยนสีปุ่ม WooCommerceเราจำเป็นต้องเปลี่ยนหรือแทนที่ไฟล์ style.css เริ่มต้นสำหรับปุ่มต่างๆ ในการทำเช่นนี้เราจะต้องเพิ่ม a รหัส 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:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt: โฮเวอร์, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button alt:โฮเวอร์, .woocommerce-page input.button.alt:hover { background:red !important; พื้นหลัง-สี:สีแดง!สำคัญ; สี:สีขาว !สำคัญ; ข้อความเงา: โปร่งใส!สำคัญ; กล่องเงา: ไม่มี; border-color:#ca0606 !สำคัญ; } .woocommerce #เนื้อหา input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page # เนื้อหา input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover { พื้นหลัง :red !สำคัญ; พื้นหลัง-สี:สีแดง!สำคัญ; สี:สีขาว !สำคัญ; ข้อความเงา: โปร่งใส!สำคัญ; กล่องเงา: ไม่มี; border-color:#ca0606 !สำคัญ; } .woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page # ดูเพิ่มเติม ตอบกลับ input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button { พื้นหลัง: สีแดง !สำคัญ; สี:สีขาว !สำคัญ; ข้อความเงา: โปร่งใส!สำคัญ; border-color:#ca0606 !สำคัญ; } .woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button .alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button .button.alt:hover, .woocommerce-page input.button.alt:hover { พื้นหลัง: สีแดง !สำคัญ; กล่องเงา: ไม่มี; ข้อความเงา: โปร่งใส!สำคัญ; สี:สีขาว !สำคัญ; border-color:#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 ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

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

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

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

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

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

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

3 WooCommerce Currency Switcher

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

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

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

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

ดาวน์โหลดเครื่องมือมากกว่า 11 ล้านรายการ

Envato Elements นำเสนอทรัพยากรที่ดีที่สุดในการสร้างและพัฒนาเว็บไซต์ของคุณทุกด้าน คุณจะพบเทมเพลต WordPress กราฟิก แหล่งข้อมูลเสียง และอื่นๆ อีกมากมายนับล้านรายการ เหมาะสำหรับผู้เริ่มต้น

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

สรุป

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

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

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

... 

%d บล็อกเกอร์ชอบหน้านี้: