Các vấn đề liên quan tới customize woocommerce

15/05/2023 02:30 358

Table of Contents

Trong bài viết này mình sẽ tập hợp lại các nội dung mà anh chị em chúng ta thường gặp phải trong quá trình phát triển woocommerce

Thuộc tính và biến thể trong woocommerce

Thuộc tính ở đây ví dụ như màu sắc, size…, còn biến thể sản phẩm (giống như bản kế thừa của sản phẩm gốc chỉ khác nhau về các thuộc tính)

//kiểm tra sản phẩm là có biến thể hay chỉ là sản phẩm đơn giản
$product->get_type() == 'variable'
//Lấy tất cả thông tin biến thể
$variations = $product->get_available_variations();
//lưu thông tin biến thể vào phẩn tử data
data-variations="<?php echo esc_attr(wp_json_encode(lpdOptimizeVariations($variations))); ?>"

//kiểm tra sản phẩm là có biến thể hay chỉ là sản phẩm đơn giản

$product->get_type() == 'variable'

//Lấy tất cả thông tin biến thể

$variations = $product->get_available_variations();

//lưu thông tin biến thể vào phẩn tử data

data-variations="<?php echo esc_attr(wp_json_encode(lpdOptimizeVariations($variations))); ?>"

Function chỉ load nhữ thông tin biến thể cần thiết cho mục đích tùy biến cụ thể

variations có rất nhiều thông tin nếu chúng ta lưu hết vào data sẽ làm nặng web vì vậy chúng ta chỉ nên lấy những thông tin liên qua tới quá trình phát triển tính năng của chúng ta mà thôi. Sau đây là một function của tôi

function lpdOptimizeVariations($variations){
	$reVariations = array();
	if($variations){
		foreach($variations as $variation){
			$item = array();
			$item['attributes']['attribute_pa_size'] = $variation['attributes']['attribute_pa_size'];
			$item['display_price'] = $variation['display_price'];
			$item['display_regular_price'] = $variation['display_regular_price'];
			$item['variation_id'] = $variation['variation_id'];
			array_push($reVariations,$item);
		}
	}
	return $reVariations;
}

function lpdOptimizeVariations($variations){

$reVariations = array();

if($variations){

foreach($variations as $variation){

$item = array();

$item['attributes']['attribute_pa_size'] = $variation['attributes']['attribute_pa_size'];

$item['display_price'] = $variation['display_price'];

$item['display_regular_price'] = $variation['display_regular_price'];

$item['variation_id'] = $variation['variation_id'];

array_push($reVariations,$item);

}

return $reVariations;

}

Toàn bộ code tùy biến của item product sản phẩm

Đây là code tôi phát triển trong dự án shop gấu bông với tính năng đặt hàng nhanh thông qua modal

<?php


defined( 'ABSPATH' ) || exit;

global $product;
//echo "<pre>"; print_r($product->get_data()); echo "</prev>";
// Ensure visibility.
if ( empty( $product ) || ! $product->is_visible() ) {
	return;
}
$variations = array();
?>
<?php
$variation_selected_id = '';
if($product->get_type() == 'variable'){
// Lấy tất cả các biến thể của sản phẩm
$variations = $product->get_available_variations();
$variation_selected_id = $variations[0]['variation_id'];
}
?>
<div  class="item" id="lamphatdat-product-<?php echo $product->get_id(); ?>" 
data-variations="<?php echo esc_attr(wp_json_encode(lpdOptimizeVariations($variations))); ?>" 
data-title="<?php echo $product->get_title(); ?>"
data-thumbnail="<?php echo esc_attr(wp_json_encode(lpdThumbnailToJson($product->get_id()))); ?>"
data-gallery="<?php echo esc_attr(wp_json_encode(lpdGalleryToJson($product->get_id()))); ?>"
data-regular_price ="<?php echo $product->get_regular_price(); ?>"
data-sale_price ="<?php echo $product->get_sale_price(); ?>"
data-link="<?php the_permalink(); ?>"
data-variation_selected_id="<?php echo $variation_selected_id; ?>"
data-product_type = "<?php echo $product->get_type(); ?>"
>
	<div class="item-inner">




	<?php
	/**
	 * Hook: woocommerce_before_shop_loop_item.
	 *
	 * @hooked woocommerce_template_loop_product_link_open - 10
	 */
	do_action( 'woocommerce_before_shop_loop_item' );

	/**
	 * Hook: woocommerce_before_shop_loop_item_title.
	 *
	 * @hooked woocommerce_show_product_loop_sale_flash - 10
	 * @hooked woocommerce_template_loop_product_thumbnail - 10
	 */
	do_action( 'woocommerce_before_shop_loop_item_title' );

	/**
	 * Hook: woocommerce_shop_loop_item_title.
	 *
	 * @hooked woocommerce_template_loop_product_title - 10
	 */
	do_action( 'woocommerce_shop_loop_item_title' );

	/**
	 * Hook: woocommerce_after_shop_loop_item_title.
	 *
	 * @hooked woocommerce_template_loop_rating - 5
	 * @hooked woocommerce_template_loop_price - 10
	 */
	?>
   
    <?php 
	do_action( 'woocommerce_after_shop_loop_item_title' );

	/**
	 * Hook: woocommerce_after_shop_loop_item.
	 *
	 * @hooked woocommerce_template_loop_product_link_close - 5
	 * @hooked woocommerce_template_loop_add_to_cart - 10
	 */
	do_action( 'woocommerce_after_shop_loop_item' );
	?>
    <h2 class="woocommerce-loop-product__title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
     <?php if($product->get_type() == 'variable'){ $variation = wc_get_product( $variations[0]['variation_id'] ); ?>
    	<?php if($variation->get_sale_price() > 0){ ?>
        <div class="lamphatdat-price-by-variations">
            <div class="lamphatdat-price-by-variations-sale">
            <?php echo lamphatdatFormatNumberPrice($variation->get_sale_price()); ?>
            </div>
            <div class="lamphatdat-price-by-variations-regular">
            <?php echo lamphatdatFormatNumberPrice($variation->get_regular_price()); ?>
            </div> 
        </div>
        <?php }else{ ?>
        <div class="lamphatdat-price-by-variations">
            <div class="lamphatdat-price-by-variations-sale">
           <?php echo lamphatdatFormatNumberPrice($variation->get_regular_price()); ?>
            </div>
            <div class="lamphatdat-price-by-variations-regular">
            
            </div> 
        </div>
        <?php } ?>
    <?php } ?>
    <?php if($product->get_type() == 'simple'){  ?>
    	<?php if($product->get_sale_price() > 0){ ?>
        <div class="lamphatdat-price-by-variations">
            <div class="lamphatdat-price-by-variations-sale">
            <?php echo lamphatdatFormatNumberPrice($product->get_sale_price()); ?>
            </div>
            <div class="lamphatdat-price-by-variations-regular">
            <?php echo lamphatdatFormatNumberPrice($product->get_regular_price()); ?>
            </div> 
        </div>
        <?php }else{ ?>
        <div class="lamphatdat-price-by-variations">
            <div class="lamphatdat-price-by-variations-sale">
           <?php echo lamphatdatFormatNumberPrice($product->get_regular_price()); ?>
            </div>
            <div class="lamphatdat-price-by-variations-regular">
            
            </div> 
        </div>
        <?php } ?>
    <?php } ?>
    <?php if($product->get_type() == 'variable'){  ?>
    	
        <div class="lamphatdat-product-variant">
        <?php 
		$i = 1;
		foreach ( $variations as $variation ) { 
			$attributes = $variation['attributes'];
			//echo "<pre>"; print_r($variation); echo "</pre>";
			if($i == 1){ $actived = 'actived'; }else{ $actived = ''; }
		?>
        <div class="lamphatdat-product-variant-item <?php echo $actived; ?>" data-product_id="<?php echo $product->get_id(); ?>" data-variation_id="<?php echo $variation['variation_id']; ?>"><?php echo $attributes['attribute_pa_size']; ?></div>
        <?php $i++; } ?>
        </div>
        
    <?php } ?>
    
    <div class="lamphatdat-buy-now-out">
    <div class="lamphatdat-notice-after-add-to-cart">
    <a href="<?php echo wc_get_checkout_url(); ?>">Thanh Toán Đơn</a>
    </div>
    <?php if($product->get_type() == 'variable'){  ?>
    
   <button class="lamphatdat-add-to-cart" data-variation_id="<?php echo $variation_selected_id; ?>" data-product_id="<?php echo $product->get_id(); ?>" data-product_type="<?php echo $product->get_type(); ?>" data-quantity="1" type="button">Thêm vào giỏ</button>
    
    
    <?php }else{ ?>
   
   <button class="lamphatdat-add-to-cart" data-variation_id="" data-quantity="1" data-product_id="<?php echo $product->get_id(); ?>" data-product_type="<?php echo $product->get_type(); ?>" type="button">Thêm vào giỏ</button>
    
    <?php } ?>
    <button class="lamphatdat-buy-now-button" data-product_id="<?php echo $product->get_id(); ?>" data-product_type="<?php echo $product->get_type(); ?>" type="button">Mua ngay</button></div>
    </div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

<?php

defined( 'ABSPATH' ) || exit;

global $product;

//echo "<pre>"; print_r($product->get_data()); echo "</prev>";

// Ensure visibility.

if ( empty( $product ) || ! $product->is_visible() ) {

return;

}

$variations = array();

<?php

$variation_selected_id = '';

if($product->get_type() == 'variable'){

// Lấy tất cả các biến thể của sản phẩm

$variations = $product->get_available_variations();

$variation_selected_id = $variations[0]['variation_id'];

}

<div class="item" id="lamphatdat-product-<?php echo $product->get_id(); ?>"

data-variations="<?php echo esc_attr(wp_json_encode(lpdOptimizeVariations($variations))); ?>"

data-title="<?php echo $product->get_title(); ?>"

data-thumbnail="<?php echo esc_attr(wp_json_encode(lpdThumbnailToJson($product->get_id()))); ?>"

data-gallery="<?php echo esc_attr(wp_json_encode(lpdGalleryToJson($product->get_id()))); ?>"

data-regular_price ="<?php echo $product->get_regular_price(); ?>"

data-sale_price ="<?php echo $product->get_sale_price(); ?>"

data-link="<?php the_permalink(); ?>"

data-variation_selected_id="<?php echo $variation_selected_id; ?>"

data-product_type = "<?php echo $product->get_type(); ?>"

<?php

/**

* Hook: woocommerce_before_shop_loop_item.

* @hooked woocommerce_template_loop_product_link_open - 10

do_action( 'woocommerce_before_shop_loop_item' );

/**

* Hook: woocommerce_before_shop_loop_item_title.

* @hooked woocommerce_show_product_loop_sale_flash - 10

* @hooked woocommerce_template_loop_product_thumbnail - 10

do_action( 'woocommerce_before_shop_loop_item_title' );

/**

* Hook: woocommerce_shop_loop_item_title.

* @hooked woocommerce_template_loop_product_title - 10

do_action( 'woocommerce_shop_loop_item_title' );

/**

* Hook: woocommerce_after_shop_loop_item_title.

* @hooked woocommerce_template_loop_rating - 5

* @hooked woocommerce_template_loop_price - 10

<?php

do_action( 'woocommerce_after_shop_loop_item_title' );

/**

* Hook: woocommerce_after_shop_loop_item.

* @hooked woocommerce_template_loop_product_link_close - 5

* @hooked woocommerce_template_loop_add_to_cart - 10

do_action( 'woocommerce_after_shop_loop_item' );

<h2 class="woocommerce-loop-product__title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<?php if($product->get_type() == 'variable'){ $variation = wc_get_product( $variations[0]['variation_id'] ); ?>

<?php if($variation->get_sale_price() > 0){ ?>

<?php echo lamphatdatFormatNumberPrice($variation->get_sale_price()); ?>

</div>

<?php echo lamphatdatFormatNumberPrice($variation->get_regular_price()); ?>

</div>

<?php }else{ ?>

<?php echo lamphatdatFormatNumberPrice($variation->get_regular_price()); ?>

</div>

</div>

<?php } ?>

<?php if($product->get_type() == 'simple'){ ?>

<?php if($product->get_sale_price() > 0){ ?>

<?php echo lamphatdatFormatNumberPrice($product->get_sale_price()); ?>

</div>

<?php echo lamphatdatFormatNumberPrice($product->get_regular_price()); ?>

</div>

<?php }else{ ?>

<?php echo lamphatdatFormatNumberPrice($product->get_regular_price()); ?>

</div>

</div>

<?php } ?>

<?php if($product->get_type() == 'variable'){ ?>

<?php

$i = 1;

foreach ( $variations as $variation ) {

$attributes = $variation['attributes'];

//echo "<pre>"; print_r($variation); echo "</pre>";

if($i == 1){ $actived = 'actived'; }else{ $actived = ''; }

<div class="lamphatdat-product-variant-item <?php echo $actived; ?>" data-product_id="<?php echo $product->get_id(); ?>" data-variation_id="<?php echo $variation['variation_id']; ?>"><?php echo $attributes['attribute_pa_size']; ?></div>

<?php $i++; } ?>

</div>

<?php } ?>

<a href="<?php echo wc_get_checkout_url(); ?>">Thanh Toán Đơn</a>

</div>

<?php if($product->get_type() == 'variable'){ ?>

<button class="lamphatdat-add-to-cart" data-variation_id="<?php echo $variation_selected_id; ?>" data-product_id="<?php echo $product->get_id(); ?>" data-product_type="<?php echo $product->get_type(); ?>" data-quantity="1" type="button">Thêm vào giỏ</button>

<?php }else{ ?>

<button class="lamphatdat-add-to-cart" data-variation_id="" data-quantity="1" data-product_id="<?php echo $product->get_id(); ?>" data-product_type="<?php echo $product->get_type(); ?>" type="button">Thêm vào giỏ</button>

<?php } ?>

<button class="lamphatdat-buy-now-button" data-product_id="<?php echo $product->get_id(); ?>" data-product_type="<?php echo $product->get_type(); ?>" type="button">Mua ngay</button></div>

</div>

còn update liên tục …

Các bài viết khác có thể hữu ích với bạn

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Tạo slide danh mục sản phẩm nổi bật trong woocommece bằng slick [ 05/11/2023 04:13 ]
Thêm một item menu vào my account woocommerce [ 25/03/2023 08:38 ]
Cho phép chỉnh sửa xóa sản phẩm ở trang thanh toán checkout [ 31/08/2022 02:43 ]
Add to cart woocommerce with meta item [ 13/07/2022 08:11 ]
Code xử lý giỏ hàng cart woocommerce [ 08/07/2022 11:32 ]
Thêm một item vào nav my account woocommerce [ 21/06/2022 14:48 ]
Tùy biến địa chỉ trong my account woocommerce [ 21/06/2022 06:49 ]
Thay đổi strength password cho woocommerce [ 24/04/2022 14:34 ]
Tạo bộ lọc sản phẩm woocommerce theo meta key [ 23/04/2022 04:28 ]
Code xử lý order woocommerce [ 07/04/2022 12:54 ]

Các vấn đề liên quan tới customize woocommerce

Thuộc tính và biến thể trong woocommerce

Function chỉ load nhữ thông tin biến thể cần thiết cho mục đích tùy biến cụ thể

Toàn bộ code tùy biến của item product sản phẩm

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)