WooCommerce - 在选择上述选项之前，如何禁用属性选项菜单？

Question

在可变产品的产品页面上，我想使用 javascript/jQuery 来控制属性下拉菜单。

基本上，我希望选项菜单 2 可以选择只有当用户已经从选项菜单 1 中选择了一个选项

例子：

我的可变产品

• 平台：选项菜单 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 -->

这对我有用。希望它可以帮助某人。

我在这里得到了额外的帮助（也可能有用）：

Enable Sequential Select Menus when you don't know the IDs