使用 Woocommerce 產品創建下拉菜單，並根據選擇自動將產品添加到購物車

Question

使用Woocommerce 產品簡短描述答案代碼中同一類別的產品下拉列表，我設法在 WooCommerce 中創建了一個產品下拉列表。

在<select>標簽上，我想調用一個 php function，它根據下拉列表中的選定選項將產品添加到購物車。

我在代碼中更改了<select>標記，如下所示：

<select name="products-select" id="products-select" onchange="'.add_to_cart().'">

Php function 將 woocommerce 產品添加到購物車：

function add_to_cart(){
    WC()->cart->add_to_cart( 1147 ); 
}

由於某種原因，當我加載頁面時會調用 function。

Answer 1

要獲得可添加到購物車的同一產品類別的相關產品的下拉列表，需要使用 javascript 對代碼進行一些更改，例如：

add_shortcode( 'products_dropdown', 'wc_products_from_cat_dropdown' );
function wc_products_from_cat_dropdown( $atts ) {
    // Shortcode Attributes
    $atts = shortcode_atts( array(
        'product_id' => '',
    ), $atts, 'products_dropdown' );

    $product_id = is_product() ? get_the_id() : $atts['product_id'];

    if ( empty($product_id) )
        return;

    ob_start();

    $query = new WP_Query( array(
        'post_type'      => 'product',
        'post_status'    => 'publish',
        'posts_per_page' => '-1',
        'post__not_in'     => array( $product_id ),
        'tax_query' => array( array(
                'taxonomy' => 'product_cat',
                'field'    => 'term_id',
                'terms'    => wp_get_post_terms( $product_id, 'product_cat', array( 'fields' => 'ids' ) ),
            ),
            array(
                'taxonomy' => 'product_type',
                'field'    => 'name',
                'terms'    => 'simple',
        ) ),
    ) );

    if ( $query->have_posts() ) :

    echo '<div class="products-dropdown"><select name="products-select" id="products-select">
    <option value="">'.__('Choose a related product').'</option>';

    while ( $query->have_posts() ) : $query->the_post();

    $type = wp_get_post_terms( get_the_ID(), 'product_type', ['fields','slug'] );
    print_pr($type);

    echo '<option value="?add-to-cart='.get_the_ID().'">'.get_the_title().'</option>';

    endwhile;

    echo '</select><br><a class="button disabled" href="">'.__("add to cart").'</a></div>';

    wp_reset_postdata();

    endif;

    ?>
    <script type='text/javascript'>
        jQuery(function($){
            var a = '.products-dropdown', b = a+' .button', d = 'disabled', s = a+' select';
            $(document.body).on('change', s, function(){
                var qv = $(this).val();
                $(b).attr('href', qv);
                if ( qv != '' ) {
                    $(b).removeClass(d).attr('href', $(this).val());
                } else if ( qv == '' && ! $(b).hasClass(d) ) {
                    $(b).addClass(d);
                }
            }).on('click', b, function(e){
                if ( $(b).attr('href') == '' ) {
                    e.preventDefault();
                }
            });

        });
    </script>
    <?php

    return ob_get_clean();
}

代碼進入活動子主題（或活動主題）的functions.php文件。 測試和工作。

該代碼將顯示帶有添加到購物車按鈕的簡單產品（來自相同產品類別）的下拉列表。

---

用法

1）。 對於單個產品頁面：只需在產品簡短描述（或描述）中粘貼以下短代碼：

[products_dropdown]

2）。 對於單個產品頁面，在 php 代碼內：

echo do_shortcode("[products_dropdown]");

3）。 在文本編輯器中的任何帖子或頁面上，定義 product_id 參數（在定義的產品 id 下方為37 ） ：

[products_dropdown product_id="37"]

---

在選擇產品之前，添加到購物車按鈕被禁用：

在下拉列表中選擇產品時，將激活添加到購物車按鈕，並且可以將所選產品添加到購物車：