N\u1ebfu b\u1ea1n \u0111ang qu\u1ea3n l\u00fd m\u1ed9t c\u1eeda h\u00e0ng tr\u1ef1c tuy\u1ebfn tr\u00ean n\u1ec1n t\u1ea3ng WordPress v\u1edbi WooCommerce, vi\u1ec7c hi\u1ec3n th\u1ecb r\u00f5 r\u00e0ng ph\u1ea7n tr\u0103m gi\u1ea3m gi\u00e1 ngay b\u00ean c\u1ea1nh gi\u00e1 s\u1ea3n ph\u1ea9m c\u00f3 th\u1ec3 gi\u00fap t\u0103ng t\u1ef7 l\u1ec7 chuy\u1ec3n \u0111\u1ed5i v\u00e0 c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/p>\n
T\u00f4i \u0111\u00e3 t\u1eebng \u0111\u01b0\u1ee3c nhi\u1ec1u kh\u00e1ch h\u00e0ng y\u00eau c\u1ea7u l\u00e0m vi\u1ec7c n\u00e0y, n\u00ean trong b\u00e0i vi\u1ebft h\u00f4m nay, t\u00f4i s\u1ebd chia s\u1ebb c\u00e1ch th\u00eam “Gi\u1ea3m X%” ngay sau gi\u00e1 trong trang chi ti\u1ebft s\u1ea3n ph\u1ea9m m\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n, s\u1eed d\u1ee5ng code PHP v\u00e0 CSS.<\/p>\n
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );\r\nadd_action( 'woocommerce_single_product_summary', 'devvn_single_price_with_sale_percent', 10 );\r\nfunction devvn_single_price_with_sale_percent() {\r\n global $product;\r\n \r\n if ( ! $product ) return;\r\n \r\n $html_percent = '';\r\n \r\n if ( $product->is_type('simple') && $product->is_on_sale() ) {\r\n $regular = (float) $product->get_regular_price();\r\n $sale = (float) $product->get_sale_price();\r\n if ( $regular > 0 ) {\r\n $percent = round( ( ( $regular - $sale ) \/ $regular ) * 100 );\r\n $html_percent = '<span class=\"devvn_price sale_amount\">(Gi\u1ea3m ' . $percent . '%)<\/span> ';\r\n }\r\n }\r\n elseif ( $product->is_type('variable') ) {\r\n $prices = $product->get_variation_prices();\r\n \r\n if ( $product->is_on_sale() ) {\r\n $regular_min = current($prices['regular_price']);\r\n $regular_max = end($prices['regular_price']);\r\n $sale_min = current($prices['sale_price']);\r\n $sale_max = end($prices['sale_price']);\r\n \r\n if ( $regular_min === $regular_max && $sale_min === $sale_max ) {\r\n $percent = round( ( ( (float)$regular_min - (float)$sale_min ) \/ (float)$regular_min ) * 100 );\r\n $html_percent = '<span class=\"devvn_price sale_amount\">(Gi\u1ea3m ' . $percent . '%)<\/span> ';\r\n }\r\n }\r\n }\r\n \r\n echo '<p class=\"price\">' . $html_percent . $product->get_price_html() . '<\/p>';\r\n}\r\n \r\nadd_filter( 'woocommerce_available_variation', 'devvn_add_sale_percent_to_variation_price', 10, 3 );\r\nfunction devvn_add_sale_percent_to_variation_price( $data, $product, $variation ) {\r\n \r\n if ( $variation->is_on_sale() ) {\r\n \r\n $regular = (float) $variation->get_regular_price();\r\n $sale = (float) $variation->get_sale_price();\r\n \r\n if ( $regular > 0 && $sale > 0 && !empty($data['price_html'])) {\r\n $percent = round( ( ( $regular - $sale ) \/ $regular ) * 100 );\r\n \r\n $data['price_html'] =\r\n '<span class=\"devvn_price sale_amount\">(Gi\u1ea3m ' . $percent . '%)<\/span> '\r\n . $data['price_html'];\r\n }\r\n }\r\n \r\n return $data;\r\n}<\/pre>\n <\/p>\n
Gi\u1ea3i th\u00edch chi ti\u1ebft code:<\/strong><\/p>\nRemove action<\/strong>: Lo\u1ea1i b\u1ecf c\u00e1ch hi\u1ec3n th\u1ecb gi\u00e1 m\u1eb7c \u0111\u1ecbnh c\u1ee7a WooCommerce \u0111\u1ec3 thay b\u1eb1ng phi\u00ean b\u1ea3n t\u00f9y ch\u1ec9nh.
\nH\u00e0m ch\u00ednh<\/strong>: T\u00ednh to\u00e1n ph\u1ea7n tr\u0103m gi\u1ea3m d\u1ef1a tr\u00ean gi\u00e1 g\u1ed1c v\u00e0 gi\u00e1 sale, ch\u1ec9 hi\u1ec3n th\u1ecb khi s\u1ea3n ph\u1ea9m \u0111ang on sale. \u0110\u1ed1i v\u1edbi variable, code ki\u1ec3m tra gi\u00e1 min\/max \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh ch\u00ednh x\u00e1c.
\nFilter cho variation<\/strong>: C\u1eadp nh\u1eadt gi\u00e1 \u0111\u1ed9ng khi kh\u00e1ch ch\u1ecdn bi\u1ebfn th\u1ec3, gi\u00fap ph\u1ea7n tr\u0103m gi\u1ea3m xu\u1ea5t hi\u1ec7n ngay l\u1eadp t\u1ee9c m\u00e0 kh\u00f4ng c\u1ea7n reload trang.<\/p>\nSau khi th\u00eam code, l\u01b0u file v\u00e0 ki\u1ec3m tra trang chi ti\u1ebft s\u1ea3n ph\u1ea9m. N\u1ebfu kh\u00f4ng th\u1ea5y thay \u0111\u1ed5i, h\u00e3y clear cache (s\u1eed d\u1ee5ng plugin nh\u01b0 WP Super Cache).<\/p>\n
T\u00f9y Ch\u1ec9nh CSS \u0110\u1ec3 Hi\u1ec3n Th\u1ecb \u0110\u1eb9p M\u1eaft<\/h2>\n
\u0110\u1ec3 “Gi\u1ea3m X%” tr\u00f4ng chuy\u00ean nghi\u1ec7p, th\u00eam CSS sau v\u00e0o ph\u1ea7n Customizer > Additional CSS ho\u1eb7c file style.css c\u1ee7a theme. T\u00f4i thi\u1ebft k\u1ebf \u0111\u1ec3 n\u00f3 n\u1eb1m ngay sau gi\u00e1, v\u1edbi font nh\u1ecf h\u01a1n m\u1ed9t ch\u00fat.<\/p>\n
span.nguyenlan_price.sale_amount {\r\nfont-size: 14px;\r\nfont-weight: 400;\r\nletter-spacing: normal;\r\n}\r\n.woocommerce div.product div.summary > p.price {\r\ndisplay: flex;\r\n}\r\n.woocommerce div.product div.summary > p.price span.nguyenlan_price.sale_amount {\r\norder: 3;\r\nmargin-left: 10px;\r\n}<\/pre>\n <\/p>\n
M\u1eb9o t\u00f9y ch\u1ec9nh: \u0110i\u1ec1u ch\u1ec9nh m\u00e0u s\u1eafc ph\u00f9 h\u1ee3p v\u1edbi theme c\u1ee7a b\u1ea1n (v\u00ed d\u1ee5: xanh l\u00e1 cho t\u00edch c\u1ef1c). Ki\u1ec3m tra tr\u00ean mobile \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o responsive.
\nL\u01b0u \u00dd Khi Tri\u1ec3n Khai V\u00e0 Kh\u1eafc Ph\u1ee5c L\u1ed7i Th\u01b0\u1eddng G\u1eb7p. N\u1ebfu g\u1eb7p v\u1ea5n \u0111\u1ec1, comment b\u00ean d\u01b0\u1edbi ho\u1eb7c li\u00ean h\u1ec7 t\u00f4i qua email<\/p>\n","protected":false},"excerpt":{"rendered":"
N\u1ebfu b\u1ea1n \u0111ang qu\u1ea3n l\u00fd m\u1ed9t c\u1eeda h\u00e0ng tr\u1ef1c tuy\u1ebfn tr\u00ean n\u1ec1n t\u1ea3ng WordPress v\u1edbi WooCommerce, vi\u1ec7c hi\u1ec3n th\u1ecb r\u00f5 r\u00e0ng ph\u1ea7n tr\u0103m gi\u1ea3m gi\u00e1 ngay b\u00ean c\u1ea1nh gi\u00e1 s\u1ea3n ph\u1ea9m c\u00f3 th\u1ec3 gi\u00fap t\u0103ng t\u1ef7 l\u1ec7 chuy\u1ec3n \u0111\u1ed5i v\u00e0 c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. T\u00f4i \u0111\u00e3 t\u1eebng \u0111\u01b0\u1ee3c nhi\u1ec1u kh\u00e1ch h\u00e0ng y\u00eau c\u1ea7u<\/p>\n","protected":false},"author":1,"featured_media":309,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-share"],"_links":{"self":[{"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/posts\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":6,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/posts\/315\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/posts\/315\/revisions\/600"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/media\/309"}],"wp:attachment":[{"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/media?parent=315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/categories?post=315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/tags?post=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}