Woocommerce：如何在标题上显示产品属性名称和类别名称

Question

使用此线程中提供的答案（ Woocommerce: How to show Product Attribute name on title when in a category page and "filtering" products via '?pa_attribute=' on address bar ）我想显示类别和属性姓名。 我有一个单独的 JS function 当前正在应用过滤器时更新 page_title 但仅在 ajax 完成后加载。 因此，在这种情况下，直到应用过滤器后才会加载。

如果用户使用导航进入类别，目前只有属性显示在 page_title 中。 还希望显示类别。 我相信如果我将我的产品组织到子类别中，这将是开箱即用的，但由于过滤的设置方式，我选择不使用 go 这条路线。 如果有人感兴趣，我可以更详细地解释为什么我必须采用这种方法。

我已将注释掉的代码留在其中，以便您可以看到我尝试采用的方法。 如果这令人困惑，可以编辑它。

add_filter( 'woocommerce_page_title', 'custom_woocommerce_page_title', 15, 2 );

function custom_woocommerce_page_title( $page_title ) {
    if ( is_archive() ) {
        $exists_attr = false;

        foreach ( $_GET as $index => $value ) {
            if ( substr( $index, 0, 3 ) === 'pa_' ) {
                //$cat_id = wc_category_taxonomy_id_by_name( $index );
                $attr_id = wc_attribute_taxonomy_id_by_name( $index );

                if ( $attr_id === 0 && $cat_id ) {
                    continue;
                }

                if ( ! $exists_attr /* && ! $exists_cat */) {
                    $exists_attr = true;
                    //$exists_cat = true;

                    $page_title .= ' ';
                } else {
                    $page_title .= ' ';
                }

                //$terms = get_the_terms( $post->ID, 'product_cat' );
                $term = get_term_by( 'slug', esc_html( $value ), $index );
                $page_title =  /*$terms->name . ': ' .  */ $term->name;                     
                        
            }
        }

    }

    // Need to add category name after attribute term name.

    return $page_title;

}

此外，我还包含了我用来在过滤器选择发生时应用 page_title 的 JS。 理想情况下，如果我可以通过 JS 文件处理这一切，那就太好了，因为我对 JS 更加熟悉，并且刚刚开始深入研究 php。 我正在使用 WOOF - WooCommerce 产品过滤器并修改一些代码来完成我需要的。

(function() {
  var machineEl = document.getElementsByClassName('woof_select woof_select_pa_machine')[0];
  var processEl = document.getElementsByClassName('woof_select woof_select_pa_processing')[0];
  var optionMachine = machineEl.querySelector("option[selected='selected']");
  var optionProcess = processEl.querySelector("option[selected='selected']");
  var machineValue = optionMachine.innerHTML;
  var processValue = optionProcess.innerHTML;
  var result = document.getElementsByClassName('woocommerce-products-header__title page-title')[0];
  if (machineValue != 'Product Machine' && processValue != 'Product Processing') {
            result.innerHTML = machineValue + " " + processValue;            
  }
  else if (machineValue != 'Product Machine') {
            result.innerHTML = machineValue;            
  }
  else if (processValue != 'Product Processing') {
            result.innerHTML = processValue;            
  }       
})()

Answer 1

因此，能够通过获取我的 JS 并将其作为脚本添加到我的函数中来使其工作。php。 所以基本上我能够消除 custom_woocommerce_page_title 过滤器。

Function.php

<?php

add_action('wp_footer', 'onLoadPageTitle');
function onLoadPageTitle() {
    ?>
        <script>
                    
  machineEl = document.getElementsByClassName('woof_select woof_select_pa_machine')[0];
  processEl = document.getElementsByClassName('woof_select woof_select_pa_processing')[0];
  optionMachine = machineEl.querySelector("option[selected='selected']");
  optionProcess = processEl.querySelector("option[selected='selected']");  
  if (optionMachine != null) {
    machineValue = optionMachine.innerHTML;
  }
  else {
    machineValue = "";
  }
  if (optionProcess != null) {
    processValue = optionProcess.innerHTML;
  }
  else {
    processValue = "";
  }
  result = document.getElementsByClassName('woocommerce-products-header__title page-title')[0];
  result.innerHTML = machineValue + " " + processValue;   

        </script>
    <?php
}

?>

然后当在 AJAX 之后出现新的 select 时更新标题的 woof woocommerce 过滤器 js。

(function() {
  machineEl = document.getElementsByClassName('woof_select woof_select_pa_machine')[0];
  processEl = document.getElementsByClassName('woof_select woof_select_pa_processing')[0];
  optionMachine = machineEl.querySelector("option[selected='selected']");
  optionProcess = processEl.querySelector("option[selected='selected']");  
  if (optionMachine != null) {
    machineValue = optionMachine.innerHTML;
  }
  else {
    machineValue = "";
  }
  if (optionProcess != null) {
    processValue = optionProcess.innerHTML;
  }
  else {
    processValue = "";
  }
  result = document.getElementsByClassName('woocommerce-products-header__title page-title')[0];
  result.innerHTML = machineValue + " " + processValue; 
})()

可能会通过在 ajax 之后从 woof js 中调用脚本 function 来减少它。