1BANNER 123
4.9/5 - (395 bình chọn)

Element product category của flatsome hiện nay hỗ trợ cũng kha kha option. Tuy nhiên có vẻ những option đó k làm thỏa mãn được các web designer ^^. Nên hôm nay mình chia sẽ một add-on mình viết cho dự án của mình. Các bạn có thể tham khảo thêm element slider thumnail flatsome của mình nhé.

Element product category by Pttuan410

Mình sẽ lấy demo của thằng dienmayxanh để anh em dễ hình dung né.

Title dạng text, chia col đẹp mắt

Tạo code backend của product category flatsome

Shortcode của ux builder flatsome gồm 2 phần, 1 là backend và 1 là frontend.

Phần backend sẽ có nội dung như sau:

function pttuan_category_product_ux_builder(){
  add_ux_builder_shortcode('pttuan_product_cat', array(
    'name'      => __('Pttuan product category'),
    'category'  => __('Content'),
    'info'      => 'Sp của Pttuan',
    'wrap'      => false,
    'options' => array(
       'text' => array(
        'type'       => 'textfield',
        'heading'    => 'Title',
        'default'    => 'Sản phẩm của PTTUAN',
        'auto_focus' => true,
      ),
       'color' => array(
        'type'     => 'colorpicker',
        'heading'  => __( 'Color' ),
        'alpha'    => true,
        'format'   => 'rgb',
        'position' => 'bottom right',
      ),
      'ids' => array(
        'type' => 'select',
        'heading' => 'Categories',
        'param_name' => 'ids',
        'config' => array(
            'multiple' => true,
            'placeholder' => 'Select..',
            'termSelect' => array(
                'post_type' => 'product_cat',
                'taxonomies' => 'product_cat'
            ),
        )
    ),
   ),
  ));
}
add_action('ux_builder_setup', 'pttuan_category_product_ux_builder');

Kết quả sẽ như thế này

Backend product category

Trong này mình tích hợp title, màu sắc và product category. Bạn có thể bỏ bớt mấy cái mình không cần dùng nhé.

Phần backend như vậy là xong. Kế đến là frontend.

Tạo code frontend của product category flatsome

function pttuan_product_cat_shortcode( $atts, $content = null ){
  extract( shortcode_atts( array(
      'ids' => '',
      'text' => 'Sản phẩm của PTTUAN',
      'color' => '',
   ), $atts ) );

   $css_args = array(
   array( 'attribute' => 'margin-top', 'value' => $margin_top),
   array( 'attribute' => 'margin-bottom', 'value' => $margin_bottom),
  );
  $css_args_title = array();
   if($color){
    $css_args_title[] = array( 'attribute' => 'color', 'value' => $color);
  }
      $orderby = 'name';
                $order = 'asc';
                $hide_empty = true ;
                $idss = array();
               if ( isset( $atts[ 'ids' ] ) ) {
                $ids = explode( ',', $atts[ 'ids' ] );
               $ids = array_map( 'trim', $ids );
               $parent = '';
                $orderby = 'include';
    } else {
      $ids = array();
    }
                $cat_args = array(
                    'orderby'    => $orderby,
                    'order'      => $order,
                    'hide_empty' => $hide_empty,
                    'include' => $ids
                );
                $product_categories = get_terms( 'product_cat', $cat_args );
                if( !empty($product_categories) ){
                  $ptt_html_cat_custom = '';
                  $ptt_html_cat_custom .= '<div class="namegroup"'.get_shortcode_inline_css($css_args_title).'>'.$text.'</div>';
                    foreach ($product_categories as $key => $category) {
                  $ptt_html_cat_custom .= '<a href="'.get_term_link($category).'" >';
                  $ptt_html_cat_custom .= '<span>'.$category->name.'</span>';
                  $ptt_html_cat_custom .= '</a>';
                    }
                }
   return '<div class="listgroup" '.get_shortcode_inline_css($css_args).'>'.$ptt_html_cat_custom .'</div>';
   }
add_shortcode('pttuan_product_cat', 'pttuan_product_cat_shortcode');

Xong, kết quả sẽ như thế này.

Hiển thị frontend

Thêm css là xong, ở đoạn này mình css cho dự án của mình nên các bạn thích như thế nào thì tự đổi lại nhé.

.listgroup{
   display: block;
   overflow: hidden;
}
.listgroup a {
 background: #f3f3f3;
 margin: 5px;
 margin-right: 0;
 padding: 20px 0px;
 font-size: 12px;
 color: #666;
 border-radius: 4px;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 36px;
 line-height: 15px;
 float: left;
 overflow: hidden;
 margin-bottom: 10px;
 width: 24%;
 text-align: center;
}
.listgroup img {
    display: block;
    width: 45px;
    height: 45px;
    margin: 0 auto 5px;
    border-radius: 50px;
}
.listgroup span {
    display: block;
    line-height: 1.3em;
    font-size: 13px;
    color: #0064c2;
    text-align: center;
    padding: 0 5px;
}
.namegroup {
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
}

Kết quả cuối cùng

Kết quả element product category

Thấy hay thì nhấp nút like giúp nhé

6 thoughts on “Tạo element product category text cho theme flatsome.

    • Thành Tuấn says:

      Bạn chỉ cần thêm một chút vào function trên là được mà, mình sẽ update thêm trong thời gian sắp tới nhé

  1. Người bí ẩn says:

    cảm ơn bác vì đã có những bài viết hướng dẫn rất bổ ích.
    mình cũng có chút góp ý nhé:
    – cũng có rất nhiều người không phải là dân code trong đó có mình, Như bài viết trên hoặc bài viết khác, bác có thể hướng dẫn mọi người bỏ code vào file nào thuộc folder nào được ko bác. vì mình nhìn bác viết code như v mà mình cũng ko biết là nhúng code vào file nào. Cảm ơn bác nhé

    • Thành Tuấn says:

      Đa phần các function chúng ta code thêm sẽ nằm trong file function.php nhé, theo mình thì việc không biết code nó chỉ là cách nói tránh của việc không tìm hiểu và học hỏi thôi. Bản thân mình là người không biết code nhưng vẫn cố gắng học hỏi để có thể viết những bài như thế này. Mình hi vọng sau này bạn đừng nói câu không biết code nhé, chỉ cần đặt câu hỏi mình thấy hợp lý sẽ trả lời giúp bạn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *