web-dev-qa-db-ja.com

選択したカスタム製品オプションをWooCommerceカートに表示します

以下のコードを使用して、WooCommerceの単一の製品ページにカスタム選択フィールドを表示しています。

<?php $sizes = $product->get_attribute( 'size' ); $sizes = explode(", ",$sizes); ?>
<?php if($sizes[0]!=''){ // if product sizes are available ?>
    <span class="product-size-label">Choose your size:</span>
    <select class="product-size">
    <?php foreach($sizes as $size){ ?>
        <option><?php echo $size; ?></option>
    <?php } ?>
    </select>
<?php } ?>

次に、選択したサイズを取得して、タイトルの下のカートページに表示する必要があります。

単純な製品タイプの場合、どうすればよいですか？

バリエーション商品を使いたくない。

phpwoocommercecustomization
2
Lerry

選択フィールドに不足しているものがあり、フックされた関数を使用して、カートに追加フォーム内の製品に埋め込むことをお勧めします（投稿された値を取得できるようにする場合）。

だから、以下は、フィールドの検証を含むすべての場所で選択したサイズを表示して保存する完全な方法です

1）「カートに追加」ボタンの前に選択フィールドを表示します。

// Display Select field before add to cart button
add_action( 'woocommerce_before_add_to_cart_button', 'sizes_before_add_to_cart_button', 0 );
function sizes_before_add_to_cart_button() {
    global $product;

    // Only on simple products
    if( ! $product->is_type('simple') ) return;

    // When product sizes are available
    if ( $sizes = $product->get_attribute( 'size' ) ) :
    $sizes = explode(", ",$sizes);

    $required = '&nbsp;<abbr class="required" title="required">*</abbr></label>';

    echo '<p class="form-row form-row-wide" id="product-size-field">
    <label for="product-size">' . __('Sizes:') . $required . '</label>
    <select class="product-size" name="product-size" id="product-size">
        <option value="">' . __("Choose your size") . '</option>';

    foreach( $sizes as $size ){
        echo '<option value="' . $size . '">' . $size . '</option>';
    }

    echo '</select>
    </p><br>';

    endif;
}

enter image description here

2）フィールド検証：

add_filter( 'woocommerce_add_to_cart_validation', 'filter_add_to_cart_validation', 10, 4 );
function filter_add_to_cart_validation( $passed, $product_id, $quantity, $variation_id = 0 ) {
    $product = wc_get_product($product_id);

    // Only on simple products and When product sizes are available
    if( ! $product->is_type('simple') && ! $product->get_attribute( 'size' ) )
        return $passed;

    if( isset( $_POST['product-size'] ) && empty( $_POST['product-size'] ) ) {
        wc_add_notice( __("Please choose your size.", "woocommerce" ), 'error' );
        $passed = false;
    }
    return $passed;
}

enter image description here

3）選択したサイズをカスタムカートアイテムデータとして追加します。

add_filter( 'woocommerce_add_cart_item_data', 'add_size_to_cart_item_data', 10, 3 );
function add_size_to_cart_item_data($cart_item_data, $product_id, $variation_id ){
    if( isset( $_POST['product-size'] ) ) {
        $cart_item_data['product-size'] = esc_attr( $_POST['product-size'] );
    }
    return $cart_item_data;
}

4）カートとチェックアウトページの製品名の下に選択したサイズを表示します

add_filter( 'woocommerce_get_item_data', 'display_size_on_cart_item', 10, 2 );
function display_size_on_cart_item( $cart_item_data, $cart_item ) {
    if ( isset( $cart_item['product-size'] ) ){
        $cart_item_data[] = array(
            'name' => __('Size'),
            'value' => $cart_item['product-size'],
        );
    }
    return $cart_item_data;
}

enter image description here

5）選択したサイズを注文アイテムのメタデータとして保存し、どこにでも表示します

add_action('woocommerce_checkout_create_order_line_item', 'save_order_item_product_fitting_color', 10, 4 );
function save_order_item_product_fitting_color( $item, $cart_item_key, $cart_item, $order ) {
    if( isset($cart_item['product-size']) ) {
        $item->update_meta_data( 'Size', $cart_item['product-size'] );
    }
}

enter image description here

コードは、アクティブな子テーマ（またはアクティブなテーマ）のfunction.phpファイルに入ります。テストされ、動作します。

3
LoicTheAztec