可变产品选择器:获取实时选定值

2021-12-22 00:00:00 jquery php wordpress woocommerce variations

在 WooCommerce 中,使用以下代码在简单和可变产品的产品价格后添加自定义标签:

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );add_filter('woocommerce_price_html','prices_custom_labels', 10, 2);函数价格_custom_labels( $price, $product ){//在此处设置您的自定义标签名称$per_dozen = ' '.__('每打', 'woocommerce');$per_case = ' '.__('每箱 (20 打)', 'woocommerce');//1) 可变产品if ($product->product_type != 'simple' && $product->variation_id ) {//获取变体的现有属性值数组$variation_attribute_value = $product->variation_data;//这里我们只保留这个数组中的最后一个值$last_variation_attribute_slug_value = ' ' .结束($variation_attribute_value);//在属性值 slug 中查找单词 'case'$has_case = strstr($last_variation_attribute_slug_value, 'case');//根据属性值设置正确显示的标签slug如果( $has_case )$attribute_quantity_name_value = $per_case;别的$attribute_quantity_name_value = $per_dozen;//这里是输出价格 + 自定义标签$price = '<ins class="highlight">'.woocommerce_price( $product- >regular_price ).$attribute_quantity_name_value.'</ins>';}//2) 简单的产品别的{//这里是输出价格 + 自定义默认标签$price = '<ins class="highlight">'.woocommerce_price( $product- >regular_price ).$per_dozen.'</ins>';}返回 $price;}

但在可变产品中,实时显示价格中附加的自定义标签存在问题.我使用的代码只显示在每打"实时价格之后.

我需要在自定义数量"选择器上获取所选值以在价格后添加正确的标签:

  • 如果选择的值为打",我需要在实时价格后显示每打",
  • 如果选择的值为一箱(20打)",我需要在实时价格后显示每箱(20打)".

这个截图是我对所有情况的实际截图:

在我的网站上查看此问题<强>特定产品页面

<块引用>

因此,我需要获取属性数量"选定的值以将正确的标签附加到实时价格.

有什么帮助吗?我该怎么做才能让它发挥作用?

我尝试了很多代码,但我无法让它工作.

解决方案

实现此功能的唯一方法是使用 Javascript/jQuery,但它很复杂,因为 WooCommerce 已经在其上运行了一些 Javascript/Ajax 代码.

首先,不可能检测选择器上的选定客户选择,因为 WooCommerce 从 中删除了 selected" 属性> html 标签.

<块引用>

一旦客户进行了完整的选择(因此从该可变产品中选择了一个变体),Woocommerce 在隐藏的<代码><输入>中添加相应的变体 ID 值代码> html 字段 并显示相应的价格.

我们的 PHP 代码将传递给 javascript 变体 ID 的数组,用于该可变产品,带有相应的数量"值. 属性.

然后我们可以在