Wordpress theme

###  1. Add style.css assets/main.js child theme
### 2. Add % giảm giá của sản phẩm
### 3. Thêm fontawesome 
### 4. Thêm Theme Option ACF
### 5. Tạo Taxonomy
### 6. Lấy danh sách taxonomy theo post id (product id)
### 7. Add font face 
### 8. Style accordion minus plus icon 
### 9. Change Icon slider flatsome
### 10. Conver dot flatsome slider to number
### 11. List item in 3 column 

Add % giảm giá của sản phẩm

add_filter('woocommerce_sale_flash', 'devvn_woocommerce_sale_flash', 10, 3);
function devvn_woocommerce_sale_flash($html, $post, $product){
    return '<span class="onsale"><span>' . devvn_presentage_bubble($product) . '</span></span>';
}
 
function devvn_presentage_bubble( $product ) {
    $post_id = $product->get_id();
 
    if ( $product->is_type( 'simple' ) || $product->is_type( 'external' ) ) {
        $regular_price  = $product->get_regular_price();
        $sale_price     = $product->get_sale_price();
        $bubble_content = round( ( ( floatval( $regular_price ) - floatval( $sale_price ) ) / floatval( $regular_price ) ) * 100 );
    } elseif ( $product->is_type( 'variable' ) ) {
        if ( $bubble_content = devvn_percentage_get_cache( $post_id ) ) {
            return devvn_percentage_format( $bubble_content );
        }
 
        $available_variations = $product->get_available_variations();
        $maximumper           = 0;
 
        for ( $i = 0; $i < count( $available_variations ); ++ $i ) {
            $variation_id     = $available_variations[ $i ]['variation_id'];
            $variable_product = new WC_Product_Variation( $variation_id );
            if ( ! $variable_product->is_on_sale() ) {
                continue;
            }
            $regular_price = $variable_product->get_regular_price();
            $sale_price    = $variable_product->get_sale_price();
            $percentage    = round( ( ( floatval( $regular_price ) - floatval( $sale_price ) ) / floatval( $regular_price ) ) * 100 );
            if ( $percentage > $maximumper ) {
                $maximumper = $percentage;
            }
        }
 
        $bubble_content = sprintf( __( '%s', 'woocommerce' ), $maximumper );
 
        devvn_percentage_set_cache( $post_id, $bubble_content );
    } else {
        $bubble_content = __( 'Sale!', 'woocommerce' );
 
        return $bubble_content;
    }
 
    return devvn_percentage_format( $bubble_content );
}
 
function devvn_percentage_get_cache( $post_id ) {
    return get_post_meta( $post_id, '_devvn_product_percentage', true );
}
 
function devvn_percentage_set_cache( $post_id, $bubble_content ) {
    update_post_meta( $post_id, '_devvn_product_percentage', $bubble_content );
}
 
//Định dạng kết quả dạng -{value}%. Ví dụ -20%
function devvn_percentage_format( $value ) {
    return str_replace( '{value}', $value, '-{value}%' );
}
 
// Xóa cache khi sản phẩm hoặc biến thể thay đổi
function devvn_percentage_clear( $object ) {
    $post_id = 'variation' === $object->get_type()
        ? $object->get_parent_id()
        : $object->get_id();
 
    delete_post_meta( $post_id, '_devvn_product_percentage' );
}
add_action( 'woocommerce_before_product_object_save', 'devvn_percentage_clear' );

Add style.css assets/main.js child theme

add_action( 'wp_enqueue_scripts', 'cs_enqueue_styles' );
function cs_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );

    wp_enqueue_script('mainjs', get_stylesheet_directory_uri() . '/assets/main.js', array('jquery'), false, true);		
}

Flatsome add UXbuilder for Post Type

add_action( 'init', function () {
    if ( function_exists( 'add_ux_builder_post_type' ) ) {
        add_ux_builder_post_type( 'custom_post_type' );
    }
} );

Thêm Theme Option ACF

if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Theme Header Settings',
		'menu_title'	=> 'Header',
		'parent_slug'	=> 'theme-general-settings',
		'capability'	=> 'edit_posts',
		'redirect'		=> false
	));
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Theme Footer Settings',
		'menu_title'	=> 'Footer',
		'parent_slug'	=> 'theme-general-settings',
	));
	
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Theme Product Settings',
		'menu_title'	=> 'Product',
		'parent_slug'	=> 'theme-general-settings',
	));
}
// ================

add_action('acf/init', 'my_acf_op_init');
function my_acf_op_init() {

    // Check function exists.
    if( function_exists('acf_add_options_sub_page') ) {

        // Add parent.
        $parent = acf_add_options_page(array(
            'page_title'  => __('Theme General Settings'),
            'menu_title'  => __('Theme Settings'),
            'redirect'    => false,
        ));

        // Add sub page.
        $child = acf_add_options_sub_page(array(
            'page_title'  => __('Social Settings'),
            'menu_title'  => __('Social'),
            'parent_slug' => $parent['menu_slug'],
        ));
    }
}

Tạo Taxonomy

function cs_add_taxonomy() {
	$labels = array(
		"name" => "Thương Hiệu",
		"singular" => "Thương Hiệu",
		"menu_name" => "Thương Hiệu"
	);

	$args = array(
		"labels"                     => $labels,
		"hierarchical"               => true,  // set = false để tạo tag
		"public"                     => true,
		"show_ui"                    => true,
		"show_admin_column"          => true,
		"show_in_nav_menus"          => true,
		"show_tagcloud"              => true,
	);
	register_taxonomy("thuong-hieu", "product", $args);
}
add_action( "init", "cs_add_taxonomy", 0 );

Lấy danh sách taxonomy theo post id (product id)

<?php $thuongHieu = get_the_terms( $post->ID, "thuong-hieu" ); var_dump($thuongHieu); ?>

Add Font face

@font-face {
    font-family: 'Imbue';
    src: url('assets/fonts/Imbue-Thin.woff2') format('woff2'),
        url('assets/fonts/Imbue-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Piazzolla';
    src: url('assets/fonts/Piazzolla-Thin.woff2') format('woff2'),
        url('assets/fonts/Piazzolla-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Piazzolla';
    src: url('assets/fonts/Piazzolla-ThinItalic.woff2') format('woff2'),
        url('assets/fonts/Piazzolla-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

Style Accordion minus plus icon

.accordion-title .toggle:before {
    content: '\f067';
    font-family: "Font Awesome 5 Free";
    opacity: 1;
}

.accordion-title.active .toggle:before {
    content: '\f068'!important;
}
.accordion-title .toggle {
     left: unset;
    right: 0;
}
.accordion .accordion-item:first-child a {
    border-top: unset !important;
}

Change icon slider flatsome

.slider-v1 .flickity-button {
    content: "";
    width: 74px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: unset;
    bottom: -60px;
}
.slider-v1 .flickity-prev-next-button:disabled, .slider-v1 button.flickity-prev-next-button[disabled]  {
    opacity: 1 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.slider-v1 .flickity-button.previous {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/previous-arrow.png");
}

.slider-v1 .flickity-button.previous:disabled {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/left-arrow-disable.png") !important;
}



.slider-v1 .flickity-button.next {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/new-arrow.png");
}

.slider-v1 .flickity-button.next:disabled {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/right-arrow-disable.png") !important;
}

.slider-v1 svg {
    display: none;
}

10. Conver dot flatsome slider to number

.slider-v2 ol.flickity-page-dots li.dot {
    counter-increment: css-counter 1;
    width: 20px;
    height: 20px;
    text-align: right;
    border: none !important;
    background: none !important;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    left: 0;
    opacity: 1;
}

11. List item in 3 column

ul {
    -webkit-columns: 3 auto;
    -moz-columns: 3 auto;
    column-count: 3;
}

ul {
    display: inline-block;
    width: 100%;
    list-style: none;
    vertical-align: top;
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 0;
    grid-gap: 0 2.5rem;
    -webkit-columns: 1 auto;
    -moz-columns: 1 auto;
    column-count: 1;
}

ul li {
    display: inline-block;
    width: 100%;
    margin-top: 5px;
    list-style: none;
    border-bottom: 1px dashed #cecece;
    padding-bottom: 10px;
    line-height: 1;
}