Ở bài viết lần trước mình đã hướng dẫn các bạn thêm văn bản trước giá sản phẩm bằng plugin cho bạn nào không rành về code . Xem tại đây : Thêm văn bản trước giá sản phẩm Woocommerce – Phần 1
Ở bài viết hôm nay mình sẽ giới thiệu cho các bạn thêm thủ công vào theme
Thêm cài đặt vào Woocommerce.
Bước này để thêm ô textbox vào cài đặt để chúng ta có thể nhập text tùy biến. sau khi làm xong sẽ được như hình.
Bạn dán đoạn code sau vào file functions.php của theme đang dùng nhé
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /*Thêm cài đặt vào Woocommerce*/ function stsv_woocommerce_general_settings( $array ) { $array[] = array( 'name' => __( 'Prefix to price', 'woocommerce' ), 'type' => 'title', 'desc' => '', 'id' => 'woocommerce_presuffix_settings' ); $array[] = array( 'title' => __( 'Prefix', 'woocommerce' ), 'desc' => __( 'Add prefix to price. Leave blank to disable.', 'woocommerce' ), 'id' => 'stsv_woocommerce_price_prefix', 'desc_tip' => true, 'type' => 'text', ); $array[] = array( 'type' => 'sectionend', 'id' => 'woocommerce_presuffix_settings'); return $array; }; add_filter( 'woocommerce_general_settings', 'stsv_woocommerce_general_settings', 10, 1 ); |
Thêm metabox vào mỗi sản phẩm.
Bước này để thêm metabox vào mỗi sản phẩm. Để ghi đè giá trị mặc định. Ví dụ trong 1 website của bạn có nhiều loại mặt hàng. Loại thì giá tính theo bộ, loại thì giá tính theo hộp thì chúng ta chỉ cần ghi giá trị vào đây nó sẽ tự động ghi đè cái setting ở trên. Sau khi làm sẽ được như hình.
Bạn dán đoạn code sau vào file functions.php của theme đang dùng nhé
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /*Add metabox to product*/ add_action( 'woocommerce_product_options_general_product_data', 'stsv_presuffix_products' ); function stsv_presuffix_products() { //Add metabox prefix to product woocommerce_wp_text_input( array( 'id' => '_product_prefix', 'label' => 'Prefix', 'description' => 'Add prefix to price. Leave blank to default.', 'desc_tip' => 'true', ) ); } /*Save metabox prefix */ add_action( 'woocommerce_process_product_meta', 'stsv_presuffix_products_save' ); function stsv_presuffix_products_save( $post_id ) { if ( ! empty( $_POST['_product_prefix'] ) ) { update_post_meta( $post_id, '_product_prefix', esc_attr( $_POST['_product_prefix'] ) ); } } |
Code hiển thị nội dung vào trước và sau giá
Dán code này vào file functions.php của theme đang sử dụng sẽ thêm giá trị prefix vào trước và sau giá của sản phẩm.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /*Add to price html*/ add_filter( 'woocommerce_get_price_html', 'bbloomer_price_prefix_suffix', 100, 2 ); function bbloomer_price_prefix_suffix( $price, $product ){ $prefix = get_option( 'stsv_woocommerce_price_prefix'); $prefix_product = get_post_meta($product->get_ID(), '_product_prefix', true); if($prefix_product) $prefix = $prefix_product; $prefix = ($prefix)?'<span class="stsv_woocommerce_price_prefix">'.$prefix.'</span>':''; $price = $prefix.$price; return apply_filters( 'woocommerce_get_price', $price ); } |
Full code
Sau đây là tổng hợp toàn bộ code ở phía trên. Nếu đã làm các bước ở trên rồi thì bỏ qua nhé.
Dán toàn bộ code sau vào functions.php của theme đang sử dụng là được
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 | /*Thêm cài đặt vào Woocommerce*/ function stsv_woocommerce_general_settings( $array ) { $array[] = array( 'name' => __( 'Prefix to price', 'woocommerce' ), 'type' => 'title', 'desc' => '', 'id' => 'woocommerce_presuffix_settings' ); $array[] = array( 'title' => __( 'Prefix', 'woocommerce' ), 'desc' => __( 'Add prefix to price. Leave blank to disable.', 'woocommerce' ), 'id' => 'stsv_woocommerce_price_prefix', 'desc_tip' => true, 'type' => 'text', ); $array[] = array( 'type' => 'sectionend', 'id' => 'woocommerce_presuffix_settings'); return $array; }; add_filter( 'woocommerce_general_settings', 'stsv_woocommerce_general_settings', 10, 1 ); /*Add metabox to product*/ add_action( 'woocommerce_product_options_general_product_data', 'stsv_presuffix_products' ); function stsv_presuffix_products() { //Add metabox prefix to product woocommerce_wp_text_input( array( 'id' => '_product_prefix', 'label' => 'Prefix', 'description' => 'Add prefix to price. Leave blank to default.', 'desc_tip' => 'true', ) ); } /*Save metabox prefix */ add_action( 'woocommerce_process_product_meta', 'stsv_presuffix_products_save' ); function stsv_presuffix_products_save( $post_id ) { if ( ! empty( $_POST['_product_prefix'] ) ) { update_post_meta( $post_id, '_product_prefix', esc_attr( $_POST['_product_prefix'] ) ); } } /*Add to price html*/ add_filter( 'woocommerce_get_price_html', 'bbloomer_price_prefix_suffix', 100, 2 ); function bbloomer_price_prefix_suffix( $price, $product ){ $prefix = get_option( 'stsv_woocommerce_price_prefix'); $prefix_product = get_post_meta($product->get_ID(), '_product_prefix', true); if($prefix_product) $prefix = $prefix_product; $prefix = ($prefix)?'<span class="stsv_woocommerce_price_prefix">'.$prefix.'</span>':''; $price = $prefix.$price; return apply_filters( 'woocommerce_get_price', $price ); } |
Thêm css cho đẹp :
1 2 3 4 | span.stsv_woocommerce_price_prefix { font-size: 0.8em; margin: 0 10px 0 0; } |
Xem tiếp phần 3 : Thêm nội dung vào trước và sau giá của sản phẩm trong Woocommerce
Địa chỉ: Thanh Mai, Thanh Oai, Hà Nội
Điện thoại: 0983.078.804 (Mr.Hiếu)
Email: lehieuit91@gmail.com
Zalo : 0983.078.804
Website: www.sangtaosacviet.com
Kho theme: Kho themes nhiều mẫu mã đẹp
Trả lời