WooCommerce-在選擇以上一項之前，如何禁用屬性選項菜單？

Question

在變量產品的“產品”頁面上，我想使用javascript / jQuery來控制屬性下拉菜單。

基本上，我希望僅當用戶已經從選項菜單1中選擇了一個選項時 ， 才可以選擇選項菜單2。

例：

我的可變產品

• 平台：選項菜單1（例如，用戶必須選擇平台，例如Mac | PC，然后才能繼續...）
• 版本：選項菜單2（例如，“完整版本|升級。必須在...之前選擇”）
• 運輸：選項菜單3（盒裝|下載）

如果有人甚至可以指導我使用javascript / jQuery訪問這些選項菜單的正確方法，我可以嘗試從那里獲取。

謝謝你的幫助。

Answer 1

終於解決了...

您需要復制：'/wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.php'

到：'/wp-content/themes/my_theme/woocommerce/single-product/add-to-cart/variable.php'

這是生成“可變產品”屬性的“選擇”菜單的文件，因此您正在創建要針對您的主題進行編輯的版本。

在</form>之后。 第107行添加以下內容：

<!-- MySite Menu Additions -->
    <script type="text/javascript">
    <?php if ( ! empty( $available_variations ) ) { ?>

        jQuery(document).ready(function($) {

            <?php
                $loop = 0;
                foreach ( $attributes as $name => $options ) {
                $loop++;
            ?>
                $(function() {
                    $( "#<?php echo $name ?>" ).change(function() {
                        if ($(this).val() != "") { // Because "Choose an option..." has a value of ''
                            $(this).closest( 'tr' ).next().find( '.value-variable' ).prop( "disabled", false );
                        }
                        else
                        {
                            $(this).closest( 'tr' ).nextAll().find( '.value-variable' ).prop( "disabled", true );
                            $(this).closest( 'tr' ).nextAll().find( '.value-variable' ).val( "" );

                        }
                    });
                });

            <?php } //End foreach ?>

        });

    <?php } ?>

    </script>
<!-- End: MySite Menu Additions -->

這對我行得通。 希望它可以幫助某人。

我在這里獲得了其他幫助（可能也很有用）：

當您不知道ID時啟用順序選擇菜單