Hướng dẫn viết themes bán hàng bằng WordPress sử dụng Woocommerce

Cập nhật lần cuối: 05 Tháng Mười 2023

WordPress

2,682 Lượt xem

Có nhiều Plugin có thể giúp bạn tạo ra một trang web bán hàng bằng WordPress, nhưng chưa có Plugin nào có thể qua mặt Woocommerce trong khoảng này. Trong bài viết này mình sẽ hướng dẫn bạn cơ bản cách tạo ra một themes bán hàng sử dụng Woocommerce.

Cấu trúc giao diện của Woocommerce

Sau khi cài đặt Plugin Woocommerce, bạn hãy truy cập vào đường dẫn “webcủabạnwp-contentpluginswoocommercetemplates“. Ở đây bạn sẽ thấy các thư mục và các tệp php như sau.

Danh sách các thư mục và tệp php giao diện woocommerce

Trong bài này mình sẽ không đi quá về vấn đề kỹ thuật, thay vào đó mình sẽ hướng dẫn các bạn tích hợp Woocommerce và themes và tùy chỉnh nó phù hợp với themes của mình.

Tích hợp Woocommerce vào themes WordPress

Hãy copy thư mục templates của plugin woocommerce và chuyển vào trong themes của bạn.
Tiếp theo bạn đổi tên thư mục templates thành woocommerce

Đưa templates của woocommerce vào theme của bạn

Hãy vào phần WooCommerce và tạo một vài sản phẩm

sau đó tiến hành viết code nhé.

Đưa sản phẩm WooCommerce ra trang chủ của theme

Trong bài này mình sẽ sử dụng lại cái theme mà mình viết trong bài: >Hướng dẫn viết theme wordpress căn bản bạn có thể xem lại để hiểu về cấu trúc themes wp nếu chưa hiểu nhé.

Mình sẽ code đoạn này để lấy sản phẩm ra trang chủ.

 <?php
 $items = array(
                 'post_type' => 'product', 
                 'posts_per_page' => 8);
 $loop = new WP_Query( $items );
 while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?> 
 
<!--LOOP-->
 <div class="col-sm-4"> 
    <?php the_post_thumbnail(full,array( "title" => get_the_title(),"alt" => get_the_title(),"class" => "img-responsive" ));?>
    <h2><?php the_title();?></h2>
    <p class="special-price"><?php echo $product->get_price_html(); ?></p>
    <a href="<?php the_permalink() ;?>">Xem thêm</a>
 </div>
 <!--LOOP-->

 <?php endwhile;  wp_reset_query();  ?>

Giải thích nhé:

Đầu tiên mình sẽ tạo ra một biến mảng items. sau đó truyền vào các key và values sau;

Key: post_type, values: product. Yêu cầu loại đăng là product.
Key: posts_per_page, values: 8: là số item sẽ lấy tối đa là 8.

Tiếp theo sẽ tạo ra một truy vấn của WP bằng WP_Query() với mảng items và lưu vào biến loop.

Sau đó thì tiến hành đưa vào vòng lặp và lấy dữ liệu ra. Biến global $product là một biến đặt biệt của WC cho phép lấy ra một số các thuộc tính của sản phẩn. VD ở đây là giá.

the_post_thumbnail là lấy ra hình ảnh tiêu biểu của sản phẩm, đoạn code này đã được tùy biến để bạn có thể tích hợp vào theme tốt hơn, ví dụ như bạn có thể chèn title, alt, class cho hình ảnh sẽ xuất ra.

$product->get_price_html() là lấy giá của sản phẩm hiện tại, bao gồm giá khuyến mãi và giá gốc.

Vì có sử dụng WP_Query() nên sau khi kết thúc phải sử dụng hàm wp_reset_query(); nếu không thực hiện gọi hàm WP_Query() lần nữa sẽ bị lỗi.

Nếu bạn muốn lấy ra các sản phẩm ở một mục xác định có thể chỉnh sửa như sau:

$items = array(
                'post_type' => 'product',
                'posts_per_page' => 8,
                'tax_query' => array(
                                     array(
                                           'taxonomy' => 'product_cat',
                                           'field' => 'id',
                                           'terms' => 18
                                           )
                                     ) 
                        );

Đoạn trên sẽ lấy các sản phẩm ở danh mục có ID là 18

Một cách khác nữa đó là bạn có thể tạo ra một page và đưa có shortcode của WC vào ví dụ như [woocommerce_cart], và sau đó chọn trang chủ là một trang tĩnh. Tuy nhiên mình rất ít khi làm như thế này.

Tùy chỉnh trang chi tiết sản phẩm cho WooCommerce

Bây giờ chúng ta vào thư mục woocommerce của theme. Của mình thì ở tại “C:xampp2htdocswordpresswp-contentthemesmythemewoocommerce” sau đó các bạn mở file “single-product.php” bằng trình edit văn bản nhé. Mình dùng notepad++.

Ngay từ đầu mình đã nói sẽ không đi chuyên sâu về kỹ thuật, cái nào các bạn cần có thể tìm hiểu thêm. Ở đây mình chỉ hướng dẫn vài cái cơ bản để bạn biết cách tùy chỉnh wc cho theme của bạn thôi.

bây giờ hãy xóa sạch toàn bộ nội dung của file này, sau đó ra trang chủ và click vào cái đường link của sản phẩm.

bạn sẽ nhận được một trang trắng. Không vấn đề gì cả. Bây giờ bạn có thể thực hiện như cách viết theme thông thường. đó là đưa các phần cố định như header. footer, sidebar,… vào phần này. Đoạn code mẫu như sau:

<?php get_header(); 
  while ( have_posts() ) : the_post();
     wc_get_template_part( 'content', 'single-product' );
  endwhile; // end of the loop.
get_footer(); ?>

Quá ngắn ngọn. nhưng chưa xong đâu. bây giờ lưu lại và tiếp tục mở file “content-single-product.php” lên.

Bạn cũng xóa sạch nội dung trong này và sau đó copy phần HTML hiển thị chi tiết sản phẩm của bạn vào đây. Nhớ là chỉ phần giữa thôi nhé, chừa phần header và footer ra vì mình đã đưa nó vào rồi. sau đó bạn tiến hành đưa các template tag phù hợp vào là xong. Ở đây bạn không cần phải truy vấn hay lặp lấy dữ liệu gì cả. Một mẫu của mình như sau:

<?php global $product; ?>
 <div class="product-essential">
     <div class="product-img-box col-lg-6 col-sm-6 col-xs-12">
        //Hiển thị hình ảnh sản phẩm
        <?php the_post_thumbnail(full,array( "title" => get_the_title(),"alt" => get_the_title(),"class" => "img-responsive" ));?>
     </div>
 
     <div class="product-shop col-lg-6 col-sm-6 col-xs-12">
        <div class="product-name">
          //hiển thị tên sản phẩm trong cặp thẻ <h1>
          <?php the_title( '<h1>', '</h1>' ); ?>
        </div>
 
        <p class="availability in-stock">
            //Trạng thái sản phẩm
            <span><?php echo $product->is_in_stock() ? 'Còn hàng' : 'Hết hàng'; ?></span>
        </p>
 
        <div class="price-block">
            <div class="price-box">
                 //Hiển thị giá sản phẩm
                 <p class="special-price"><span class="price"> <?php echo $product->get_price_html(); ?> </span> </p>
            </div>
        </div>
 
        <div class="short-description">
             //Hiển thị đoạn mô tả ngắn cho sản phẩm
             <?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?>
        </div>

   </div>

   <div class="col-md-5 col-xs-12 sdt">
        //Hiển thị nút thêm vào giỏ hàng.
        <?php do_action('woocommerce_simple_add_to_cart'); ?>
   </div> 
 
 </div>

Vói nút thêm vào giỏ hàng bạn có thể custome lại trong file “wc-template-functions.php” tại đường dẫn “web của bạnwp-contentpluginswoocommerceincludes”

Tùy chỉnh trang danh mục sản phẩm cho WooCommerce

Tương tự như chỉnh sửa trang chi tiết sản phẩm. Trang danh mục được thể hiện trong file “archive-product.php”

Bạn mở file “archive-product.php” và xóa sạch trong này. sau đó đưa đoạn code sau vào:

<?php get_header();
   global $product;
   if ( have_posts() ) :
      while ( have_posts() ) : the_post(); global $product;?>

       <div class="col-sm-4">
            <?php the_post_thumbnail(full,array( "title" => get_the_title(),"alt" => get_the_title(),"class" => "img-responsive" ));?>
            <h2><?php the_title();?></h2>
            <p class="special-price"><?php echo $product->get_price_html(); ?></p>
            <a href="<?php the_permalink() ;?>">Xem thêm</a>
      </div>

<?php endwhile; endif;
 get_footer(); ?>

Các trang khác tương tự như vậy. Mình chỉ viết cơ bản để bạn hiểu được các xử lý themes wp với wc thôi. Nếu bạn có câu hỏi gì, có thể comment bên dưới mình sẽ trả lời nhé.