Flatsome

Thay đổi style hiển thị giảm giá trong woocommerce

Woocommerce miễn phí và đơn giản nhất cho ai cũng có thể sử dụng, do vậy nó sẽ có rất nhiều tính năng thừa cũng như những thiết kế không vừa ý nhiều người.

Hướng dẫn đổi style giảm giá trong Woocommerce

Để tùy biến Woo theo mong muốn bạn cần biết code! nhưng đôi khi, bạn chỉ cần copy và paste cũng có thể tùy biến được một số tùy chỉnh

Hiển thị sản phẩm giảm giá WooCommerce

Phần sản phẩm trong plugin WooCommerce là một custom post type, có type là product vì thế để get danh sách sản phẩm giảm giá chúng ta cũng dùng vòng lặp get post new WP_Query, cộng thêm một số thông số khác để lấy chính xác sản phẩm giảm giá.

Cụ thể chúng ta có đoạn code get sản phẩm giảm giá như sau:

'post_type' => 'product',

'posts_per_page' => 10,

'meta_query'     => array(

        'relation' => 'OR',

        array(

            'key'           => '_sale_price',

            'value'         => 0,

            'compare'       => '>',

            'type'          => 'numeric'

        )

    )

); ?>

<?php $getposts = new WP_query( $args);?>

<?php global $wp_query; $wp_query->in_the_loop = true; ?>

<?php while ($getposts->have_posts()) : $getposts->the_post(); ?>

<?php global $product; ?>

<div class="item-product">

<a href="<?php the_permalink(); ?>">

<?php echo get_the_post_thumbnail(get_the_ID(), 'thumnail', array( 'class' =>'thumnail') ); ?>

</a>

<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>

<div class="price-product"><?php echo $product->get_price_html(); ?></div>

<a href="<?php bloginfo('url'); ?>?add-to-cart=<?php the_ID(); ?>">Thêm vào giỏ</a>

</div>

<?php endwhile; wp_reset_postdata();?>

Đoạn code trên mình get ra 10 sản phẩm giảm giá.

Giải thích chuyên sâu

Giá giảm của sản phẩm được lưu ở bản wp_postmeta trong database wordpress, với meta_key là “_sale_price“, mình đi kiểm trả trường nào có giá trị lớn hơn 0 thì lấy sản phẩm này ra. Đồng nghĩa với việc sản phẩm đó là sản phẩm giảm giá.

Code thay đổi hiển thị giảm giá trong woocommerce:

Code dưới đây giúp bạn thay đổi cách hiển thị giảm giá một cách bắt mắt người xem. Gây ấn tượng và đầy đủ thông tin phổ biến mà khách cần biết.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/*Sale price by devvn - levantoan.com*/
function devvn_price_html($product, $is_variation = false){
    ob_start();
    if($product->is_on_sale()):
    ?>
    <style>
        .devvn_single_price {
            background-color: #199bc42e;
            border: 1px dashed #199bc4;
            padding: 10px;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            margin: 0 0 10px;
            color: #000;
        }
        .devvn_single_price span.label {
            color: #333;
            font-weight: 400;
            font-size: 14px;
            padding: 0;
            margin: 0;
            float: left;
            width: 82px;
            text-align: left;
            line-height: 18px;
        }
        .devvn_single_price span.devvn_price .amount {
            font-size: 14px;
            font-weight: 700;
            color: #ff3a3a;
        }
        .devvn_single_price span.devvn_price del .amount, .devvn_single_price span.devvn_price del {
            font-size: 14px;
            color: #333;
            font-weight: 400;
        }
    </style>
    <?php
    endif;
    if($product->is_on_sale() && ($is_variation || $product->is_type('simple') || $product->is_type('external'))) {
        $sale_price = $product->get_sale_price();
        $regular_price = $product->get_regular_price();
        if($regular_price) {
            $sale = round(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
            $sale_amout = $regular_price - $sale_price;
            ?>
            <div class="devvn_single_price">
                <div>
                    <span class="label">Giá:</span>
                    <span class="devvn_price"><?php echo wc_price($sale_price); ?></span>
                </div>
                <div>
                    <span class="label">Thị trường:</span>
                    <span class="devvn_price"><del><?php echo wc_price($regular_price); ?></del></span>
                </div>
                <div>
                    <span class="label">Tiết kiệm:</span>
                    <span class="devvn_price sale_amount"> <?php echo wc_price($sale_amout); ?> (<?php echo $sale; ?>%)</span>
                </div>
            </div>
            <?php
        }
    }elseif($product->is_on_sale() && $product->is_type('variable')){
        $prices = $product->get_variation_prices( true );
        if ( empty( $prices['price'] ) ) {
            $price = apply_filters( 'woocommerce_variable_empty_price_html', '', $product );
        } else {
            $min_price     = current( $prices['price'] );
            $max_price     = end( $prices['price'] );
            $min_reg_price = current( $prices['regular_price'] );
            $max_reg_price = end( $prices['regular_price'] );
            if ( $min_price !== $max_price ) {
                $price = wc_format_price_range( $min_price, $max_price ) . $product->get_price_suffix();
            } elseif ( $product->is_on_sale() && $min_reg_price === $max_reg_price ) {
                $sale = round(((floatval($max_reg_price) - floatval($min_price)) / floatval($max_reg_price)) * 100);
                $sale_amout = $max_reg_price - $min_price;
                ?>
                <div class="devvn_single_price">
                    <div>
                        <span class="label">Giá:</span>
                        <span class="devvn_price"><?php echo wc_price($min_price); ?></span>
                    </div>
                    <div>
                        <span class="label">Thị trường:</span>
                        <span class="devvn_price"><del><?php echo wc_price($max_reg_price); ?></del></span>
                    </div>
                    <div>
                        <span class="label">Tiết kiệm:</span>
                        <span class="devvn_price sale_amount"> <?php echo wc_price($sale_amout); ?> (<?php echo $sale; ?>%)</span>
                    </div>
                </div>
                <?php
            } else {
                $price = wc_price( $min_price ) . $product->get_price_suffix();
            }
        }
        echo $price;
    }else{ ?>
        <p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) );?>"><?php echo $product->get_price_html(); ?></p>
    <?php }
    return ob_get_clean();
}
function woocommerce_template_single_price(){
    global $product;
    echo devvn_price_html($product);
}
add_filter('woocommerce_available_variation','devvn_woocommerce_available_variation', 10, 3);
function devvn_woocommerce_available_variation($args, $thisC, $variation){
    $old_price_html = $args['price_html'];
    if($old_price_html){
        $args['price_html'] = devvn_price_html($variation, true);
    }
    return $args;
}

Các bạn chỉ cần thêm đoạn code sau vào functions.php của theme đang kích hoạt là được. Chú ý là code đã bao gồm css nếu không thích dạng này thì tự thay đổi lại.

Cách tùy chỉnh function.php để thay đổi style hiển thị của woocommerce trong WordPress

Tùy chỉnh function.php trong WordPress khá đơn giản, bạn chỉ việc tìm file function.php của theme đang sử dụng và thêm code vào đó. Khuyến cáo: Nên sử dụng Child theme để tinh chỉnh.

Bạn vào WP Admin -> Giao diện -> Sửa (giao diện) và tìm file function.php. Tùy WP theme sẽ có các vị trí file function khác nhau. Thêm code tùy chỉnh vào sau thẻ <?php, nên để dưới cuối cùng của file.

function.php

 

Trước khi tùy biến, xin lưu ý: “backup web hoặc làm demo trên local host, ít nhất cũng lưu lại file function.php nguyên bản đã nhé. Đừng dại mà ném toẹt code ngay vào web chính!”

Kết quả: Tận hưởng thành quả thôi!

Xem các bài viết liên quan:

Tạo menu xổ ngang trong Widget Area

Cài HTTPS cho WordPress cùng plugin Really Simple SSL

UI UX là gì? Tại sao cần thiết kế web chuẩn UX UI