วิธีเพิ่มปุ่ม Add-to-Cart แบบกำหนดเองใน WooCommerce

ต้องการเรียนรู้วิธีเพิ่มปุ่มเพิ่มในรถเข็นแบบกำหนดเองใน WooCommerce หรือไม่?

การปรับแต่งปุ่มบนร้านค้า WooCommerce ของคุณสามารถช่วยดึงดูดความสนใจ ปรับปรุงอัตราการแปลงและยอดขาย

ในบทความนี้ เราจะแสดงวิธีเพิ่มปุ่มเพิ่มลงตะกร้าแบบกำหนดเองใน WooCommerce ทีละขั้นตอน

ทำไมต้องปรับแต่งปุ่ม Add-to-Cart WooCommerce ของคุณ?

การแก้ไขปุ่ม add-to-cart ช่วยให้คุณปรับให้เข้ากับผลิตภัณฑ์ WooCommerce ที่คุณขาย หากคุณใช้ปุ่มรถเข็นเริ่มต้น อาจไม่เกี่ยวข้องกับประเภทผลิตภัณฑ์โดยสิ้นเชิง

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

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

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

วิธีเพิ่มปุ่ม Add-to-Cart แบบกำหนดเองใน WooCommerce

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

วิธีที่ 1: เพิ่มปุ่ม Add-to-Cart แบบกำหนดเองด้วย SeedProd

สำหรับวิธีแรก เราจะใช้ SeedProd เครื่องมือสร้างเว็บไซต์ที่ดีที่สุดสำหรับ WordPress

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

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

ขั้นตอนที่ 1. ติดตั้งและเปิดใช้งาน SeedProd

ขั้นแรก ไปที่หน้าการกำหนดราคา SeedProd และเลือกแผน SeedProd ของคุณ ในการเข้าถึงคุณสมบัติของ WooCommerce คุณจะต้องใช้แผน SeedProd Elite

ถัดไป ลงชื่อเข้าใช้บัญชี SeedProd ของคุณ คลิกแท็บ ดาวน์โหลด และดาวน์โหลดไฟล์ปลั๊กอิน .zip คุณยังสามารถคัดลอกรหัสใบอนุญาตในหน้าเดียวกันได้

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

หลังจากติดตั้ง SeedProd แล้ว ให้ไปที่หน้า SeedProd » การตั้งค่า และวางรหัสใบอนุญาตที่คุณบันทึกไว้ก่อนหน้านี้

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

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

• การใช้หน้า Landing Page
• การสร้างธีม WooCommerce แบบกำหนดเอง

สำหรับบทช่วยสอนนี้ เราจะสร้างธีม WooCommerce ที่กำหนดเอง เนื่องจากจะสร้างหน้าร้านค้า WooCommerce ทั้งหมดของคุณโดยอัตโนมัติ

ขั้นตอนที่ 2 เลือกชุดเว็บไซต์

สำหรับขั้นตอนต่อไป ให้ไปที่หน้า SeedProd » Theme Builder ที่นี่คุณสามารถสร้างส่วนต่างๆ ของธีม WooCommerce และปรับแต่งการออกแบบของแต่ละเทมเพลตได้

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

หากต้องการเลือกชุดเว็บไซต์ ให้คลิกที่ปุ่ม ธีม

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

จากนั้นคุณสามารถวางเมาส์เหนือการออกแบบที่คุณชอบแล้วคลิกไอคอนเครื่องหมายถูกเพื่อนำเข้าไปยัง Theme Builder ของคุณ

สำหรับคู่มือนี้ เราใช้ชุดเว็บไซต์ WooCommerce ร้านเครื่องปั้นดินเผา

หลังจากนำเข้าชุดเว็บไซต์แล้ว คุณจะเห็นส่วนต่างๆ ของธีมในรายการดังนี้:

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

มาเริ่มกระบวนการปรับแต่งโดยปรับแต่งปุ่ม WooCommerce add-to-cart ของคุณ

ขั้นตอนที่ 3 ปรับแต่งปุ่ม Add-to-Cart ของคุณ

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

การเพิ่มปุ่มหยิบใส่ตะกร้าหน้าร้านค้าแบบกำหนดเอง

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

หน้าร้านค้า WooCommerce ของคุณจะเปิดขึ้นในตัวสร้างเพจแบบลากและวางของ SeedProd ซึ่งคุณสามารถปรับแต่งการออกแบบของคุณโดยไม่ต้องใช้โค้ด

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

ตามค่าเริ่มต้น เทมเพลตหน้าร้านค้าจะใช้บล็อก กริดผลิตภัณฑ์ การคลิกจะแสดงการตั้งค่าเพื่อควบคุมลักษณะที่ปรากฏในรายการผลิตภัณฑ์ของคุณ

ตัวอย่างเช่น คุณสามารถเปลี่ยนจำนวนคอลัมน์ กรองผลิตภัณฑ์ตามรหัสผลิตภัณฑ์ แบบสอบถาม หรือประเภท และเปลี่ยนลำดับที่แสดง

คุณยังสามารถคลิกแท็บ ขั้นสูง เพื่อดูตัวเลือกการปรับแต่งเพิ่มเติม รวมถึงรูปแบบแบบอักษร สี เส้นขอบ และอื่นๆ

ในส่วนปุ่ม คุณสามารถปรับแต่งปุ่มเพิ่มลงในตะกร้าสินค้า WooCommerce ได้ด้วยการคลิกเพียงไม่กี่ครั้ง ตัวอย่างเช่น ภายใต้ดรอปดาวน์สไตล์ปุ่ม คุณสามารถเลือก:

• แบน
• 2D
• วินเทจ
• ผี
• ลิงค์

นอกจากนี้ คุณสามารถเปลี่ยนสีของปุ่ม รูปแบบตัวอักษร ขนาด และรัศมีขอบได้

ทดลองกับตัวเลือกการปรับแต่งเพื่อค้นหารูปลักษณ์ที่ตรงกับความต้องการทางธุรกิจของคุณ จากนั้น กดปุ่ม บันทึก ที่มุมบนขวาเพื่อจัดเก็บการเปลี่ยนแปลงของคุณ แล้วคลิกไอคอน X เพื่อกลับไปที่ Theme Builder

การเปลี่ยนปุ่ม Add-to-Cart ของหน้าสินค้า

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

คราวนี้ คุณจะเห็นรายละเอียดผลิตภัณฑ์เดียวในโปรแกรมแก้ไขภาพของ SeedProd

โดยค่าเริ่มต้น มันจะแสดง:

• ภาพสินค้า
• ชื่อสินค้า
• ราคาสินค้า
• คำอธิบายสั้น
• ปุ่มหยิบใส่ตะกร้า
• แท็บข้อมูลผลิตภัณฑ์

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

คุณยังสามารถเปลี่ยนการจัดตำแหน่งปุ่มและเพิ่มไอคอนจากไลบรารีไอคอน Font Awesome

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

การแก้ไขคลังเก็บสินค้าของคุณ ปุ่มรถเข็น

การเปลี่ยนปุ่ม add-to-cart บนคลังเก็บผลิตภัณฑ์ของคุณเป็นไปตามกระบวนการที่คล้ายกับหน้าร้านค้าของคุณ เพียงค้นหาส่วนเทมเพลต คลังข้อมูลผลิตภัณฑ์ แล้วคลิกลิงก์ แก้ไขการออกแบบ เพื่อเปิดในโปรแกรมแก้ไขภาพ

บล็อกที่ SeedProd ใช้ในหน้านี้คือบล็อก Archive Products ผู้ใช้จะเห็นหน้านี้หากคลิกหัวข้อหมวดหมู่สินค้าหรือใช้แถบค้นหาของร้านค้าของคุณ

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

ตัวอย่างเช่น คุณสามารถเปลี่ยนจำนวนคอลัมน์ แสดงรายการตามจำนวน และเรียงลำดับตามตัวกรอง นอกจากนี้ คุณสามารถเปิดใช้งานการกรองตาม Query เช่น:

• สืบค้นตามคุณสมบัติ
• เลือกตามแท็ก
• เลือกตามหมวดหมู่
• เลือกตามผลิตภัณฑ์ SKU
• เลือกตามกลุ่ม
• เลือกโดยการมองเห็น

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

การเพิ่มปุ่ม Add-to-Cart แบบกำหนดเองบนหน้าบล็อก

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

หากต้องการทำเช่นนั้นด้วย SeedProd ให้ค้นหาเทมเพลต หน้าบล็อก แล้วคลิกลิงก์ แก้ไขการออกแบบ

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

มาเพิ่มส่วนในหน้านี้เพื่อแสดงผลิตภัณฑ์ใหม่ ขั้นแรก ลากบล็อกคอลัมน์ไปที่หน้า แล้วเลือกเค้าโครงคอลัมน์

จากนั้นเลือกบล็อก รูปภาพ และเพิ่มรูปภาพผลิตภัณฑ์

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

ตอนนี้ คลิกบล็อกเพื่อเปิดการตั้งค่าและเพิ่มข้อความปุ่มเพิ่มในรถเข็นแบบกำหนดเองของคุณ

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

หลังจากนั้น คุณสามารถวางรหัสลงในช่องรหัสผลิตภัณฑ์บนปุ่มเพิ่มในรถเข็นของคุณ วิธีนี้จะช่วยให้แน่ใจว่าสินค้านั้นถูกเพิ่มลงในรถเข็นของคุณหลังจากคลิก URL ของ Add to Cart

อย่าลืมคลิกปุ่ม บันทึก เพื่อบันทึกการเปลี่ยนแปลงของคุณ

ขั้นตอนที่ 4 บันทึกและเผยแพร่การเปลี่ยนแปลงของคุณ

เมื่อคุณพอใจกับรูปลักษณ์ของหน้า WooCommerce คุณก็พร้อมที่จะทำให้ร้านค้าของคุณใช้งานได้จริง ในการทำเช่นนั้น ให้กลับไปที่ Theme Builder และที่มุมบนขวา ให้หมุนปุ่ม Enable SeedProd Theme สลับไปที่ตำแหน่ง 'On'

มาดูหน้าที่เราปรับแต่งกัน:

หน้าร้านค้า

หน้าสินค้า

หน้าเอกสารเก่า

หน้าบล็อก

วิธีที่ 2: เพิ่มปุ่ม Add-to-Cart แบบกำหนดเองด้วย Code

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

ที่กล่าวว่า เราเข้าใจดีว่าบางคนไม่ต้องการเขียนทับการออกแบบเว็บไซต์ที่มีอยู่ทั้งหมด

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

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

เมื่อคุณมีทุกอย่างพร้อมแล้ว คุณสามารถเริ่มเพิ่มปุ่มเพิ่มลงตะกร้าแบบกำหนดเองใน WooCommerce ได้

เปลี่ยนข้อความปุ่ม Add-to-Cart บนหน้าสินค้า

ขั้นแรก เราจะดูการเปลี่ยนแปลงข้อความปุ่ม add-to-cart ใน WooCommerce ตัวอย่างเช่น คุณอาจต้องการเปลี่ยนข้อความของปุ่มเป็น "ซื้อรายการนี้"

ในการทำเช่นนั้น ให้สร้างข้อมูลโค้ดที่กำหนดเองใน WPCode และวางโค้ด PHP ต่อไปนี้:

add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}

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

เปลี่ยนสีของปุ่มหยิบใส่ตะกร้า

หากคุณต้องการเปลี่ยนสีของปุ่มเพิ่มไปยังตะกร้าสินค้า คุณจะต้องเพิ่ม CSS แบบกำหนดเอง คุณสามารถทำได้โดยไปที่ ลักษณะที่ ปรากฏ » ปรับแต่ง » CSS เพิ่มเติม จากแดชบอร์ด WordPress ของคุณ

ตอนนี้วางโค้ด CSS ต่อไปนี้:

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

คุณทำเช่นเดียวกันกับหน้าเก็บถาวรผลิตภัณฑ์ได้โดยวางข้อมูลโค้ด CSS ต่อไปนี้

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

ที่นั่นคุณมีมัน!

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

คุณอาจชอบโพสต์นี้: วิธีแก้ไขเมนูใน WordPress สำหรับการนำทางที่กำหนดเอง

พร้อมที่จะปรับแต่งปุ่ม Add-to-Cart ของ WooCommerce แล้วหรือยัง?

ขอบคุณที่อ่าน. โปรดติดตามเราบน YouTube, Twitter และ Facebook สำหรับเนื้อหาที่เป็นประโยชน์เพิ่มเติมเพื่อทำให้ธุรกิจของคุณเติบโต