Tiếp phần 1, phần này chúng ta sẽ hoàn thành chức năng này ra ngoài front-end (người  dùng)

Để hiện thị được ra ngoài front-end, ngay kế bên TITLE của thì các bạn phải thực hiện đúng file hiện thị của chúng năng đó, vậy chúng ta vào đường dẫn wp-content\themes\flatsome\inc\shortcodes tìm đến file titles_dividers.php & thêm đoạn code bên dưới (thêm trước đoạn code return section-title nhé)

if ( isset( $atts[ 'hdevvn_cat_ids' ] ) ) {
  $ids = explode( ',', $atts[ 'hdevvn_cat_ids' ] );
  $ids = array_map( 'trim', $ids );
  $parent = '';
  $orderby = 'include';
} else {
  $ids = array();
}

$args = array(
  'include'    => $ids,
  'pad_counts' => true,
  'child_of'   => 0,
);

$product_categories = get_terms( 'product_cat', $args );

$hdevvn_html_show_cat = '';
if ( $product_categories ) {
  foreach ( $product_categories as $category ) {
    $term_link = get_term_link( $category );
    $thumbnail_id = get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true  );
    if ( $thumbnail_id ) {
      $image = wp_get_attachment_image_src( $thumbnail_id, $thumbnail_size);
      $image = $image[0];
    } else {
      $image = wc_placeholder_img_src();
    }
    $hdevvn_html_show_cat .= '
      <li class="hdevvn_cats">
          <a href="'.$term_link.'">
            <image src="'.$image.'"/>
            <h5>'.$category->name.'</h5>
          </a>
      </li>
    ';
  }
}

Đoạn code chúng ta thực hiện:

  • Dòng code 1-8: lấy ID category trong quản trị (ux mà chúng ta tạo & chọn category hiện thị đó)
  • Dòng code 16: Get category
  • Dòng code 18-30: Lấy những thông tin cần thiết muốn hiện thị & đặt cho nó 1 bến là $hdevvn_html_show_cat

Bây giờ muốn in nó ra thì thay thế đoạn return bằng đoạn sau:

return '<div class="container section-title-container" '.get_shortcode_inline_css($css_args).'><'. $tag_name . ' class="section-title section-title-'.$style.'"><b></b><span class="section-title-main" '.get_shortcode_inline_css($css_args_title).'>'.$icon.$atts['text'].$small_text.'</span>
  <span class="hdevvn-show-cats">'.$hdevvn_html_show_cat.'</span>
  <b></b>'.$link_output.'</' . $tag_name .'></div><!-- .section-title -->';

Thêm style cho nó, cho dể nhìn

.hdevvn-show-cats{
  border: none !important;
}
span.hdevvn-show-cats li{
    display: block;
    width: 74px;
    float: left;
    margin: 0 8px;
}
span.hdevvn-show-cats li a{
  font-size: 11px;
}