Để sử dụng bạn copy đoạn code sau vào file functions.php trong thư mục theme bạn đang sử dụng nhé!
Ngoài ra kéo xuống để xem thêm CSS.
function devvn_price_html($product, $is_variation = false){ ob_start(); if($product->is_on_sale()): ?><?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;}
Đoạn code sau chính là CSS kèm theo
.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; }
Hooks trong WordPress là các điểm móc nằm trong hệ thống mã nguồn của WordPress, tại đây có thể bổ sung các đoạn code thông qua hai hàm add_action và add_filter mà WordPress đã cung cấp sẵn.
Hooks được chia ra làm 2 loại chính đó là Action Hook và Filter Hook :
- Action là các điểm móc liên quan đến xử lý hành động
- Filter là các điểm móc liên quan đến xử lý nội dung
Dưới đây là các hook thông dụng được cung cấp bởi WordPress.org giúp bạn tùy biến Website theo ý mình
Chúc các bạn thành công!