主页 / coding / 问题 / 79554787
Accepted
HNNX
Asked: 2025-04-04 16:03:43 +0800 CST

如果与表单/下拉菜单交互后只有一个可用，Woocomerce 会自动选择产品变体

  • 772

我正在尝试为我的 woocommerce 产品找到一个解决方案，其中包含用户选择一个选项后的属性。

所有解决方案总是让我找到这个仅在页面加载时触发的代码片段 - 而不是在用户选择选项或与表单交互时触发。

add_filter('woocommerce_dropdown_variation_attribute_options_args','fun_select_default_option',10,1);
function fun_select_default_option( $args)
{
    if(count($args['options']) > 1) 
        $args['selected'] = $args['options'][0];
    return $args;
}

在我的例子中，我有一个产品，其属性为：功率 - 50W 和 100W

尺寸如果我选择 50W，则只剩下 100mm，并且应该自动选择如果我选择 100W，则只剩下 200mm，并且应该自动选择

音量如果我选择 50W，则只剩下 1 个变体，并且应该自动选择如果我选择 100W，则只剩下 1 个变体，并且应该自动选择

我尝试使用 javascript，但它在初始加载时就搞砸了。这似乎很奇怪，这不是 woocommerce 的现成选项。

是否有人曾经遇到过这个任务，或者知道我是否需要深入研究自定义 JS 而不是 PHP 钩子？

wordpress

1 个回答

  1. Best Answer

    页面最初构建时，您的代码在服务器端运行。它无法对浏览器中客户端发生的用户交互做出反应。您绝对需要 javascript。

    您可以将此代码添加到主题文件夹中：

    jQuery(function($) {
    // Function to check and auto-select single options
    function autoSelectSingleOption() {
        // Iterate through each variation form (usually only one per page)
        $('.variations_form').each(function() {
            const $form = $(this);
            // Iterate through each select dropdown within this form
            $form.find('.variations select').each(function() {
                const $select = $(this);
                let enabledOptions = [];

                // Find enabled options (ignoring the placeholder if it exists)
                $select.find('option').each(function() {
                    const $option = $(this);
                    // Check if it's a real value and not disabled (WC might add 'disabled' class or attribute)
                    if ($option.val() && !$option.is(':disabled') && !$option.prop('disabled')) {
                         enabledOptions.push($option);
                    }
                });

                // If exactly one enabled option is found
                if (enabledOptions.length === 1) {
                    const $singleEnabledOption = enabledOptions[0];
                    // Check if it's not already selected
                    if ($select.val() !== $singleEnabledOption.val()) {
                        console.log('Auto-selecting:', $select.attr('id'), $singleEnabledOption.val()); // Debugging log
                        // Set the value
                        $select.val($singleEnabledOption.val());
                        // Trigger the change event so WC updates price, potentially other attributes
                        $select.trigger('change');
                    }
                }
            });
        });
    }

    // --- Event Binding ---

    $('.variations_form').on('woocommerce_variation_select_change updated_wc_div', function() {
        // Use a slight delay to ensure the DOM updates (option enabling/disabling) are complete
        setTimeout(autoSelectSingleOption, 100);
    });
  

});

    将以下代码添加到主题的 functions.php 中并设置 js 文件的正确路径：

    function my_theme_enqueue_variation_script() {
    // Only enqueue on single product pages
    if ( is_product() ) {
        wp_enqueue_script( 'custom-variations', get_stylesheet_directory_uri() . '/js/custom-variations.js', array('jquery'), wp_get_theme()->get('Version'), true );
        
    }
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_variation_script' );
    • 0

相关问题