javascript - 如何在使用 Elementor 构建的可变产品页面上将起始价格范围替换为实际变化价格？

Question

我在functions.php 中添加了这段代码，以在产品价格旁边显示折扣百分比和折扣率（对于可变产品）。

// Always Display the selected variation price for variable products (already working)
add_filter( 'woocommerce_show_variation_price', 'filter_show_variation_price', 10, 3 );
function filter_show_variation_price( $condition, $product, $variation ){
    if( $variation->get_price() === "" ) return false;
    else return true;
}

// Remove the displayed price from variable products in single product pages only
add_action( 'woocommerce_single_product_summary', 'remove_the_displayed_price_from_variable_products', 9 );
function remove_the_displayed_price_from_variable_products() {
    global $product;

    // Just for variable products
    if( ! $product->is_type('variable') ) return;

    // Remove the displayed price from variable products
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
}

// Display the selected variation discounted price with the discounted percentage for variable products
add_filter( 'woocommerce_format_sale_price', 'woocommerce_custom_sales_price', 10, 3 );
function woocommerce_custom_sales_price( $price, $regular_price, $sale_price ) {

if ( !is_front_page() ) {
    global $product;
    
    // Just for variable products on single product pages
    if( $product->is_type('variable') && is_product() ) {

        // Getting the clean numeric prices (without html and currency)
        $regular_price = floatval( strip_tags($regular_price) );
        $sale_price = floatval( strip_tags($sale_price) );

        // Percentage calculation and text
        $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
        $savings = round( $regular_price - $sale_price );
        $percentage_txt = $percentage.__(' Discount ', 'woocommerce' );
        $savings_text = __(' Save ', 'woocommerce' ) . '₹' . $savings;

        return  '<span class="web-price">' . wc_price( $sale_price ) . '</span>' . '<span class="incl-text">' . '(inclusive of all taxes)' . '</span>' . '<br>' . '<del>' . '<span class="regular-price-text">' . wc_price( $regular_price ) . '</del>' . '</span>' . '<span class="discount-percentage">' .  $percentage_txt . '</span>' . '|' . '<span class="savings-text">' .  $savings_text . '</span>' ;
    }
    return $price;
}
}

将价格范围更改为“发件人：..”之类的代码如下：

add_filter( 'woocommerce_variable_price_html', 'bbloomer_variation_price_format', 10, 2 );
 
function bbloomer_variation_price_format( $price, $product ) {
 
// 1. Get min/max regular and sale variation prices
 
$min_var_reg_price = $product->get_variation_regular_price( 'min', true );
$min_var_sale_price = $product->get_variation_sale_price( 'min', true );
$max_var_reg_price = $product->get_variation_regular_price( 'max', true );
$max_var_sale_price = $product->get_variation_sale_price( 'max', true );
 
// 2. New $price, unless all variations have exact same prices
 
if ( ! ( $min_var_reg_price == $max_var_reg_price && $min_var_sale_price == $max_var_sale_price ) ) {   
   if ( $min_var_sale_price < $min_var_reg_price ) {
      $price = sprintf( __( 'From: <del>%1$s</del><ins>%2$s</ins>', 'woocommerce' ), wc_price( $min_var_reg_price ), wc_price( $min_var_sale_price ) );
   } else {
      $price = sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $min_var_reg_price ) );
   }
}

// 3. Return $price
 
return $price;
}

现在这里面临的问题如下：

1. 对于所有变体价格相同的可变产品，它不显示实际变体价格，而是显示以下内容：

所有变体价格相同的可变产品

产品网址：https ://staging.websigma.in/sleepyhead/product/sleepyhead-original-3-layered-orthopedic-memory-foam-mattress/

2. 对于每个变体价格不同的其他产品页面，默认的“From ..”正在正确显示，但是从下拉列表中选择任何变体时，价格和折扣显示在“添加到购物车”按钮下方，如下所示：

可变产品具有不同的价格，每种变化和提到的范围 产品 URL：https ://staging.websigma.in/sleepyhead/product/sleepyhead-flip-dual-lateral-high-density-foam-mattress/

现在我们要实现的是默认显示价格/范围。当任何人从下拉列表中选择变体时，从范围应替换为变体价格和折扣。检查下面的参考设计 原始价格应替换为实际变化价格和折扣

有人请查看添加的代码片段并查看代码出了什么问题？我错过了什么吗？我被困住了，任何帮助将不胜感激！

提前致谢。

标签： javascriptwoocommercehook-woocommerceelementorvariations