WooCommerce-在选择以上一项之前，如何禁用属性选项菜单? [英] WooCommerce - how do I disable attribute option menus until the one above is selected?

问题描述

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

On the Product page of a Variable Product, I'd like to use javascript/jQuery to control the attribute drop down menus.

基本上，我希望仅当用户已经从选项菜单1"中选择了一个选项时，选项菜单2"才是可选的.

Basically, I want Option Menu 2 to be selectable only when the user has already selected an option from Option Menu 1

示例:

我的可变产品

• 平台:选项菜单1(例如，用户必须选择平台，例如Mac | PC，然后才能继续......
• 版本:选项菜单2(例如，完整版本|升级.必须在...之前选择")
• 运输:选项菜单3(盒装|下载)

如果有人甚至可以指出我使用javascript/jQuery访问这些选项菜单的正确方法，那么我可以尝试从那里获取它.

If someone could even point me to the correct way to access these Option Menus with javascript/jQuery, I could try to take it from there.

感谢您的帮助.

推荐答案

最后解决了这个问题……

Finally worked this out...

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

You need to copy: '/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"

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

该文件会生成变量产品"属性的选择"菜单，因此您正在创建要针对您的主题进行编辑的版本.

That's the file that generates the Select menus for Variable Product attributes, so you're creating a version to edit for your theme.

大约</form>之后.第107行添加以下内容:

After the </form> on approx. line 107 add the following:

<!-- 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 -->

对我有用.希望它能对某人有所帮助.

That works for me. Hope it helps someone.

我在这里获得了其他帮助(可能也很有用):

I got additional help on this here (might also be useful):

在不使用时启用顺序选择菜单知道IDs

这篇关于WooCommerce-在选择以上一项之前，如何禁用属性选项菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！