Lấy thuộc tính của biến thể trong Woocomecer

Cách lấy thuộc tính các biến thể trong Woocomecer

Trong một số trường hợp để có thể tùy biến được Web thương mại điện tử xây dựng bằng Woocomecer thì bạn cần lấy từng giá trị của trường biến thể.

Lấy giữ liệu biến thể sản phẩm Woocomecer bằng Plugin

Mình chưa tìm hiểu xem có Plugin nào lấy được ko nhưng mình ko thích dùng nhiều Plugin lắm.

Chỉ có bần cùng ko code được thì mới dùng Plugin. Vì dùng nhiều Plugin sẽ khiến Website của bạn load chậm hơn khá nhiều, nhất là trong trang Admin.

Cách lấy giữ liệu biến thể sản phẩm Woocomecer bằng Code

Lấy từng trường biến thể Woocomecer

lay-thuoc-tinh-cua-bien-the-trong-woocomecer

Để có thể có thể lấy được giữ liệu của 1 trường tùy chỉnh bất kỳ bạn chỉ cần sao chép đoạn code này và chỗ muốn hiển thị là đc nhé.

<div class=”thuoc-tinh”>
<div class=”mau-sac”><?php $fabric_values = get_the_terms( $product->id, ‘pa_mau-sac‘);
foreach ( $fabric_values as $fabric_value ) { ?>
<p class=”<?php echo $fabric_value->name; ?>”></p>
<?php } ?> </div>
</div>

Bạn lưu ý chỗ mình đánh dấu màu xanh lá cây nhé. Đó là đường slug của trường đó. Để có thể lấy được giữ liệu trường khác bạn chỉ cần thay thể thôi nhé.

Lấy tất cả các biến thể Woocomecer

Phần này bạn sẽ làm việc trong file Function.php nhé

lay-thuoc-tinh-cua-bien-the-trong-woocomecer-2

/**
 * Replace add to cart button in the loop.
 */
function iconic_change_loop_add_to_cart() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
    add_action( 'woocommerce_after_shop_loop_item', 'iconic_template_loop_add_to_cart', 10 );
}
add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );
/**
* Use single add to cart button for variable products.
*/
functioniconic_template_loop_add_to_cart() {
global$product;
if( ! $product->is_type( 'variable') ) {
woocommerce_template_loop_add_to_cart();
return;
}
remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
add_action( 'woocommerce_single_variation', 'iconic_loop_variation_add_to_cart_button', 20 );
woocommerce_template_single_add_to_cart();
}
/**
* Customise variable add to cart button for loop.
*
* Remove qty selector and simplify.
*/
functioniconic_loop_variation_add_to_cart_button() {
global$product;
?>
<div class="woocommerce-variation-add-to-cart variations_button">
<button type="submit"class="single_add_to_cart_button button"><?php echoesc_html( $product->single_add_to_cart_text() ); ?></button>
<input type="hidden"name="add-to-cart"value="<?php echo absint( $product->get_id() ); ?>"/>
<input type="hidden"name="product_id"value="<?php echo absint( $product->get_id() ); ?>"/>
<input type="hidden"name="variation_id"class="variation_id"value="0"/>
</div>
<?php
}
Thêm chút CSS.
Cái này bạn sao chép vao file css của theme nhé.
.products .variations {
    border: 1px solid #eee;
    position: relative;
    margin-bottom: 50px;
}
.products .variations td {
    display: block;
    padding: 10px 20px 18px;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.products .variations td:first-child {
    padding-bottom: 0;
    border: none;
}
.products .variations td:last-child {
    padding-top: 5px;
}
.products .variations tr:last-child td {
    border: none;
}
.products .variations td label {
    font-weight: 600;
}
.products .variations td select {
    width: 100%;
}
.products .variations .reset_variations {
    margin: 10px 0 0;
    position: absolute;
    bottom: -35px;
    left: 0;
    right: 0;
}

Yêu cầu: bạn cần phải biết chút HTML, CSS để làm được dễ hơn nhé.

Nếu có thắc mắc gì bạn cứ để lại Comment mình sẽ có gắng giải đáp nhé

Đánh giá:

Trả lời

Email của bạn sẽ không được hiển thị công khai.