Bước 1: Cài đặt ACF và tạo danh mục mua kèm ( Phụ kiện )
Bước 2: Vào ACF -> add new Customfield, Thêm các Field tương tự như hình.
Bước 3: Thêm setup subfield như hình và lưu lại.
Với filter by Taxonomy là các danh mục mà bạn muốn chọn sản phẩm trong đó. (Phí dưới có thêm 1 cái post type để hiện thị cho cái ACF này, chọn là Product/ Sản phẩm nhé)
Bước 4: Thêm đoạn code sau vào file functions.php
if (!function_exists('currency_format')) { function currency_format($number, $suffix = 'đ') { if (!empty($number)) { return number_format($number, 0, ',', '.') . "{$suffix}"; } } } if (!function_exists('bundled_products')) { function bundled_products(){ global $product; $rows = get_field('sp_mua_kem' ); ?> <style> .bundled_products{ display:flex; list-style:none; } .bundled_products li{ margin-right:10px; } .contain-bundled{ text-align: center; font-size: 12px; font-weight: bold; } .contain-bundled img{ object-fit: contain; width: 80px; height: 80px; } .price-main{ text-decoration: line-through; color: #808080b3; } .price-sale{ color:red; } .title_prod p{ margin-bottom:0; } .contain-bundled .thumb-img{ position:relative; border: 1px solid #8080802e; margin-bottom: 10px; } .contain-bundled .thumb-img div{ position: absolute; top: 0px; right: 0; width: 100%; } .contain-bundled .thumb-img div a.add{ font-size: 18px; color: red; text-align: right; width: 100%; display: block; padding-right: 5px; } .contain-bundled .thumb-img div a.added_to_cart { margin-top: 0 !important; width: 100%; padding: 0; background-color: #000; color: #fff; font-weight: 400 !important;; text-transform: inherit; font-size:12px !important; } .txt-mua-kem{ color:#000; font-size:13px; font-weight:bold; margin-bottom:5px; } </style> <?php echo '<p class="txt-mua-kem">Sản phẩm thường được mua kèm</p>'; echo '<ul class="bundled_products">'; foreach($rows as $val){ echo '<li> <div class="contain-bundled"> <div class="thumb-img"><img src="'.get_the_post_thumbnail_url($val['san_pham']).'"/><div><a href="'.wc_get_product($val['san_pham'])->add_to_cart_url().'" value="'. esc_attr( $val['san_pham'] ).'" class="ajax_add_to_cart add_to_cart_button add" data-product_id="'.$val['san_pham'].'"> + </a></div></div> <div class="title_prod"><p>'.get_the_title($val['san_pham']).'</p></div> <span class="price-sale">'.currency_format(wc_get_product($val['san_pham'])->price).'</span> <span class="price-main">'.currency_format(wc_get_product($val['san_pham'])->get_regular_price()).'</span> </div></li>'; } echo '</ul>'; } add_action( 'woocommerce_before_single_product_summary', 'bundled_products', 20 ); }
Bước 5: Vào thêm sản phẩm, có 1 field mới là sản phẩm mua kèm, ae chọn sản phẩm mua kèm và lưu lại, ra ngoài trang single product xem thành quả.
=> Chúc các bạn thành công !