เพิ่มสินค้าอัตโนมัติ กรณีสินค้านั้นมีหลายตัวเลือก : WooCommerce

ตามปรกติปุ่ม Add to cart ของ WooCommerce เองก็เพิ่มสินค้าให้อัตโนมัติอยู่แล้ว เพียงแต่ถ้าเมื่อไหร่สินค้านั้น มีหลายตัวเลือก หรือถ้าดูในหลังบ้านของ WooCommerce ก็คือ มีการตั้งค่า Variation ให้กับสินค้า ตัวอย่างเช่น สินค้า A มี 2 สี 2 ขนาด คือ สีแดง ขนาด 5ml, สีแดง ขนาด 30ml, สีเขียว ขนาด 5ml และสีเขียว ขนาด 30ml แบบนี้จะทำให้เมื่อเรากดปุ่ม Add to cart แล้ว ตัว WooCommerce จะพาเราไปยังหน้าของสินค้านั้น เพื่อให้เราเลือกก่อนว่า จะเอาสีไหน ขนาดไหน

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

ซึ่งในหลังบ้านของ WooCommerce ในส่วนของ Product แต่ละชิ้นนั้น จะมีส่วนให้ตั้งค่า Default Variation ของสินค้าชิ้นนั้นๆ อยู่แล้ว เลยใช้ส่วนนี้มาต่อยอดปรับแต่งปุ่ม Add to cart ให้ทำงานแบบที่ลูกค้าต้องการได้

ก่อนอื่นต้องทำความเข้าใจเรื่อง Template ของ WooCommerce ก่อน https://docs.woothemes.com/document/template-structure/ ไม่ขออธิบายนะครับ ไปอ่านดู

โดยปุ่ม Add to cart จะมีอยู่ 2 ส่วนคือ ส่วนของหน้ารวมสินค้า กับส่วนของหน้ารายละเอียดสินค้า ซึ่งปุ่ม Add to cart ที่เราต้องการจะปรับคือ หน้ารวมของสินค้า โดย File ที่เราต้องทำการแก้ไข จะอยู่ใน path yourtheme/woocommerce/loop/add-to-cart.php (อันนี้ยึดหลักตาม WooCommerce 2.2.2) ซึ่งใน File จะเขียนไว้ดังนี้

ผมเลยเพิ่มโค้ดเข้าไปเป็นแบบนี้

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

ถ้าเห็นว่าโค้ดส่วนไหนควรปรับเปลี่ยน คอมเม้นต์บอกกันได้เลยนะครับ


Posted

in

by

Comments

8 responses to “เพิ่มสินค้าอัตโนมัติ กรณีสินค้านั้นมีหลายตัวเลือก : WooCommerce”

  1. สุรชัย Avatar
    สุรชัย

    สอบถามครับ เมื่อเราทำการ ติดตั้ง woo แล้ว เราจะ setting ยังงัย ให้ แสดงรายการลิสต์สินค้า ยังงัยครับ

    1. rabbitinblack Avatar
      rabbitinblack

      ทำตาม step ที่มันแนะนำ ก็จะสร้างหน้า shop ให้เราเองนะครับ ???

  2. กลาง คนขี้เหงา รักนี้ มีแค่เธอ Avatar
    กลาง คนขี้เหงา รักนี้ มีแค่เธอ

    มีของมาขาย

  3. Apirak Sakunsirisombut Avatar
    Apirak Sakunsirisombut

    เราสามารถปิดการขายแค่โชรูปได้ไหมรับ

    1. rabbitinblack Avatar
      rabbitinblack

      ??? ปิดการขาย

      1. Apirak Sakunsirisombut Avatar
        Apirak Sakunsirisombut

        แบบโชว์รูปเฉยๆครับ แต่ทำได้ละครับ

  4. Katak Oo Avatar
    Katak Oo

    สอบถามค่ะ คือ ถ้ามีโค๊ด แต่ไม่มีPlug ได้ป่ะค่ะ

  5. Wanchai Suksapan Avatar
    Wanchai Suksapan

    ผมรบกวนสอบถามด้วยครับ พอดีผม แอดสินค้าแบบ มีตัวเลือก ตรง variation ใส่ราคาตัวเลือกพร้อม แต่พอกดสั่งซื้อและเลือกตัวเลือกแล้ว มันขึ้นว่า Please choose product options… มันเป็นที่อะไรครับ รบกวนด้วยครับ

Leave a Reply to กลาง คนขี้เหงา รักนี้ มีแค่เธอ Cancel reply

Your email address will not be published. Required fields are marked *