如何在 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="availability">'+$('div.woocommerce-variation-availability').html()+'');
                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="price">'.$price.'
    <div class='"hidden-variable-price"'>'.$price.'</div>';
}

程式碼可以放置在您的子主題或主題的functions.php 檔案中的任何PHP 檔案。建議使用子主題，以避免在更新主題時遺失任何自訂設定。

新增程式碼後，可變產品頁面將顯示最低可用價格而不是價格範圍。選擇變體後，價格將更新以反映所選變體的價格。

此解決方案與 WooCommerce 3 及更高版本相容。它將可變價格範圍替換為所選的變體價格，確保客戶看到所選產品變體的清晰準確的價格。

以上是如何在 WooCommerce 可變產品頁面上顯示所選的變體價格而不是價格範圍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！