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'

to：'/ 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

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

1 个答案: