Show sản phẩm Upsell ở trang thanh toán Woocommerce

Một trong những Task mình làm là phải hiển thị được sản phẩm Upsell của các sản phẩm đã mua trong đơn hàng.

Đây là code để gọi sản phẩm Upsell theo ID Product, một Tip nhỏ lưu lại nếu sau này cần dùng. Trong code có khá nhiều comment do mình vừa code vừa test 🙂

<h3 style="text-transform: uppercase;">Recommended Products</h3>
<div class="row">
	<?php 
		//$order = new WC_Order( $order_id );
		$upsells = [];
		$items = $order->get_items();
		if($items) {
			foreach ( $items as $item ) {
				$product_name = $item['name'];
				$product_id = $item['product_id'];
				$product_variation_id = $item['variation_id'];
				//$crosssell_ids = get_post_meta( $product_id, '_crosssell_ids' );
				
				$product = new WC_Product($product_id);
				//var_dump($product);
				$upsell = $product->get_upsells();
				//var_dump($upsells);
				foreach($upsell as $item) {
					//var_dump($item);
					if (!in_array($item, $upsells)) {
						array_push($upsells,$item);
					}
				}
				
			}
		}		
		if(count($upsells) > 0){
			//var_dump($upsells);
			foreach ($upsells as $key => $value) {
				//var_dump($value);
				$product = wc_get_product( $value );
				// echo "<pre>";
				// var_dump($product);
				// echo "</pre>";
				// echo $product->get_title();
				// echo $product->get_price_html();
				// echo get_the_post_thumbnail( $value, 'thumbnail' );
				// echo "----------";
				?> 
					<div class="large-3 col">
						<div class="f5thank">
							<div class="box-image">
								<?php echo get_the_post_thumbnail( $value, 'full' ); ?>
								<div class="f5thankhover">
									<div class="cAddCart">
										<?php 
										if( $product->get_type() == 'simple' ){
									        echo '<a href="'.$product->get_permalink().'?add-to-cart=' . $value . '" class="f5Buton"><span> Add to Cart</span></a>';
									        //echo $link;
									    } else {
									       echo '<a href="' . $product->get_permalink() . '" class="f5Buton"><span> Select Option</span></a>';
									    } ?>
									    <!-- <a href="javascript:void(0);" onclick="getQuickView(<?php echo $value ?>); return false;" class="f5Buton"><span> QuickView</span></a> -->
									</div>
								</div>
							</div>
							<div class="box-text text-center">
								<div class="title-wrapper">
									<p class="name product-title"><a href="<?php echo $product->get_permalink(); ?>"><?php echo $product->get_title().'--'.$value; ?></a></p>
								</div>
								<?php echo $product->get_price_html(); ?>
							</div><!-- box-text -->
							
						</div>
					</div>
					<style>
						.f5thank {
							/*border: 1px solid #000;*/
							position: relative;
						}
						.f5thank:hover .f5thankhover {
							opacity: 1;
						}
						.f5thankhover {
							position: absolute;
							top: 0;
							width: 100%;
							height: 100%;
							/*background-color: rgba(0,0,0,0.5);*/
							padding-top: 40%;
							opacity: 0;
							

						}
						.f5thankhover a {
							width: 60%;
							text-align: center;
							height: auto;
    						background-color: rgba(0,0,0,0.8);
    						color: #fff;
    						padding: 10px;
    						text-transform: uppercase;
    						margin-left: auto;
							margin-right: auto;
							display: block;
						}
						.f5thankhover a:hover {
    						background-color: rgba(0,0,0,1);
    						border-radius: 15px;
						}
						/* The Modal (background) */
						.modal {
						  display: none; /* Hidden by default */
						  position: fixed; /* Stay in place */
						  z-index: 1; /* Sit on top */
						  padding-top: 100px; /* Location of the box */
						  left: 0;
						  top: 0;
						  width: 100%; /* Full width */
						  height: 100%; /* Full height */
						  overflow: auto; /* Enable scroll if needed */
						  background-color: rgb(0,0,0); /* Fallback color */
						  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
						}

						/* Modal Content */
						.modal-content {
						  position: relative;
						  background-color: #fefefe;
						  margin: auto;
						  padding: 0;
						  border: 1px solid #888;
						  width: 80%;
						  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
						  -webkit-animation-name: animatetop;
						  -webkit-animation-duration: 0.4s;
						  animation-name: animatetop;
						  animation-duration: 0.4s
						}

						/* Add Animation */
						@-webkit-keyframes animatetop {
						  from {top:-300px; opacity:0} 
						  to {top:0; opacity:1}
						}

						@keyframes animatetop {
						  from {top:-300px; opacity:0}
						  to {top:0; opacity:1}
						}

						/* The Close Button */
						.close {
						  color: white;
						  float: right;
						  font-size: 28px;
						  font-weight: bold;
						}

						.close:hover,
						.close:focus {
						  color: #000;
						  text-decoration: none;
						  cursor: pointer;
						}

						.modal-header {
						  padding: 2px 16px;
						  background-color: #5cb85c;
						  color: white;
						}

						.modal-body {padding: 2px 16px;}

						.modal-footer {
						  padding: 2px 16px;
						  background-color: #5cb85c;
						  color: white;
						}
					</style>
					<script>
						
						function getQuickView(id) {
							var modal = document.getElementById("myModal");
							alert('San pham: '+id);
							modal.style.display = "block";
						}
					</script>
				<?php
			}
		}else {
			echo "Xin chao";
		}
	?>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

Và đây là kết quả sau khi code xong:

Leave a comment

Your email address will not be published. Required fields are marked *