Nếu bạn cảm thấy cách hiển thị giảm giá mặc định của woocommerce quá nhàm chán, không thu hút được người xem và kích thích họ mua sản phẩm trên website của bạn.

Tại sao bạn không thử thay đổi, custom lại cho nó đẹp mắt hơn, xịn xò hơn hehe.

Bài viết này, Thịnh sẽ hướng dẫn bạn cách thay đổi hiển thị giảm giá trên website woocommerce nhìn đẹp bắt mắt hơn.

Đảm bảo với bạn, không đẹp không tính tiền, không đẹp trả dép anh về luôn hehe.

Thịnh đùa á, thôi bắt đầu ngay nhé!

Hiển thị giảm giá mặc định của Woocommerce trông như thế nào?

Bạn hãy nhìn bức ảnh ở ngay dưới đây, đây chính xác là cách hiển thị giá giảm giá mặc định của Woocommerce.

Nhìn mặc định cũng không xấu lắm, chỉ là chưa quá đẹp xíu thôi à hehe.

Nhưng nếu lựa chọn giữa 1 cô gái bình thường và 1 cô gái đẹp, khả năng cao là bạn sẽ muốn chọn 1 cô gái đẹp.

Vậy không có lí do gì mà bạn không custom lại cả. Ok hãy nhìn ngay ảnh dưới đây để xem thành quả nha.

Nhìn đẹp ra hẳn và dễ hiểu kích thích tiêu dùng dễ hơn luôn đúng không bạn nè.

Xem thêm bài viết hướng dẫn khác của Thịnh:

Hướng Dẫn Thêm Thanh Chức Năng Bottom Bar Đẹp Mắt Cho Website WordPress

Cách tạo nút Affiliates cho sản phẩm Woocommerce trên Website Bán Hàng

Cách thay đổi trang điền thông tin thanh toán mặc định của Woocommerce

Cách thay đổi hiển thị giảm giá bắt mắt thu hút người xem trên Website Woocommerce?

Để có thể hiển thị giảm giá bắt mắt đẹp như vậy, bạn chỉ cần thêm đoạn code ở ngay dưới này theo đường dẫn sau: Giao diện —-> Sửa tệp tin giao diện —-> functions.php —-> Dán đoạn code rùi bấm lưu lại.

Cach tao bai viet lien quan hien thi o Widget tren Website 2

Đoạn code thay đổi hiển thị giảm giá bắt mắt thu hút người xem ở đây

/*Thay đổi cách hiển thị mã giảm giá*/
function devvn_price_html($product, $is_variation = false){
    ob_start();
 
    if($product->is_on_sale()):
        ?>
       <style>
  /* Phần khung hiển thị giá sản phẩm */
  .devvn_single_price {
    background-color: #f8f9fa; /* Màu nền sáng, nhẹ nhàng */
    border: 1px solid #dee2e6; /* Viền màu xám nhạt */
    padding: 15px 20px; /* Khoảng cách bên trong */
    border-radius: 8px; /* Bo tròn góc */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */
    margin-bottom: 20px; /* Khoảng cách phía dưới */
    color: #333; /* Màu chữ mặc định */
    font-family: "Roboto", Arial, sans-serif; /* Font chữ hiện đại */
    display: flex;
    flex-direction: column; /* Căn các phần tử thành cột */
    gap: 10px; /* Khoảng cách giữa các phần tử bên trong */
  }

  /* Nhãn (label) */
  .devvn_single_price span.label {
    font-size: 14px; /* Kích thước chữ nhỏ vừa */
    color: #495057; /* Màu xám đậm hơn */
    font-weight: 500; /* Chữ hơi đậm */
    display: inline-block;
    margin-bottom: 5px; /* Khoảng cách dưới nhãn */
  }

  /* Giá khuyến mãi (giá đã giảm) */
  .devvn_single_price span.devvn_price .amount {
    font-size: 20px; /* Chữ lớn để nổi bật */
    font-weight: 700; /* Chữ đậm */
    color: #e63946; /* Màu đỏ tươi nổi bật */
  }

  /* Giá gốc (giá chưa giảm) */
  .devvn_single_price span.devvn_price del .amount,
  .devvn_single_price span.devvn_price del {
    font-size: 16px; /* Chữ nhỏ hơn giá khuyến mãi */
    color: #6c757d; /* Màu xám nhạt */
    font-weight: 400; /* Không đậm */
    text-decoration: line-through; /* Gạch ngang */
    margin-left: 10px; /* Khoảng cách giữa giá gốc và giá khuyến mãi */
  }

  /* Phần tiết kiệm (thông báo giảm giá) */
  .devvn_single_price span.discount {
    font-size: 14px; /* Kích thước chữ nhỏ hơn */
    font-weight: 600; /* Chữ đậm */
    color: #2a9d8f; /* Màu xanh lá dịu */
    margin-top: 5px; /* Khoảng cách phía trên */
  }

  /* Responsive cho màn hình nhỏ hơn */
  @media (max-width: 768px) {
    .devvn_single_price {
      padding: 10px 15px; /* Thu nhỏ khoảng cách */
    }

    .devvn_single_price span.devvn_price .amount {
      font-size: 18px; /* Thu nhỏ kích thước chữ */
    }

    .devvn_single_price span.devvn_price del .amount {
      font-size: 14px; /* Thu nhỏ giá gốc */
    }

    .devvn_single_price span.discount {
      font-size: 13px; /* Thu nhỏ dòng tiết kiệm */
    }
  }
</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;
            ?>
            <span class="devvn_single_price">
                <span>
                    <span class="label">Giá:</span>
                    <span class="devvn_price"><?php echo wc_price($sale_price); ?></span>
                </span>
                <span>
                    <span class="label">Thị trường:</span>
                    <span class="devvn_price"><del><?php echo wc_price($regular_price); ?></del></span>
                </span>
                <span>
                    <span class="label">Tiết kiệm:</span>
                    <span class="devvn_price sale_amount"> <?php echo wc_price($sale_amout); ?> (<?php echo $sale; ?>%)</span>
                </span>
            </span>
            <?php
        }
    }elseif($product->is_on_sale() && $product->is_type('variable')){
        $prices = $product->get_variation_prices( true );
        if ( empty( $prices['price'] ) ) {
            echo 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 ) {
                echo 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;
                ?>
                <span class="devvn_single_price">
                    <span>
                        <span class="label">Giá:</span>
                        <span class="devvn_price"><?php echo wc_price($min_price); ?></span>
                    </span>
                    <span>
                        <span class="label">Thị trường:</span>
                        <span class="devvn_price"><del><?php echo wc_price($max_reg_price); ?></del></span>
                    </span>
                    <span>
                        <span class="label">Tiết kiệm:</span>
                        <span class="devvn_price sale_amount"> <?php echo wc_price($sale_amout); ?> (<?php echo $sale; ?>%)</span>
                    </span>
                </span>
                <?php
            } else {
                echo wc_price( $min_price ) . $product->get_price_suffix();
            }
        }
 
    }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;
}

Đoạn code được Thịnh Css tuỳ chỉnh rất cụ thể rõ ràng và chú thích từng vị trí cụ thể, bạn có thể đọc và thay đổi màu sắc, kích cỡ theo ý muốn của bạn nha.

Cuối cùng, bạn bấm lưu lại và tận hưởng thành quả nè. Khá dễ dàng đúng không nào?

Nếu thấy hay đừng quên chia sẻ bài viết giúp Thịnh nha, cảm ơn bạn rất nhiều nè.