【问题标题】:Woocommerce, show selected attribute title after a product titleWoocommerce,在产品标题后显示选定的属性标题
【发布时间】:2021-12-18 22:13:40
【问题描述】:

我发现这段代码在标题后显示属性:Add specific product attribute after title on Woocommerce single products

    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'custom_template_single_title', 5 );
function custom_template_single_title() {
    global $product;

    $brand_name = $product->get_attribute('brand-name');

    echo '<h1 class="product_title entry-title">';
    the_title();
    if( $brand_name )
        echo ' - ' . $brand_name;
    echo '</h1>';
}

可行,但我尝试只显示一个要出现的选定属性。

颜色的示例属性:白色和黑色

代码的工作原理是这样的

“产品名称 - 白色,彩色”

我想展示的是

如果没有选择任何属性

“产品名称”(不要出现任何东西)

如果选择白色,显示喜欢

“产品名称 - 白色”

【问题讨论】:

  • 有效,但不是最好的实现,你的问题是:你不想要标题而只想要属性?,如果那样,你可以删除 the_title();从代码
  • @Uxell 请解释更多,或者至少提供一个屏幕截图来澄清你的问题。
  • 在此代码中显示一个示例:属性颜色有蓝白色和绿色显示所有它们都像:“产品标题 - 蓝色,白色,绿色”,我想要做的是只显示选定的属性,喜欢选择的是白色“产品标题 - 白色”
  • @Ruvee 我编辑了问题以便清楚地解释。

标签: javascript wordpress function woocommerce


【解决方案1】:

在您的 functions.php 中添加代码。将 pa_color 替换为您的属性

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'custom_template_single_title', 5 );
function custom_template_single_title() {
   global $product;

   $brand_name = $product->get_attribute('brand-name');
   $brand_output = '';
   if( $brand_name )
       $brand_output = ' - ' . $brand_name;

   echo sprintf('<h1 class="product_title entry-title">%s %s <span></span></h1>',get_the_title(),$brand_output);
}

function change_title_on_color_change() { 
    global $product;
    if($product->get_type() !== 'variable') return;    
?>
<script>
jQuery(function($) {

    $(document).ready(function() {
        update_product_title();
    });
    $('select#pa_color').change( function(){
        update_product_title();
    });
    function update_product_title() {
        var color_val = $('select#pa_color option').filter(':selected').val();
        var color_text = $('select#pa_color option').filter(':selected').text();
        if(color_val.length > 0) {
            $('.product_title.entry-title span').text(' - ' + color_text);
        } else {
            $('.product_title.entry-title span').empty();
        }
    }
});
</script>
<?php
}
add_action('woocommerce_after_single_product','change_title_on_color_change');

【讨论】:

  • 感谢分享,但不工作改变了 3 #pa_color 属性 slug 不工作@Martin
  • 如果你的属性组是 Color 应该是 pa_color。不是蛞蝓:)
  • 谢谢您,先生,我留下您的干净代码是彩色的,但仍然无法正常工作
  • 在 ,5 和 ,100 之前的前 2 行添加空格,例如 , 5 和 , 100 有效,但标题重复
  • 你还在使用你的动作吗?如果您想在 echo '' 处使用您的操作;添加跨度,例如 echo '';。还要检查这个 - prnt.sc/1yfd54o
猜你喜欢
  • 2022-01-02
  • 2018-12-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-28
  • 2018-06-14
  • 1970-01-01
  • 2021-06-15
相关资源
最近更新 更多