Wordpress Woocommerce - 标题下方的可变产品价格
Posted
技术标签:
【中文标题】Wordpress Woocommerce - 标题下方的可变产品价格【英文标题】:Wordpress Woocommerce - Variable product price below title 【发布时间】:2017-02-22 20:53:19 【问题描述】: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' );
这一切都很好。但现在可变价格显示在产品选项下方,如下图所示。 我想在标题下方显示可变价格。
简单的产品。我想在可变产品上显示这样的价格。
现在的可变产品: 150 欧元是选择颜色和尺寸的结果。在我选择这些值后,价格出现在变化下方。我希望这个变体价格显示在标题下方,就像一个简单的产品一样。
我花了几个小时寻找如何做,但我发现的唯一一件事就是更改 woocommerce-core 文件。这不是一个选项,因为需要更新 woocommerce。
更新
解决 @Amy Ling 的困惑。我不想显示最低或最高价格。我需要标题下方显示的当前版本的价格。例如:鞋子是红色的,尺码 30 => 150 欧元,鞋子是红色的,尺码 40 => 170 欧元,等等。额外的图片:
【问题讨论】:
你没有很好地解释自己。那么在您添加自定义代码之前,价格是否在正确的位置?你能粘贴一个链接到有问题的页面吗? 不,第一张图片是简单产品。其中显示 1 个价格,我添加它以显示可变价格应该在哪里。第二张图片显示了自定义代码当前可变价格的位置。第三张图片没有自定义代码,显示了2个不同的价格,这不是我想要的。 【参考方案1】:除了您拥有的代码之外,将以下内容添加到您的主题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">
中,它必须保留在变体的 <form>
类“variations_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
操作删除并重新添加这些设置。
【讨论】:
这个答案几乎是完美的。也是很清楚的解释。但我有两个问题。在可变产品上,产品简短摘要现在出现了两次。高于标题 1 倍,低于价格 1 倍。我搜索了钩子,看起来你已经删除并添加了那个部分,所以不知道为什么它会出现两次。同样在其他产品类型上,比如简单的产品,我的标题现在已经消失了。 啊。我们可以通过将代码包装在if()
语句中来规避问题 2,该语句检查产品是否可变。问题 1 在某种程度上取决于您的主题。失败的行是remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
。这适用于默认的 WooCommerce。您的主题可能将摘录与另一个操作相关联,或者优先级可能不同于 20。删除操作时必须设置正确的优先级。
是的,if 语句非常明显,对此感到抱歉。我将在主题中查找相同的钩子和相应的属性,然后您将获得赏金。
感谢您的编辑,我尝试了您的 if 语句,但这似乎并没有触发它。我添加了全球 $product;到它,但这也不会触发 if 语句。我确实找到了我的优先级,即 20。所以这部分工作完美。只有 if 语句现在不会触发
@Christophvh 抱歉,我不在电脑前。我用一些增强的代码编辑了这个问题,可以正确检查变量产品。【参考方案2】:
您可以通过主题文件夹覆盖 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;
【讨论】:
我明白这一点。我试着弄乱那个模板文件。这是哪个:github.com/woocommerce/woocommerce/blob/2.6.0/templates/…。但是变体块(带有价格和选项)在 1 段代码中。因此,当我移动那个单一的变化动作时,会同时围绕可变选项和价格移动。这不是我想要的。我只想要价格 如果定价是 50 - 100 欧元,您希望它显示 50 欧元还是 100 欧元?我刚刚将 woocommerce 下载到我的测试 WP,创建了一个可变产品和一个简单产品。目前这两个价格都在标题下方。当我添加您的代码时,整个可变定价被删除。但是,当我从here 添加代码时,它只是删除了最高定价。我试图复制你看到的价格低于属性但不能。 因此,如果您删除了代码以显示可变定价,我假设可变定价是您想要的位置(在标题下方)。如果您想显示最低价格,请使用上面链接中的代码。如果您想显示最高价格,也可以使用链接中的代码,但将“0”更改为“1”,您会看到此代码 wc_price( $prices[0] ) ) : wc_price( $prices[0] ) ; 那段代码在正确的位置是的,但是该代码将导致 2 个不同的价格。该示例没有不同变化的价格。变化价格需要放在标题下方,只是商品的最低或最高价格。我将在我的原始帖子中添加一个额外的图像。 有些产品可以有 10 种不同的变体,它们都有不同的价格。所以愤怒在 50 欧元到 100 欧元之间,但不仅仅是 50 欧元到 100 欧元【参考方案3】:我遇到了类似的问题(即使我使用了不同的方法),现在感谢 James Jones 的代码,我可以完成它!
我的工作方式是这样的:
我有变体产品页面,我想隐藏价格范围但保持单一产品价格。
我使用这两个 CSS sn-ps 做到了这一点:
/*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;
完成此操作后,我想将单个产品的价格移动到标题下的位置(之前的价格变化范围),将 James 代码添加到 functions.php 帮助我实现了这一点。谢谢!
【讨论】:
以上是关于Wordpress Woocommerce - 标题下方的可变产品价格的主要内容,如果未能解决你的问题,请参考以下文章
Wordpress:仅适用于 Woocommerce 品牌页面的摘录
Woocommerce / Wordpress 将按钮添加到页面
从哪里开始开发 WordPress / WooCommerce 主题? [关闭]
wordpress中的WooCommerce购物车结帐页面中的国家列表里面怎么修改