วิธีเพิ่มมุมมองด่วนใน WooCommerce

คุณต้องการรวมคุณลักษณะมุมมองด่วนในไซต์ของคุณหรือไม่? เรียนรู้ วิธีเพิ่มและปรับแต่งปุ่มมุมมองด่วนบนร้านค้า WooCommerce ของคุณ

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

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

ปุ่ม Quick View คืออะไร?

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

วิธีเพิ่มปุ่มดูด่วนในหน้าร้านค้า WooCommerce

วิธีที่ง่ายที่สุดในการเพิ่มปุ่มดูอย่างรวดเร็วไปยังร้านค้าของคุณคือการใช้ปลั๊กอิน สำหรับการสาธิตนี้ เราจะใช้ Direct Checkout ซึ่งเป็นหนึ่งในปลั๊กอินการชำระเงินที่ดีที่สุดสำหรับ WooCommerce แม้ว่า Direct Checkout จะมีเวอร์ชันฟรี แต่คุณจะต้องใช้เวอร์ชันพรีเมียมเพื่อเพิ่มปุ่ม Quick View คุณสามารถเลือกแผนพรีเมียมใดก็ได้จาก 3 แผนซึ่งเริ่มต้นเพียง 19 USD (ชำระครั้งเดียว)

การติดตั้งและเปิดใช้งานการชำระเงินโดยตรง

ขั้นแรก ติดตั้ง Direct Checkout คุณต้องรับเวอร์ชันฟรีจากที่นี่ และหนึ่งในเวอร์ชันพรีเมียมจากลิงก์นี้ โปรดทราบว่าคุณต้อง ติดตั้งและเปิดใช้งานปลั๊กอินทั้งเวอร์ชันฟรีและพรีเมียม เพื่อปลดล็อกคุณลักษณะการดูอย่างรวดเร็ว หลังจากที่คุณติดตั้งทั้งคู่แล้ว ให้ไปที่ WooCommerce > Direct Checkout > Archives และเปิดใช้งานตัวเลือก ปุ่มเพิ่มมุมมองด่วน ในส่วนนี้ คุณยังสามารถแทนที่ข้อความเริ่มต้นของปุ่มหยิบใส่ตะกร้าได้อีกด้วย โปรดทราบว่าการดำเนินการนี้จะไม่ส่งผลต่อการทำงานของปุ่มมุมมองด่วนแต่อย่างใด แค่นั้นแหละ! คุณเพิ่ง เพิ่มปุ่มดูอย่างรวดเร็วในหน้าร้านค้า WooCommerce ของคุณ ! นี่คือลักษณะของปุ่มหากคุณใช้ธีม StoreFront: และเมื่อคุณคลิกที่ปุ่มมุมมองด่วน ป๊อปอัปโมดอลจะปรากฏขึ้นและมีลักษณะคล้ายกับสิ่งนี้: โปรดทราบว่าข้อมูลผลิตภัณฑ์ทั้งหมดจะแสดงในป๊อปอัปมุมมองด่วน แม้แต่ปุ่ม Add to Cart ก็อยู่ที่นั่น ซึ่งช่วยให้ลูกค้าสามารถเพิ่มสินค้าไปยังรถเข็นของตนได้จากป๊อปอัป ตอนนี้ มาดูขั้นตอนต่อไปและดูวิธีปรับแต่งปุ่มมุมมองด่วนด้วย CSS เล็กน้อย

วิธีปรับแต่งมุมมองด่วนของ WooCommerce

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

โปรดทราบว่าคุณควรวางรหัสต่อไปนี้ใน ไฟล์ style.css ของธีมลูกหรือกล่อง CSS เพิ่มเติมของเครื่องมือปรับแต่งธีม หากคุณไม่มีธีมย่อย คุณสามารถดูโพสต์นี้เพื่อสร้างหรือใช้ปลั๊กอินเหล่านี้ได้

3.1 แก้ไขปุ่มดูด่วน

เปลี่ยนความกว้างของปุ่มดูด่วน

li.product .qlwcdc_quick_view.button{
width: 40%;
}

แก้ไขสีพื้นหลัง

li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}

แก้ไขสีของไอคอน

li.product .qlwcdc_quick_view.button{
color:red;
}

เพิ่มขอบมน

li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}

ใช้รูปภาพเป็นปุ่ม

li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}

แทนที่ไอคอนด้วยข้อความ

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}

เพิ่มเอฟเฟกต์โฮเวอร์

li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}

3.2) แก้ไขป๊อปอัปโมดอลมุมมองด่วน

ตอนนี้ มาดูโค้ดบางส่วนเพื่อปรับแต่งป๊อปอัปโมดอลมุมมองด่วน

เปลี่ยนพื้นหลัง-สี

#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}

ซ่อน meta ของผลิตภัณฑ์

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}

ซ่อนจำนวนและหยิบใส่ตะกร้า

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} #qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} เราเพิ่งได้ดูสคริปต์ต่างๆ เพื่อปรับแต่งแง่มุมต่างๆ ของปุ่มมุมมองด่วนใน WooCommerce หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งที่คุณสามารถทำได้ด้วย CSS โปรดดูคู่มือนี้

ตัวอย่างสคริปต์ CSS

ตอนนี้ คุณได้เรียนรู้วิธีเพิ่มและปรับแต่งพื้นฐานในมุมมองด่วนใน WooCommerce แล้ว มาก้าวต่อไปอีกขั้น ด้านล่างนี้ คุณจะพบตัวอย่างสามตัวอย่างในการแก้ไขปุ่มมุมมองด่วน และเพิ่มรสชาติให้กับหน้าร้านค้าของคุณ

ปุ่มวงกลมพร้อมไอคอนกำหนดเอง

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}

ปุ่มข้อความที่มีสไตล์

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}

การใช้รูปภาพเป็นปุ่ม

li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}

บทสรุป

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

คุณทราบวิธีอื่นๆ ในการรวมปุ่มมุมมองด่วนในร้านค้าของคุณหรือไม่? คุณมีปัญหาใด ๆ ในการปฏิบัติตามคำแนะนำของเราหรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่างและเราจะพยายามอย่างเต็มที่เพื่อช่วยเหลือคุณ

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

• วิธีปรับแต่งหน้าร้านค้า WooCommerce
• วิธีปรับแต่งปุ่ม Add to Cart ใน WooCommerce
• แก้ไขหน้าชำระเงิน WooCommerce