Hướng Dẫn Custom Woocommerce – Phần 1

Theme đã hỗ trợ woocommerce

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

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>

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

Code style 4 sản phẩm trên một dòng

.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; }

Bạn đang đọc bài viết Hướng Dẫn Custom Woocommerce – Phần 1 tại Website: Học Lập Trình

• Tweet
• Share
• Share
• Share
• Share