คู่มือการปรับแต่ง CSS ส่วนหัวของหน้าร้าน WooCommerce

เผยแพร่แล้ว: 2020-10-10

ส่วนหัวของหน้าร้าน WooCommerce CSS หากคุณต้องการเปลี่ยนลักษณะที่ปรากฏของส่วนหัวของธีม Storefront WooCommerce คุณอาจต้องการเรียนรู้เทคนิค CSS บางส่วนจากบทช่วยสอนสั้น ๆ นี้

หน้าร้าน WooCommerce เป็นธีมที่เรียบง่ายและมีประสิทธิภาพซึ่งให้บริการฟรี ชุดรูปแบบนี้ช่วยให้คุณมีการควบคุมที่สำคัญในร้านค้าของคุณเกี่ยวกับการนำเสนอผลิตภัณฑ์และการเข้าถึงของผู้ใช้ มันฟรีและมีตัวเลือกการปรับแต่งมากมายให้คุณผ่านธีมย่อย

ธีมหน้าร้านรองรับเครื่องมือปรับแต่ง WordPress และคุณสามารถแก้ไขส่วนหัวได้จากส่วนนี้

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

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

นอกจากนี้ยังควรกล่าวด้วยว่าธีมหน้าร้านจะต้องเป็นธีมที่ใช้งานอยู่เมื่อทำการปรับแต่ง

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

  1. ปรับแต่งขนาดส่วนหัว

เราจะใช้ Theme Customizer อีกครั้ง แต่เราจะเขียนโค้ด CSS บางส่วนในส่วน 'CSS เพิ่มเติม'

เพิ่มรหัสต่อไปนี้:

 * โฆษณาด้านบน */

#masthead.site-header {

    ความสูง: 155px!สำคัญ;

    ขอบล่าง:0px

}

/* CSS มือถือสำหรับโฆษณาด้านบน */

หน้าจอ @media เท่านั้นและ (ความกว้างสูงสุด: 320px) {

    #masthead.site-header {

    ความสูง: 80px!สำคัญ;

    ระยะขอบล่าง:0px;

}

}

/* เมนูโฆษณาด้านบน */

.storefront-primary-navigation a, .cart-contents a {

    ระยะขอบ:0 0 0 0;

}

.main-navigation ul {

    ช่องว่างภายใน:0 0 10px 4px!สำคัญ;

}

.main-navigation ลี {

    ความสูง:38px!สำคัญ;}

/* CSS มือถือสำหรับเมนูโฆษณาด้านบน */

หน้าจอ @media เท่านั้นและ (ความกว้างสูงสุด: 320px) {

.main-navigation ul {

    พื้นหลัง:#D6DDE4!สำคัญ;

}

}

/* พื้นที่ส่วนหัว */

.site ส่วนหัว {

แผ่นรองด้านบน:0.5em;

}

.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {

ระยะขอบล่าง: -45px;

}

นี่คือผลลัพธ์: ปรับแต่งขนาดส่วนหัว

  1. ลบแถบค้นหาออกจากส่วนหัวของธีม

เพิ่มรหัสนี้ในส่วน 'CSS เพิ่มเติม'

 .site-header .widget_product_search {

แสดง: ไม่มี;

}

นี่คือผลลัพธ์: ลบแถบค้นหา

  1. เปลี่ยนสีส่วนหัวของเมนู

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

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

 .storefront-primary-navigation,

.main-navigation ul.menu ul.sub-เมนู{

พื้นหลังสี: สีเขียว;

}

นี่คือผลลัพธ์: เปลี่ยนสีเมนูส่วนหัว

4. ซ่อนแถบการนำทางหลัก

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

 .storefront-primary-navigation {

แสดง: ไม่มี;

}

นี่คือผลลัพธ์: ซ่อนแถบนำทางหลัก

5. ลบช่องว่างออกจากส่วนหัว

ไปที่ กำหนดเอง จากนั้นไป ที่ส่วน CSS เพิ่มเติม และเพิ่มบรรทัดต่อไปนี้:

 .site-แบรนด์ {

ระยะขอบล่าง: 0px;

}

นี่คือผลลัพธ์: ลบช่องว่างออกจากส่วนหัว

6. เพิ่มความกว้างของแถบค้นหา

คุณจะทำอย่างไรหากต้องการขยายความกว้างของแถบค้นหา ใช้ส่วน CSS เพิ่มเติม เพิ่มบรรทัดต่อไปนี้:

 .woocommerce-active .site-header .site-search {

ความกว้าง: 44.739%;

}

#masthead .site-search .widget_product_search input[type="search"] {

ความกว้าง: 700px !สำคัญ;

}

นี่คือผลลัพธ์: เพิ่มความกว้างของแถบค้นหา

7. วิธีเปลี่ยนขนาดของโลโก้ การนำทางรอง และแถบค้นหา

หากต้องการเปลี่ยนทั้งหมดพร้อมกัน ให้เพิ่มโค้ดต่อไปนี้ในส่วน CSS เพิ่มเติมของคุณ:

 หน้าจอ @media และ (ความกว้างต่ำสุด: 768px) {

/* โลโก้ */

.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 30% !สำคัญ; /* ใช้ค่า px ถ้าคุณต้องการ เช่น 350px */ }




/* การนำทางระดับรอง */

.site-header .secondary-navigation (ความกว้าง: 40% !สำคัญ; /* ใช้ค่า px ถ้าคุณต้องการ เช่น 350px */ }




/* แถบค้นหา */

.site-header .site-search (ความกว้าง: 30% !สำคัญ; /* ใช้ค่า px ถ้าคุณต้องการ เช่น 350px */ }

นี่คือผลลัพธ์: วิธีเปลี่ยนขนาดของโลโก้ การนำทางรอง และแถบค้นหา

8. นำรถเข็นออกจากส่วนหัว

ในตัวอย่างนี้ ฉันจะลบไอคอนรถเข็นโดยเพิ่มกฎใหม่ ' display: none; '. เพิ่มโค้ด CSS ต่อไปนี้ในส่วน CSS เพิ่มเติม:

 .site-header-cart .cart-contents {

แสดง: ไม่มี;

}

นี่คือผลลัพธ์: นำรถเข็นออกจากส่วนหัว

9. ซ่อนส่วนหัว

หากต้องการซ่อนส่วนหัว ให้เพิ่มโค้ด CSS ต่อไปนี้ในส่วน CSS เพิ่มเติม:

 .site ส่วนหัว {

แสดง: ไม่มี;

}

นี่คือผลลัพธ์: ซ่อนส่วนหัว

10. เพิ่มขนาดของลิงค์เมนูในส่วนหัวของหน้าร้าน

เพิ่มขนาดของลิงค์เมนูในส่วนหัวของหน้าร้าน เมนูมีขนาดเล็กกว่าเล็กน้อยตามความชอบของผู้ใช้หลายคน อย่างไรก็ตาม พวกเขาจำเป็นต้องอัปเกรดขนาดแบบอักษรของลิงก์เมนูในธีมหน้าร้าน เพิ่มรหัสต่อไปนี้ในส่วน CSS เพิ่มเติม:

 .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {

ขนาดตัวอักษร:28px;

}

นี่คือผลลัพธ์:

11. เปลี่ยนขนาดของไอคอนรถเข็นในส่วนหัวของหน้าร้าน

คุณสามารถทำได้โดยเพิ่มโค้ด CSS ต่อไปนี้ในส่วน CSS เพิ่มเติม

 .site-header-cart .cart-contents {

ขนาดตัวอักษร:30px;

}

นี่คือผลลัพธ์: เปลี่ยนขนาดของไอคอนรถเข็นในส่วนหัวของหน้าร้าน

12. เปลี่ยนขนาดของหัวเรื่องเว็บไซต์ในธีมหน้าร้าน

เพิ่มรหัสต่อไปนี้ในส่วน CSS เพิ่มเติม:

 .site ส่วนหัว {

ขนาดตัวอักษร: 20px;

}

นี่คือผลลัพธ์: เปลี่ยนขนาดของชื่อส่วนหัวของไซต์ในธีมหน้าร้าน

13. เปลี่ยนขนาดของปุ่มเมนูมือถือ

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

หากต้องการเปลี่ยนขนาด ให้เพิ่มโค้ด CSS ต่อไปนี้ในส่วน CSS เพิ่มเติม:

 .button.menu-toggle {

ขนาดตัวอักษร: 19px;

}

นี่คือผลลัพธ์: ผลลัพธ์สำหรับปุ่มเมนูมือถือ

บทสรุป

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

หากต้องการเพิ่มกฎ ให้คัดลอก/วางลงในส่วน “ CSS เพิ่มเติม ” ของอินเทอร์เฟซการปรับแต่งธีมหน้าร้านของคุณ เพื่อทำสิ่งนี้:

  • ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
  • จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > ปรับแต่ง
  • นำทางลงไปที่ CSS เพิ่มเติม ในแถบด้านข้างทางซ้ายที่ปรากฏขึ้น
  • เพิ่มกฎ CSS
  • หากคุณพอใจกับการเปลี่ยนแปลง ให้คลิกที่ เผยแพร่

อย่างไรก็ตาม สิ่งสำคัญที่ควรทราบคือเคล็ดลับ CSS ที่แชร์ที่นี่ใช้ได้กับธีมหน้าร้านเท่านั้น

บทความที่คล้ายกัน

  1. วิธีสร้างพื้นที่วิดเจ็ตที่กำหนดเองใน WordPress ทีละขั้นตอน
  2. วิธีปรับแต่งธีมหน้าร้าน – การปรับแต่งหน้าแรก [สุดยอดคู่มือ]
  3. วิธีเพิ่มภาพพื้นหลังส่วนหัวของธีมหน้าร้าน
  4. วิธีแก้ไขส่วนหัวในหน้าร้าน WooCommerce Theme
  5. วิธีสร้างโซลูชันแก้ไขด่วนสำหรับเมนูมือถือ Divi แบบเลื่อนได้
  6. วิธีเปลี่ยนขนาดของไอคอนรถเข็นในธีมหน้าร้าน WooCommerce
  7. วิธีเปลี่ยนขนาดของปุ่มเมนูมือถือธีมหน้าร้าน
  8. วิธีปรับความสูงของหน้าร้าน WooCommerce ของส่วนหัว
  9. วิธีเปลี่ยนขนาดตัวอักษรของเมนูหลัก ธีมหน้าร้าน
  10. วิธีการเปลี่ยนความสูงของส่วนท้ายของหน้าร้าน WooCommerce
  11. วิธีเปลี่ยนสีเมนูหน้าร้าน WooCommerce
  12. วิธีปรับแต่งธีมหน้าร้าน WooCommerce : คู่มือการปรับแต่งธีมหน้าร้านที่ดีที่สุด
  13. วิธีการเปลี่ยนขนาดของชื่อเว็บไซต์ ธีมหน้าร้าน WooCommerce
  14. วิธีลบธีมหน้าร้าน WooCommerce ของส่วนหัว