Hướng dẫn custom woocommerce – phần 1

08/01/2016 14:58 7937

Table of Contents

Tuyên bố theme đã hỗ trợ woocommerce

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

add_action( 'after_setup_theme', 'woocommerce_support' );

function woocommerce_support() {

add_theme_support( 'woocommerce' );

}

Copy File trong folder template

Copy tất cả file trong folder templates nằm trong folder của plugin woocommerce vào folder theme hiện hành và đổi tên thành woocommerce

Custom hiển thị thông tin của một sản phẩm

Mở file content-product.php và thay thế toàn bộ code nằm trong thẻ <li></li> bằng code show thông tin sản phẩm

<div class="cutom-woocommerce-product-item">
	<div class="cutom-woocommerce-product-item-featured-image">
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
				<?php echo get_the_post_thumbnail(get_the_ID(), 'cumtom-featured-image-for-shop' ); ?>

                </a>
    </div>	
    <div class="cutom-woocommerce-product-item-title-and-price">
    	<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <p><?php woocommerce_get_template( 'loop/price.php' ); ?></p>
    </div>
</div>

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">

<?php echo get_the_post_thumbnail(get_the_ID(), 'cumtom-featured-image-for-shop' ); ?>

</a>

</div>

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

</div>

Style hiển thị một row là 4 cột

.cutom-woocommerce-product-item-title-and-price h2 a {
    font-weight: normal;
    font-size: 14px;
    clear: both;
    text-align: center;
}
.cutom-woocommerce-product-item {
    width: 23.5%;
    float: left;
    margin-right: 2%;
    background: #fff;
    text-align: center;
    min-height: 290px;
    margin-bottom: 40px;
}
.cutom-woocommerce-product-item:nth-of-type(4n+4) {
    margin-right: 0;
}

span.amount {
    text-decoration: none;
}

.cutom-woocommerce-product-item-title-and-price ins {
    text-decoration: none !important;
    font-weight: 700 !important;
    color: #F91111 !important;
}

.cutom-woocommerce-product-item-title-and-price h2 a {

font-weight: normal;

font-size: 14px;

clear: both;

text-align: center;

}

.cutom-woocommerce-product-item {

width: 23.5%;

float: left;

margin-right: 2%;

background: #fff;

text-align: center;

min-height: 290px;

margin-bottom: 40px;

}

.cutom-woocommerce-product-item:nth-of-type(4n+4) {

margin-right: 0;

}

span.amount {

text-decoration: none;

}

.cutom-woocommerce-product-item-title-and-price ins {

text-decoration: none !important;

font-weight: 700 !important;

color: #F91111 !important;

}

Còn tiếp(…)

4.8/5 (17 Đánh giá)

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

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 ]
Các vấn đề liên quan tới customize woocommerce [ 15/05/2023 02:30 ]
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 ]

Hướng dẫn custom woocommerce – phần 1

Tuyên bố theme đã hỗ trợ woocommerce

Copy File trong folder template

Custom hiển thị thông tin của một sản phẩm

Style hiển thị một row là 4 cột

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)