Mặc định thì WooCommerce đã có sẵn block thêm sản phẩm chèn vào bài viết (post) nhưng nó khá tệ và cần custom lại một chút. Trong bài viết này mình sẽ chia sẻ với bạn một code giúp thêm sản phẩm đơn vào bài viết trông nổi bật hơn.
Không dài dòng nữa, vào việc.
Copy đoạn code này chèn vào file functions.php trong child-theme của bạn (hoặc theme chính, nhưng tốt nhất nên dùng child-theme, lỡ có lỗi thì cũng không ảnh hưởng website).
** Code này của itseovn đã lâu nên mình đã chỉnh lại để nó chạy được trên các bản woo mới.
|
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 |
/* * Custom Hien thi san pham ra bai viet */ function itseovn_productbyid($args, $content) { $product = wc_get_product($args['id']); if ( ! $product ) { return '<p>Sản phẩm không tồn tại</p>'; } else { $image_id = $product->get_image_id('thumbnail'); $image_url = wp_get_attachment_image_url($image_id, 'thumbnail'); $contents = '<div class="col large-12 cs-productdetail">'; $contents .= '<div class="product-gallery large-5 col cs-product-gallery"><img src="'.$image_url.'" /></div>'; $contents .= '<div class="product-info summary col-divided large-7 col entry-summary product-summary text-left cs-product-info"> <h2 class="product-title product_title entry-title cs-titlepro">'.$product->get_name().'</h2> <div class="price-wrapper"> <p class="price product-page-price "><b style="font-size:19px">GIÁ: </b> <span class="woocommerce-Price-amount amount"><bdi>'.wc_price($product->get_price()).'</bdi></span></p> </div> <div class="product-short-description">'.$product->get_short_description().'</div> <a class="cs-buynow" href="'.$product->add_to_cart_url().'">Mua ngay</a> <a class="cs-detail" href="'.get_permalink($args['id']).'">Xem chi tiết</a> </div></div>'; return $contents; } } add_shortcode('shortcode_productbyid', 'itseovn_productbyid'); |
Sau đó thì thêm tí màu sắc, copy đống này chèn vào file style.css hoặc phần advanced (nếu xài flatsome).
|
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 56 57 58 59 60 61 62 63 64 65 66 67 68 |
/** Custom hien thi san pham ra bai viet **/ .cs-productdetail { float: left; width: 100%; border: 2px solid #007d3f; padding: 15px 20px 15px 2px !important; margin-bottom: 25px; border-radius: 10px; } .cs-productdetail .col.col-divided:not(.col-first):last-child{ border-left: none; } .cs-product-gallery img { border: 1px solid #ccc; } .cs-product-info .product-short-description { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; font-style: italic; margin-top: 14px !important; margin-bottom: 20px; } .cs-product-info .cs-buynow { border: 2px solid #ee402f; border-radius: 3px; background-color: #db261b; color: #fff !important; padding: 5px 15px 5px 20px; } .cs-product-info .cs-detail{ border: 2px solid #0436ae; border-radius: 3px; background-color: #0436ae; color: #fff !important; padding: 5px 15px 5px 20px; } .cs-product-info .cs-titlepro { color: #db261b; font-size: 28px !important; font-weight: 700 !important; line-height: 32px !important; margin-top: 15px; margin-bottom: 15px; } .cs-product-info span.amount { white-space: nowrap; color: #fc0000; font-weight: bold; } @media (min-width:767px) { .cs-product-gallery, .product-info { float: left; } } @media(max-width:767px) { .cs-product-info { padding: 0px 0px 0px 15px !important; } } |
Chèn vào bài viết mà bạn cần đoạn shortcode này:
[shortcode_productbyid id=”123“]
Lưu ý: id=”123″, bạn chèn id sản phẩm vào đây. Để lấy id sản phẩm thì bạn vào quản lý sản phẩm, bấm vào chỉnh sửa sản phẩm và chú ý trên url có phần ?post=123. Đây là id của sản phẩm.
Và đây là kết quả
Chúc bạn thành công!
Code đẹp mà giờ bị lỗi hiển thị bạn có thể sửa lại được không?
Lỗi gì bạn
mình có làm theo hướng dẫn mà sao nó cứ hiện ra “Sản phẩm không tồn tại” mặc dù đã lấy đúng Product ID rồi.
Admin xem giúp mình với, link bài viết của mình đã nhúng sản phẩm mình để ở dưới admin check giúp mình xem lỗi ở đâu với
https://daikon. com.vn/bo-luu-dien-ups-160kva-tai-benh-vien-da-khoa-vinh-phuc
Bạn clear cache đi nhé