Monday, June 24, 2024

Tạo mục sản phẩm Flatsome trong WordPress (phần 1)

Tạo mục sản phẩm Flatsome trong WordPress siêu đẹp và đơn giản

Để dễ hình dung hơn thì các bạn cùng An Nhiên xem qua hình ảnh này nhé:

Tạo mục sản phẩm flatsome trong wordpress
danh mục sản phẩm flatsome trong wordpress

Thêm vào file functions.php

Hàm code dưới đây sẽ giúp bạn tạo Element cho flatsome dùng để kéo thả ở bất kì vị trí của trang nào mà bạn muốn hiển thị. Chèn code sau vào file functions.php:

function ttit_add_element_ux_builder()
add_ux_builder_shortcode(‘title_with_cat’, array(
‘name’ => __(‘Title With Category’),
‘category’ => __(‘Content’),
‘info’ => ‘ text ‘,
‘wrap’ => false,
‘options’ => array(
‘ttit_cat_ids’ => array(
‘type’ => ‘select’,
‘heading’ => ‘Categories’,
‘param_name’ => ‘ids’,
‘config’ => array(
‘multiple’ => true,
‘placeholder’ => ‘Select…’,
‘termSelect’ => array(
‘post_type’ => ‘product_cat’,
‘taxonomies’ => ‘product_cat’
)
)
),
‘img’ => array(
‘type’ => ‘image’,
‘heading’ => ‘Image’,
‘default’ => ”,
),
‘icon_color’ => array(
‘type’ => ‘colorpicker’,
‘heading’ => __( ‘Icon Color’ ),
‘description’ => __( ‘Only works for simple SVG icons’ ),
‘format’ => ‘rgb’,
‘position’ => ‘bottom right’,
‘on_change’ => array(
‘selector’ => ‘.icon-inner’,
‘style’ => ‘color: value ‘,
),
),
‘style’ => array(
‘type’ => ‘select’,
‘heading’ => ‘Style’,
‘default’ => ‘normal’,
‘options’ => array(
‘normal’ => ‘Normal’,
‘center’ => ‘Center’,
‘bold’ => ‘Left Bold’,
‘bold-center’ => ‘Center Bold’,
),
),
‘text’ => array(
‘type’ => ‘textfield’,
‘heading’ => ‘Title’,
‘default’ => ‘Lorem ipsum dolor sit amet…’,
‘auto_focus’ => true,
),
‘tag_name’ => array(
‘type’ => ‘select’,
‘heading’ => ‘Tag’,
‘default’ => ‘h3’,
‘options’ => array(
‘h1’ => ‘H1’,
‘h2’ => ‘H2’,
‘h3’ => ‘H3’,
‘h4’ => ‘H4’,
),
),
‘color’ => array(
‘type’ => ‘colorpicker’,
‘heading’ => __( ‘Color’ ),
‘alpha’ => true,
‘format’ => ‘rgb’,
‘position’ => ‘bottom right’,
),
‘width’ => array(
‘type’ => ‘scrubfield’,
‘heading’ => __( ‘Width’ ),
‘default’ => ”,
‘min’ => 0,
‘max’ => 1200,
‘step’ => 5,
),
‘margin_top’ => array(
‘type’ => ‘scrubfield’,
‘heading’ => __( ‘Margin Top’ ),
‘default’ => ”,
‘placeholder’ => __( ‘0px’ ),
‘min’ => – 100,
‘max’ => 300,
‘step’ => một,
),
‘margin_bottom’ => array(
‘type’ => ‘scrubfield’,
‘heading’ => __( ‘Margin Bottom’ ),
‘default’ => ”,
‘placeholder’ => __( ‘0px’ ),
‘min’ => – 100,
‘max’ => 300,
‘step’ => một,
),
‘size’ => array(
‘type’ => ‘slider’,
‘heading’ => __( ‘Size’ ),
‘default’ => 100,
‘unit’ => ‘%’,
‘min’ => 20,
‘max’ => 300,
‘step’ => 1,
),
‘link_text’ => array(
‘type’ => ‘textfield’,
‘heading’ => ‘Link Text’,
‘default’ => ”,
),
‘link’ => array(
‘type’ => ‘textfield’,
‘heading’ => ‘Link’,
‘default’ => ”,
),
),
));
add_action(‘ux_builder_setup’, ‘ttit_add_element_ux_builder’);
function title_with_cat_shortcode( $atts, $content = null )
extract( shortcode_atts( array(
‘_id’ => ‘title-‘.rand(),
‘class’ => ”,
‘visibility’ => ”,
‘img’ => ”,
‘icon_color’ => ”,
‘inline_svg’ => ‘true’,
‘text’ => ‘Lorem ipsum dolor sit amet…’,
‘tag_name’ => ‘div’,
‘sub_text’ => ”,
‘style’ => ‘normal’,
‘size’ => ‘100’,
‘link’ => ”,
‘link_text’ => ”,
‘target’ => ”,
‘margin_top’ => ”,
‘margin_bottom’ => ”,
‘letter_case’ => ”,
‘color’ => ”,
‘width’ => ”,
‘icon’ => ”,
), $atts ) );
$classes = array(‘container’, ‘section-title-container’);
if ( $class ) $classes[] = $class;
if ( $visibility ) $classes[] = $visibility;
$classes = implode(‘ ‘, $classes);
$link_output = ”;
if($link) $link_output = ‘<a href=”‘.$link.’” target=”‘.$target.’”>’.$link_text .'</a>’;
$small_text = ”;
if($sub_text) $small_text = ‘<small class=”sub-title”>’.$atts[‘sub_text’].'</small>’;
if($icon) $icon = get_flatsome_icon($icon);
// fix old
if($style == ‘bold_center’) $style = ‘bold-center’;
$css_args = array(
array( ‘attribute’ => ‘margin-top’, ‘value’ => $margin_top),
array( ‘attribute’ => ‘margin-bottom’, ‘value’ => $margin_bottom),
);
if($width)
$css_args[] = array( ‘attribute’ => ‘max-width’, ‘value’ => $width);
$css_args_title = array();
if($size !== ‘100’)
$css_args_title[] = array( ‘attribute’ => ‘font-size’, ‘value’ => $size, ‘unit’ => ‘%’);
if($color)
$css_args_title[] = array( ‘attribute’ => ‘color’, ‘value’ => $color);
if ( isset( $atts[ ‘ttit_cat_ids’ ] ) )
$ids = explode( ‘,’, $atts[ ‘ttit_cat_ids’ ] );
$ids = array_map( ‘trim’, $ids );
$parent = ”;
$orderby = ‘include’;
else
$ids = array();
if ( $img && ! Is_numeric( $img ) )
$org_img = $img;
elseif ( $img )
$img_src = wp_get_attachment_image_src( $img, $image_size );
if ( $img_src )
$org_img = $img_src[0];
$org_height = $img_src[2];
// Check if width and height is set, because svg images has no size.
if ( $img_src[1] > 0 && $img_src[2] > 0 )
$width = $img_src[1];
$width = ( intval( $height ) / intval( $org_height ) ) * intval( $width ) + ( intval( $padding ) * 2 ) . ‘Px’;
else
$width = ‘auto’;
$css_args = array(
‘icon_border’ => array(
‘attribute’ => ‘border-width’,
‘unit’ => ‘px’,
‘value’ => $icon_border,
),
‘icon_color’ => array(
‘attribute’ => ‘color’,
‘value’ => $icon_color,
),
);
$args = array(
‘taxonomy’ => ‘product_cat’,
‘include’ => $ids,
‘pad_counts’ => true,
‘child_of’ => 0,
);
$product_categories = get_terms( $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=”camap_cats”><a href=”‘.$term_link.’”>’.$category->name.'</a></li>’;
return ‘<div class=”‘.$classes.’” ‘.get_shortcode_inline_css($css_args).’><‘. $Tag_name . ‘ Class=”camap-title-cat” style=”background-image:url(‘.$org_img.’)”><h3 class=”section-title-main” ‘.get_shortcode_inline_css($css_args_title).’> ‘.$icon.$text.$small_text.’ </h3>
<div class=”camap-show-cats”>’.$hdevvn_html_show_cat.'</div>’.$link_output.'</’ . $Tag_name .’></div>’;
add_shortcode(‘title_with_cat’, ‘title_with_cat_shortcode’);

CÓ THỂ BẠN QUAN TÂM

Các bài viết về theme Flatsome Wordpess

Lấy danh mục con trong danh mục sản phẩm wordpress

Cách tạo Full Aff từ Tiki , Aff từ Lazada , Aff từ Shopee

Tạo banner trượt cho web wordpress theme flatsome

Liên hệ đẹp cho theme Flatsome – Liên hệ Box 10

Tạo mục sản phẩm flatsome trong wordpress

Thêm vào file css

Bạn mang thể thêm bằng ftp hoặc ở Dashboard chọn Giao diện -> Sửa giao diện -> Chọn style.css và dán đoạn code dưới đây vào nhé:

.camap-title-cat
background-repeat: no-repeat;
background-position: center;
height: 100%;
border-radius: 20px;
padding: 20px 35px;
background-size: cover;
.camap-show-cats li
font-size: 15px;
margin-bottom: 5px;
list-style: none;
position: relative;
padding-left: 15px;
.camap-show-cats li:before
content: ”;
position: absolute;
left: 0;
width: 6px;
height: 6px;
background-color: green;
border-radius: 99px;
top: 0;
bottom: 0;
margin: auto;
.camap-title-cat > a
background-color: #f62e2e;
border-radius: 30px;
color: #fff;
font-size: 12px;
height: 30px;
display: inline-flex;
align-items: center;
padding: 0 20px;
margin-top: 10px;
Text Vào giao diện UX Builder
Tạo mục sản phẩm flatsome trong wordpress
Danh mục sản phẩm flatsome trong wordpress siêu đẹp

Cảm ơn các bạn đã đọc bài viết này! Chúc các bạn thành công!

 

5/5 - (3 votes)
46,788FansLike

Bài Viết Mới