ตามปรกติปุ่ม Add to cart ของ WooCommerce เองก็เพิ่มสินค้าให้อัตโนมัติอยู่แล้ว เพียงแต่ถ้าเมื่อไหร่สินค้านั้น มีหลายตัวเลือก หรือถ้าดูในหลังบ้านของ WooCommerce ก็คือ มีการตั้งค่า Variation ให้กับสินค้า ตัวอย่างเช่น สินค้า A มี 2 สี 2 ขนาด คือ สีแดง ขนาด 5ml, สีแดง ขนาด 30ml, สีเขียว ขนาด 5ml และสีเขียว ขนาด 30ml แบบนี้จะทำให้เมื่อเรากดปุ่ม Add to cart แล้ว ตัว WooCommerce จะพาเราไปยังหน้าของสินค้านั้น เพื่อให้เราเลือกก่อนว่า จะเอาสีไหน ขนาดไหน
คราวนี้ได้โจทย์มาจากลูกค้าว่า อยากจะให้เมื่อคนซื้อมากดปุ่ม Add to cart แล้ว ระบบจะเพิ่มสินค้าเข้าตะกร้าสินค้าให้เองอัตโนมัติจำนวน 1 ชิ้น</blockquote> ซึ่งในหลังบ้านของ WooCommerce ในส่วนของ Product แต่ละชิ้นนั้น จะมีส่วนให้ตั้งค่า Default Variation ของสินค้าชิ้นนั้นๆ อยู่แล้ว เลยใช้ส่วนนี้มาต่อยอดปรับแต่งปุ่ม Add to cart ให้ทำงานแบบที่ลูกค้าต้องการได้
โดยปุ่ม Add to cart จะมีอยู่ 2 ส่วนคือ ส่วนของหน้ารวมสินค้า กับส่วนของหน้ารายละเอียดสินค้า ซึ่งปุ่ม Add to cart ที่เราต้องการจะปรับคือ หน้ารวมของสินค้า โดย File ที่เราต้องทำการแก้ไข จะอยู่ใน path
| <?php |
| /** |
| * Loop Add to Cart |
| * |
| * @author WooThemes |
| * @package WooCommerce/Templates |
| * @version 2.1.0 |
| */ |
|
| if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly |
|
| global $product; |
|
| echo apply_filters( 'woocommerce_loop_add_to_cart_link', |
| sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s</a>', |
| esc_url( $product->add_to_cart_url() ), |
| esc_attr( $product->id ), |
| esc_attr( $product->get_sku() ), |
| $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '', |
| esc_attr( $product->product_type ), |
| esc_html( $product->add_to_cart_text() ) |
| ), |
| $product ); |
| <?php |
| /** |
| * Loop Add to Cart |
| * |
| * @author WooThemes |
| * @package WooCommerce/Templates |
| * @version 2.1.0 |
| */ |
|
| if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly |
|
| global $product; |
|
| echo (sprintf( '<a href="%s" class="button">%s</a>', esc_url( get_permalink( $product->id )), 'View Details' )); |
|
| if( $product->has_child() ) { |
| $selected_attributes = $product->get_variation_default_attributes(); |
| $title = array_keys($selected_attributes); |
|
| $available_variations = $product->get_available_variations(); |
| foreach ( $available_variations as $this_variation ) { |
| $matchcheck = 0; |
| for ($i=0; $i < sizeof($title) ; $i++) { |
| if ( $this_variation['attributes']['attribute_' . $title[$i]] == $selected_attributes[$title[$i]] ) { |
| $matchcheck = $matchcheck + 1; |
| } |
| } |
| if ( sizeof($title) == $matchcheck) { |
| $variation_id = $this_variation['variation_id']; |
| } |
| } |
| } |
|
|
| ?> |
| <?php if ( ! empty( $selected_attributes ) ) : ?> |
| <form class="variations_form cart" method="post" enctype='multipart/form-data'> |
| <?php for ($i=0; $i < sizeof($title) ; $i++) { ?> |
| <input type="hidden" id="<?php echo $title[$i]; ?>" name="attribute_<?php echo $title[$i]; ?>" value="<?php echo $selected_attributes[$title[$i]]; ?>"> |
| <?php } ?> |
| <input type="hidden" name="quantity" value="1" title="Qty"> |
| <button type="submit" class="single_add_to_cart_button button alt"><?php echo $product->single_add_to_cart_text(); ?></button> |
|
| <input type="hidden" name="add-to-cart" value="<?php echo $product->id; ?>" /> |
| <input type="hidden" name="product_id" value="<?php echo $product->id; ?>" /> |
| <input type="hidden" name="variation_id" value="<?php echo $variation_id; ?>" /> |
| </form> |
| <?php else : |
| echo apply_filters( 'woocommerce_loop_add_to_cart_link', |
| sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s</a>', |
| esc_url( $product->add_to_cart_url() ), |
| esc_attr( $product->id ), |
| esc_attr( $product->get_sku() ), |
| $product->is_purchasable() ? 'add_to_cart_button' : '', |
| esc_attr( $product->product_type ), |
| esc_html( $product->single_add_to_cart_text() ) |
| ), |
| $product ); |
| endif; ?> |
โดยเช็คว่าสินค้านั้น มีตัวเลือกหรือเปล่า หลังจากนั้นมาเช็คว่ามีค่า Default ตั้งไว้มั้ย ส่วน form ที่ใช้ในการส่งค่าสำหรับเพิ่มสินค้าเข้าตะกร้านั้น นำมาจากปุ่ม Add to cart ของหน้ารายละเอียดสินค้า เพียงแต่เรากำหนดค่าของตัวเลือกลงไปเลย รวมถึงจำนวน 1 ชิ้นด้วย
