css WordPress Woocommerce -可变产品价格低于标题

6tdlim6h 于 2023-03-20 发布在 WordPress

关注(0)|答案(3)|浏览(208)

WordPress版本：4.6.1
Woocommerce版本：2.6.4
当使用标准的woocommerce和您添加一个具有不同价格值的可变产品时，Woocommerce会在产品标题下方显示该产品的最低和最高价格。€50 - €100
我在functions.php文件中添加了以下代码，以禁用可变产品的此行为：

/** Hide Variable prices */
add_filter( 'woocommerce_variable_sale_price_html', 'bbloomer_variation_price_format', 10, 2 );

add_filter( 'woocommerce_variable_price_html', 'bbloomer_variation_price_format', 10, 2 );

function bbloomer_variation_price_format( $price, $product ) {

 if (is_product()) {
    return $product->get_price();
 } else {
        // Main Price
        $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
        $price = $prices[0] !== $prices[1] ? sprintf( __( '%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( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

        if ( $price !== $saleprice ) {
        $price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
        }
        return $price;
         }

}

// show variation price
add_filter('woocommerce_show_variation_price', function() {return true;});

//override woocommerce function
function woocommerce_template_single_price() {
    global $product;
    if ( ! $product->is_type('variable') ) { 
        woocommerce_get_template( 'single-product/price.php' );
    }
}

这一切都运行良好。但现在可变价格显示在产品选项下方，如下图所示。我想在标题下方显示可变价格。

**简单产品。我想在可变产品上显示这样的价格。**x1c 0d1x
**当前可变产品：**€150是选择颜色和尺寸的结果。选择这些值后，价格将显示在变量下方。我希望此变量价格显示在标题下方，就像一个简单的产品一样。

我花了几个小时寻找如何做到这一点，但我唯一发现的是改变woocommerce-core文件。这不是一个选项，因为woocommerce需要更新。

更新

为了解决**@Amy Ling**的困惑。我不希望显示最低或最高价格。我需要在标题下方显示当前变体的价格。例如：一只鞋是红色的，尺码30 =〉€150，一只鞋是红色的，尺码40 =〉€170，等等。

css

来源：https://stackoverflow.com/questions/40025959/wordpress-woocommerce-variable-product-price-below-title

3条答案

按热度按时间

lkaoscv71#

除了您已有的代码之外，请将以下代码添加到主题functions.php文件中：

function shuffle_variable_product_elements(){
    if ( is_product() ) {
        global $post;
        $product = wc_get_product( $post->ID );
        if ( $product->is_type( 'variable' ) ) {
            remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );

            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_title', 10 );

            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30 );
        }
    }
}
add_action( 'woocommerce_before_single_product', 'shuffle_variable_product_elements' );

说明

使移动这些元素变得稍微复杂的问题是变量产品是动态的，价格元素是用\woocommerce\assets\js\frontend\add-to-cart-variation.js中的JavaScript操作的。这个价格元素是动态放置在<div class="woocommerce-variation single_variation">中的，它必须留在类“variations_form”的变量的<form>元素中。
我所做的就是把价格移到表格的顶部，因为它必须留在表格中，然后我把标题和摘录从表格上方移走，再把它们加回表格中.

这些操作也可能出现在价格之上。

我上面修改的动作对于我解决这个问题的主题来说已经足够了，但是，woocommerce_single_product_summary动作还包含了一些其他函数：

woocommerce_template_single_rating
woocommerce_template_single_meta
woocommerce_template_single_sharing
woocommerce_template_single_price（您已经用自己的代码有效地处理了这个问题

根据您的主题和您使用的WooCommerce设置，这些可能也需要删除并通过woocommerce_before_variations_form操作重新添加。

赞(0）回复(0）举报 2023-03-20

g2ieeal72#

您可以通过主题文件夹覆盖WooCommerce模板文件。这不会影响您更新插件时的任何操作。
下面是一个链接，其中包含有关它的详细文档：https://docs.woocommerce.com/document/template-structure/
很多文件都有一个do_action('woocommerce_add_this_info_piece');，你可以在位于/woocommerce/includes/wc-template-hooks.php的模板钩子中找到添加到其中的信息

更新

下载WooCommerce并创建一个可变和简单的产品后，简单和可变定价都已经显示在标题后面。下面的代码删除了最高定价，只留下最低定价。
要仅显示最高定价，请更改

wc_price( $prices[0] ) ) : wc_price( $prices[0] );

到

wc_price( $prices[1] ) ) : wc_price( $prices[1] );

下面是代码：http://www.templatemonster.com/help/woocommerce-how-to-remove-variable-products-available-price-range.html#gref

/*
Disable Variable Product Price Range: 
*/

add_filter( 'woocommerce_variable_sale_price_html', 'my_variation_price_format', 10, 2 );

add_filter( 'woocommerce_variable_price_html', 'my_variation_price_format', 10, 2 );

function my_variation_price_format( $price, $product ) {

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

if ( $price !== $saleprice ) {
$price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
}
return $price;
}

赞(0）回复(0）举报 2023-03-20

xurqigkl3#

我有类似的问题（即使我使用不同的手段），现在感谢詹姆斯琼斯代码，我可以完成它！
我的计算方法是这样的：
我有变化的产品页面，我想隐藏价格范围，但保持单一产品的价格。
我使用这两个CSS代码段来完成此操作：

/*Hide Price Range on Variation Product Page*/
.single-product .entry-summary .price {
  display: none;  
}

/*Show and Modify Single Product Price on Variation Product Page*/
.single-product .entry-summary .woocommerce-variation-price .price {
  display: block; 
  color: green !important;
  font-weight: 500 !important;
  margin-top: 12px !important;
  margin-bottom: 16px !important;
}

在我做了这个之后，我想把单个产品的价格移到标题下面的地方（以前的价格变化范围），在functions.php中添加James代码帮助我实现了这个目标。谢谢！

赞(0）回复(0）举报 2023-03-20

我来回答

css WordPress Woocommerce -可变产品价格低于标题

3条答案

相关问题

热门标签

最新问答