如何在 WooCommerce 可变产品页面上显示所选的变体价格而不是价格范围？

将可变价格范围替换为 WooCommerce 3 中选择的变化价格

在 WooCommerce 中，可变产品页面显示价格范围而不是单一的价格。虽然这对于某些产品可能有用，但在其他情况下可能并不理想。本文提供了一种解决方案，用所选的变化价格替换价格范围，确保仅显示最低的可用价格。

为了实现此目的，我们将使用自定义 PHP 函数和 jQuery 脚本。 PHP 函数将删除默认价格范围并将其替换为占位符价格。然后，当选择变体时，jQuery 脚本将使用所选变体价格更新占位符价格。

以下是处理此问题的代码：

add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 );
function move_variations_single_price(){
    global $product, $post;

    if ( $product->is_type( 'variable' ) ) {
        // removing the variations price for variable products
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

        // Change location and inserting back the variations price
        add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );
    }
}

function replace_variation_single_price(){
    global $product;

    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    // Sale Price
    $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
    sort( $prices );
    $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice && $product->is_on_sale() ) {
        $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
    }

    ?>
    <style>
        div.woocommerce-variation-price,
        div.woocommerce-variation-availability,
        div.hidden-variable-price {
            height: 0px !important;
            overflow:hidden;
            position:relative;
            line-height: 0px !important;
            font-size: 0% !important;
        }
    </style>
    <script>
    jQuery(document).ready(function($) {
        $('select').blur( function(){
            if( '' != $('input.variation_id').val() ){
                if($('p.availability'))
                    $('p.availability').remove();
                $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class=&quot;availability&quot;>'+$('div.woocommerce-variation-availability').html()+'</p>');
                console.log($('input.variation_id').val());
            } else {
                $('p.price').html($('div.hidden-variable-price').html());
                if($('p.availability'))
                    $('p.availability').remove();
                console.log('NULL');
            }
        });
    });
    </script>
    <?php

    echo '<p class=&quot;price&quot;>'.$price.'</p>
    <div class=&quot;hidden-variable-price&quot; >'.$price.'</div>';
}

代码可以放置在您的子主题或主题的functions.php 文件中的任何PHP 文件。建议使用子主题，以避免在更新主题时丢失任何自定义设置。

添加代码后，可变产品页面将显示最低可用价格而不是价格范围。选择变体后，价格将更新以反映所选变体的价格。

此解决方案与 WooCommerce 3 及更高版本兼容。它将可变价格范围替换为所选的变体价格，确保客户看到所选产品变体的清晰准确的价格。

以上是如何在 WooCommerce 可变产品页面上显示所选的变体价格而不是价格范围？的详细内容。更多信息请关注PHP中文网其他相关文章！