在WooCommerce可變產品單頁中獲取選定的產品變體ID

Question

對於我的Woocommerce可變產品，我正在單個產品頁面上實現自定義尺寸選擇器，並且在表格中具有以下尺寸：

這些變化只是： 30B 30C 30D而不是分成： 30和B C D

我要弄清楚的是：如何獲取每種產品變體的運輸等級？

我在購物車頁面上有類似的東西，但是我不知道什么是變體ID或如何從單個產品頁面獲取它：

$product_id = ( 0 != $cart_item['variation_id'] ) ? $cart_item['variation_id'] : $cart_item['product_id'];
// need the variation id for the above to be able to do the rest:

$product_shipping_classes = get_the_terms( $product_id, 'product_shipping_class' );
$product_shipping_class_name = ( $product_shipping_classes && ! is_wp_error( $product_shipping_classes ) ) ? current( $product_shipping_classes )->name : '';

擁有版本ID后，我就知道該怎么做。 我只是不知道如何去做剩下的事情。 我唯一需要獲得的是產品ID和產品型號（此頁面上還有color屬性）。

但是，我已經為產品提供了一個默認的變體來使用（因此設置了隱藏的variation_id ）。

也許需要首先獲取該信息以了解所選顏色的ID，然后再獲取其他顏色的ID。

Answer 1

在可變產品的WooCommerce產品單頁中，您無法在PHP中獲得選定的產品變體，因為它是一個實時事件（客戶端，而不是服務器端）。

做到這一點的方法是使用JavaScript / jQuery來獲取它。 由於您沒有在此單一產品頁面上提供有關您的可變產品的任何相關代碼，因此我無法為您提供完全滿足您需求的真實工作代碼。

在單個產品頁面上獲取可變產品的選定變體ID（在此示例中，我在“添加到購物車”按鈕下方動態顯示選定的變體ID） ：

add_action( 'woocommerce_single_product_summary', 'single_product_variable_customization', 3, 0 );
function single_product_variable_customization() {
    global $product;

    // Only for variable products on single product pages
    if ( $product->is_type('variable') && is_product() ) {

    ##  ==>  ==>  Here goes your php code (if needed)  ==>  ==>  ##

    // Passing a variable to javascript
    $string1 = "The selected Variation ID is: ";
    $string2 = "No Variation ID is selected ";
    ?>
    <script>
    jQuery(document).ready(function($) {

        // Initializing
        var myText1 = '<?php echo $string1; ?>', myText2 = '<?php echo $string2; ?>';

        // Get and display the default variation ID after add-to-cart button (initialization)
        if( '' != $('input.variation_id').val() )
            $('div.woocommerce-variation-add-to-cart').after('<div class="selected-variation-id">'+myText1+$('input.variation_id').val()+'</div>');
        else
            $('div.woocommerce-variation-add-to-cart').after('<div class="selected-variation-id">'+myText2+'</div>'); // No ID selected

        console.log($('input.variation_id').val()); // Output in the browser console


        // Get and display the chosen variation ID after add-to-cart button
        $('select').blur( function(){
            if( '' != $('input.variation_id').val() )
                $('div.selected-variation-id').html(myText1+$('input.variation_id').val());
            else
                $('div.selected-variation-id').html(myText2); // No ID selected

            console.log($('input.variation_id').val()); // Output in the browser console
        });
    });
    </script>
    <?php
    }
}

代碼在您的活動子主題（或主題）的function.php文件中，或者在任何插件文件中。

該代碼已在WooCommerce 3+上進行了測試，並且可以正常工作。

因此，在此基礎上，您可以創建自己的函數來滿足您的要求（因為您不再提供任何必要的細節或代碼）。

一些相關的答案示例用法（與jQuery和Woocommerce單個產品頁面一起使用）：

• 重命名WooCommerce 3中缺貨產品的“添加到購物車”按鈕
• 在WooCommerce 3中將可變產品價格替換為選定的變化價格
• 可變產品選擇器：獲取實時選定的值
• 將選定的產品變化數據傳遞到聯系表7查詢表中