首页 文章

Wordpress Woocommerce - 可变产品价格低于 Headers

提问于
浏览 次
1

Wordpress版本： 4.6.1

Woocommerce版本： 2.6.4

使用标准的woocommerce时，您可以添加具有不同价格值的可变产品 . Woocommerce显示该产品低于产品 Headers 的最低和最高价格 . 像这样： €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' );
    }
}

这一切都运作良好 . 但现在可变价格显示在产品选项下方，如下图所示 . I would like to show the variable price below the title.

Simple product. I would like to show the price like this on a variable product.
enter image description here

Variable product right now: €150是选择颜色和尺寸的结果 . 选择这些值后，价格会显示在变化之下 . 我希望这个变化价格显示在 Headers 下方，就像一个简单的产品 .

enter image description here

我花了好几个小时才发现它是如何做到的，但我发现的唯一一件事就是改变了woocommerce-core文件 . 这不是一个选项，因为需要更新woocommerce .

UPDATE

解决 @Amy Ling 的困惑 . 我不希望显示最低或最高价格 . 我需要 Headers 下方显示的当前变化的价格 . 例如：鞋子是红色的，尺码30 => 150欧元，鞋子是红色的，尺码40 => 170欧元等 . 额外的图像：

enter image description here

php html css wordpress woocommerce

3 回答

  • 0

    除了您拥有的代码，请将以下内容添加到主题 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' );

    Explanation

    使这些元素移动稍微复杂的问题是变量产品是动态的，而价格元素是在 \woocommerce\assets\js\frontend\add-to-cart-variation.js 中用JavaScript操纵的 . 此price元素动态放置在 <div class="woocommerce-variation single_variation"> 中，该元素必须保留在类'variations_form'的变体的 <form> 元素中 .

    所以，我对这些操作所做的就是将价格移到表单的顶部，因为它必须保留在表单中 . 然后我从表单上方删除了 Headers 和摘录，并将其添加回表单内部 .

    These actions may appear above price too.

    我上面改变的动作足以满足我解决这个问题的主题 . 但是，连接到 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 操作 .

    回复于
  • 5

    您可以通过主题文件夹覆盖WooCommerce模板文件 . 当您对插件进行更新时，这不会影响任何内容 .

    这是一个链接，上面有详细的文档：https://docs.woocommerce.com/document/template-structure/

    很多文件都有 do_action('woocommerce_add_this_info_piece'); . 您可以在位于 /woocommerce/includes/wc-template-hooks.php 的模板挂钩中找到添加到其中的信息 .

    UPDATE

    下载WooCommerce并创建可变和简单的产品后 . 简单和可变定价都已经显示在 Headers 之后 . 下面的代码删除了最高价格，只留下最低价格 .

    要仅显示最高价格，请更改

    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;
}
    回复于
  • 1

    我有类似的问题（尽管我使用了不同的方法），现在感谢James Jones的代码，我可以完成它！

    我的解决方法看起来像这样：

    我有变化产品页面，我想隐藏价格范围，但保持单一产品价格 .

    我使用这两个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;
}

    在我这样做之后，我想将单个产品价格移到 Headers 下的位置（价格变化范围之前），将James代码添加到functions.php帮助我实现了这个目标 . 谢谢！

    回复于

相关问题