Wordpress 将其作为单选按钮显示

在WooCommerce中，是否可以在不使用插件的情况下将变体下拉列表更改为单选按钮？我希望在“变体”部分进行以下设置：

• 1升（10欧元）
• 2升（20欧元）
• 3升（25欧元）

选择选项时，底部的价格应自动更改

---

谢谢你

我不知道没有插件怎么做，但我建议你放弃这个要求，使用插件。这正是您想要的：

EDIT:added

variation\u check（）

和JS variation checking感谢@ThomasB

EDIT2：确保

variation\u check（）

还检查缺货状态，以便在可以缺货时进行选择

我实现这一点的最佳方法是在选择下拉列表之后直接添加单选按钮标记，然后使用CSS隐藏选择下拉列表。您还需要一些自定义JS来触发隐藏的选择值更改，以便您的价格将根据您选择的单选按钮进行更改

下面是我如何添加标记的：

function variation\u单选按钮（$html，$args）{
$args=wp\u parse\u args（应用过滤器（'woocommerce\u dropdown\u variation\u attribute\u options\u args'，$args），数组(
“选项”=>false，
'attribute'=>false，
“产品”=>错误，
'所选'=>false，
'名称'=>''，
“id'=>”，
“类”=>“”，
“show_option_none”=>“‘选择一个选项’、‘woocommerce’”，
));
if（false==$args['selected']&&$args['attribute']&&$args['product']WC_产品实例）{
$selected_key='attribute_'。清理_标题（$args['attribute']）；
$args['selected']=isset（$\u请求[$selected\u键]）？wc\u清理（wp\u反斜杠（$\u请求[$selected\u键]）：$args['product']->获取变量\u默认属性（$args['attribute'）；
}
$options=$args['options']；
$product=$args['product']；
$attribute=$args['attribute']；
$name=$args['name']？$args['name']：'attribute'。清理标题（$attribute）；
$id=$args['id']？$args['id']：清理标题（$attribute）；
$class=$args['class']；
$show_option_none=（bool）$args['show_option_none']；
$show_option_none_text=$args['show_option_none']？$args['show_option_none']：uuu（'Choose an option'，'woocommerce'）；
if（空（$options）&！空（$product）&&！空（$attribute））{
$attributes=$product->get_variation_attributes（）；
$options=$attributes[$attribute]；
}
$radios=''；
如果（！空（$options））{
如果（$product&&TAXINOMATY_存在（$attribute））{
$terms=wc\u get\u product\u terms（$product->get\u id（），$attribute，数组(
'字段'=>'全部'，
));
foreach（$terms作为$term）{
if（在数组中（$term->slug$options，true））{
$id=$name.'-'.$term->slug；
$radios.=''.esc_html（应用过滤器（$term->name'）；
}
}
}否则{
foreach（$options作为$option）{
$id=$name.'-'.$option；
$checked=sanitize_title（$args['selected']）==$args['selected']？checked（$args['selected']，sanitize_title（$option），false）：checked（$args['selected']，$option，false）；
$radios.=''.esc_html（应用过滤器（'woocommerce_variation_option_name'，$option））；
}
}
}
$radios.=''；
返回$html.$radios；
}
添加过滤器（'woocommerce\u下拉列表\u变体\u属性\u选项\u html'、'variation\u单选按钮'，20,2）；
功能变化检查（$active，$variation）{
如果（！$variation->is_in_stock（）&&&！$variation->backorders_allowed（））{
返回false；
}
返回$active；
}
添加过滤器（“变更激活”、“变更检查”，10,2）；

下面是我使用的JS：

$（document）.on（'change'，'）。变量无线电输入'，函数（）{
$（'.variation radios input:checked'）。每个（函数（索引，元素）{
变量$el=$（元素）；
var thisName=$el.attr（'name'）；
var thisVal=$el.attr（'value'）；
$（'select[name=“”+thisName+“]'）.val（thisVal.trigger（'change'）；
});
});
$（文档）.on（'woocommerce\u update\u variation\u values'，function（）{
$（'.variation radios input'）。每个（函数（索引，元素）{
变量$el=$（元素）；
var thisName=$el.attr（'name'）；
var thisVal=$el.attr（'value'）；
$el.removeAttr（‘禁用’）；
如果（$（'select[name=“”+thisName+”]选项[value=“”+thisVal+“]”）是（':disabled'））{
$el.prop（'禁用'，正确）；
}
});
});

您可以使用插件。这对我来说很有效。

看起来该插件已经2年或更长时间没有更新了，还有成堆的未经解答的支持问题。试试这个：很高兴看到一个答案不是“去获取另一个插件”。@ThomasB这并不意味着“它不工作，”它一直在等待您的到来，并通过提供更巧妙、完整的解决方案提供帮助：）c@ThomasB见鬼，是的！那很有效！我编辑了我的解决方案，包括一些JS，以确保单选按钮在需要时也被禁用@cfx OHBOYYY！这就是为什么我喜欢软件。。。。我告诉过你，我钦佩你。很好的解决方案！我改变了我的代码，并将很快在生产上运行：）太爱你了！谢谢@ThomasB！这是一次伟大的合作。我还添加了一个小贴士，以防产品延期订购！：D@ThomasB你能用你的完整代码链接到一个要点，或者发布一个新问题吗？