Left sidebar under main content on Mobile

การกำหนดให้เนื้อหาแสดงผลก่อนไซด์บาร์บนอุปกรณ์โมบาย

การทำร้านค้าออนไลน์ ให้แสดงผลบน Mobile Devices ในส่วนที่เป็นหน้ารวมสินค้า ถ้าดีไซน์มาเป็น right sidebar อยู่แล้วคงไม่มีปัญหาเวลาดูบนอุปกรณ์โมบาย เพราะ sidebar จะปัดไปอยู่ล่าง main content อยู่แล้ว แต่ในกรณีที่ดีไซน์มาเป็น left sidebar เวลาลูกค้ากด add to cart เราคงไม่อยากให้ sidebar ขึ้นมาอยู่ก่อน main content ในขั้นตอนการไปสู่หน้า cart และหน้า checkout

วิธีแก้ปัญหา

ผมแก้ปัญหาโดยใช้วิธีง่ายๆ โดยให้ sidebar อยู่ล่าง main content และกำหนดให้ #sidebar float:left และ #main float:right บนหน้าจอตั้งแต่ 981px ขึ้นไปตามโค้ดด้านล่างครับ

Left sidebar under main content on Mobile

Contact Form 7 Responsive

Making Contact Form 7 Responsive

The css – put in style.css


/* Contact Form 7 Responsive */

div.wpcf7 .wpcf7-form-control max-width: 100%;


refer : https://wordpress.org/support/topic/making-contact-form-7-responsive

Tag : Contact Form 7

Contact Form 7 Responsive

WooCommerce Extensions

รวมปลั๊กอินที่ใช้ร่วมกับ WooCommerce (Plugins Pack)

WooCommerce คือ ปลั๊กอินใช้ทำร้านค้าออนไลน์ใน WordPress ซึ่งได้รับความนิยมเป็นอย่างมาก จึงทำให้มีนักพัฒนาทำส่วนเสริม Extension เพื่อเพิ่มประสิทธิภาพและเติมส่วนที่ขาดไป โดยทำเป็นปลั๊กอินที่สามารถ Install ลงไปแล้วใช้งานได้ทันที ซึ่งผมได้รวบรวมตัวที่น่าสนใจไว้ดังนี้ครับ

ปลั๊กอินที่จะทำให้ชีวิตง่ายขึ้นเมื่อใช้ร่วมกับ WooCommerce

1. WooCommerce Product Archive Customiser

WooCommerce Product Archive Customiser

ปลั๊กอินที่ช่วยให้คุณสามารถปรับแต่งหน้า Shop และหน้าหมวดหมู่สินค้า ของ WooCommerce กำหนดจำนวนของคอลัมน์สินค้าและจำนวนของสินค้าที่แสดงต่อหน้า และกำหนดการแสดงผลของส่วนต่างๆ

Author : Jameskoster

Detail & Download

2. WooCommerce Product Details Customiser

WooCommerce Product Details Customiser

อีกตัวที่ใช้คู่กันเลยเป็นปลั๊กอินที่ช่วยให้สามารถกำหนดการแสดงผลในหน้าสินค้าเดี่ยว (Single Product) เช่น ให้แสดงแท็บด้านล่าง แสดงสินค้าที่คล้ายกัน (Related Products) เป็นต้น

Author : Jameskoster

Detail & Download

3. WooCommerce Menu Cart

WooCommerce Menu Cart

ปลั๊กอินนี้จะติดตั้งปุ่มตระกร้าสินค้า (Cart) ไปยังเมนูบาร์ที่คุณเลือก

Author : Jeremiah & Ewout

Detail & Download

4. WooCommerce Smart Sale Badge

WooCommerce Smart Sale Badge

สำหรับสินค้าที่มีการใส่ราคา Sale จากราคาปกติจะมีป้ายบอกว่า Sale และปลั๊กอินนี้จะเปลี่ยนป้าย Sale ให้แสดงว่าลดไปเท่าไหร่

Author : Hugh Lashbrooke

Detail & Download

5. WooCommerce RRP

WooCommerce RRP

ช่วยให้สามารถเพิ่มข้อความก่อนราคาปกติและราคาขายของสินค้า เช่น ราคาปกติ / ราคาพิเศษ

Author : Brad Davis

Detail & Download

6. WooCommerce Custom Currencies

WooCommerce Custom Currencies

ปลั๊กอินที่ช่วยให้คุณสามารถกำหนดการแสดงผลหน่วยสกุลเงินให้เป็นในแบบที่คุณต้องการ เช่น THB

Author : GalalAly

Detail & Download

7. WooCommerce Remove Quantity Text

WooCommerce Remove Quantity Text

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

Author : raviraiya

Detail & Download

8. WooCommerce Custom Price

WooCommerce Custom Price

ปลั๊กอินใช้ในการตั้งค่าให้แสดงข้อความตามต้องการสำหรับสินค้าที่ไม่ใส่ราคา เช่น สอบถามราคา

Author : azhkuro & maxim.s.barabash & WPMonkeyATL

Detail & Download

9. YITH WooCommerce Compare

YITH WooCommerce Compare

ช่วยให้ลูกค้าสามารถเปรียบเทียบสินค้าต่างๆในร้านค้าได้ โดยการคลิ๊กปุ่ม Compare ที่ตัวสินค้าที่ต้องการจะเปรียบเทียบ

Author : YITHEMES

Detail & Download

10. YITH WooCommerce Wishlist

YITH WooCommerce Wishlist

รายการโปรด (Wishlist) คือ รายการสินค้าที่บันทึกไว้ในบัญชีผู้ใช้งาน เป็นรายการที่สนใจหรืออยากได้ เพื่อกลับมาดูใหม่ในภายหลัง หรือรายการสินค้าที่คุณซื้อบ่อยๆ ซื้อใช้เป็นประจำ พูดง่ายๆก็คือรายการบุ๊คมาร์คนั่นเอง

Author : YITHEMES

Detail & Download

WooCommerce Extensions