Tạo website bán hàng bằng WordPress với Custom Post Type

Posted on by admin

Xin nhắc lại rằng hiện nay không có một plugin nào của WordPress mà có thể làm ra được một website bán hàng chuyên nghiệp cho dù là nó có đơn giản thế nào đi nữa. Do vậy nếu bạn muốn thiết kế web bán hàng để kinh doanh trực tuyến với các tính năng giỏ hàng, billing, thanh toán trực tuyến… thì tôi nói thẳng luôn là WordPress sẽ không có plugin nào hỗ trợ mà đòi hỏi bạn phải có kỹ năng lập trình.

Tạo website bán hàng bằng wordpress

Do đó nếu muốn có một trang web để bán hàng online bằng wordpress thì bạn phải nhờ tới một đơn vị thiết kế chuyên nghiệp, còn nếu muốn tự tay mình làm thì có thể tham khảo bài viết tạo website bán hàng bằng WordPress với Custom Post Type của tôi ở dưới đây.

Với Custom Post Type bạn sẽ tạo được trang danh sách sản phẩm, trang chi tiết sản phẩm và một nút mua hàng để người dùng có thể đặt hàng thông qua website của bạn.

Nội dung của bài hướng dẫn tạo website bán hàng bằng WordPress như sau:

  1. Tạo Custom Post Type tên Shop
  2. Tạo các custom post field cho post type (giá, mã sản phẩm…)
  3. Tạo custom taxonomy cho post type (nhãn hiệu, mục sản phẩm)
  4. Tạo trang sản phẩm hiển thị sản phẩm với dạng danh sách (grid)
  5. Tạo trang hiển thị chi tiết sản phẩm

Cũng tương đối nhiều đấy nhỉ, do vậy để làm được như hướng dẫn trong bài viết này tôi yêu cầu bạn cần có một chút kỹ năng cơ bản về ngôn ngữ lập trình PHP và CSS cơ bản. Chắc rồi, ai mà bỏ thời gian nghiên cứu về WordPress thì chắc cũng biết ít nhiều rồi phải không?

Để làm được các nội dung như ở trên, tôi cần các bạn tìm hiểu và tải về Plugin có tên gọi là Types (WP-Types), plugin này hỗ trợ tương đối nhiều các tính năng mà các plugin khác không làm được, nói chung là nó sẽ hỗ trợ cho bạn tạo website bán hàng bằng wordpress đơn giản nhất.

Rồi, bắt tay vào làm thôi!

Hướng dẫn tạo website bán hàng bằng WordPress với Plugin WP-Types

1. Tạo Custom Post Type

Trước tiên bạn phải tải về và cài đặt plugin Types, link dành cho bạn:

http://wp-types.com/documentation/

Sau khi cài đặt thành công, chúng ta sẽ tiến hành tạo một phần để đăng sản phẩm tương tự như Posts khi đăng bài viết vậy, ta tạm gọi nó là Custom Post Type nhé!

Để tạo post type chúng ta vào Types -> Custom Type and Taxanomies -> Add Custom Post Type

ten_shop_post_type_1

Sau đó điền thông tin vào 4 dòng như sau:

ten_shop_post_type_2

Giải thích:

  • Post type name plural: Tên post type trong số nhiều, cái này không quan trọng nếu bạn đặt tên tiếng Việt.
  • Post type name singular: Tên post type trong số ít, cũng không quan trọng nếu bạn dùng tiếng Việt. Tên này phải khác với tên trong phần plural.
  • Slug: Slug nghĩa là tên đánh dấu cho post type này, nó được dùng để làm slug khi sử dung permalinks, hoặc để chúng ta lấy dữ liệu dựa theo slug này. Slug phải là chữ thường, không dấu, không khoảng cách. Ở đây mình không dùng slug là “product” bởi vì nó bị xung đột với các plugin tạo shop khác nếu bạn cài vào sau này.
  • Phần Visibility bạn có thể để trống nếu như không muốn thêm icon tượng trưng cho Post type này hoặc không muốn tuỳ chọn vị trí hiển thị.
  • Phần Select Taxonomies là bạn chọn taxonomy mà bạn muốn dùng, tạm thời để nguyên.
  • Phần Display Section là nơi bạn chọn các chức năng cần sử dụng trong post type này, bạn chọn như trong ảnh.

ten_shop_post_type_3

Những nội dung còn lại có thể để nguyên cũng được, sau đó nhấn vào nút Save Custom Post Type ở phía dưới để lưu lại những gì mà đã nhập nãy giờ.

Bây giờ bạn thử nhìn vào menu quản trị bên trái xem đã có mục Sản phẩm hiện ra chưa? nếu có rồi thì chúc mừng bạn đã làm đúng như hướng dẫn rồi đấy.

ten_shop_post_type_4

2. Tạo Custom Taxanomies

Taxanomies tương tự như Category và Tag của Posts vậy các bạn, ở đây chúng ta tạm dùng nó để phân loại ra là Nhãn hiệu và loại sản phẩm.

Bạn vào lại phần Types -> Custom Types & Taxanomies -> Add custom Taxanomies

ten_shop_post_type_5

Bây giờ ta sẽ cần tạo một taxonomy mang tên Product Category được gọi là danh mục sản phẩm. Ở đây mình đặt tên vậy để bao quát luôn, còn nếu vào dự án thực tế bạn sẽ đặt tên theo danh mục sản phẩm của bạn, có thể tạo được nhiều danh mục như vậy.

ten_shop_post_type_6

Phần dưới bạn chỉ cần chọn lại là Hierachical để cho phép sử dụng phân chia cấp độ cho taxonomy này (giống như Post Category).

ten_shop_post_type_7

Các phần khác để nguyên, sau đó ấn nút Save Taxonomy.

Bây giờ bạn rê chuột vào phần Products bên menu sẽ thấy mục Product Caegories hiện ra. Bây giờ ta tiến hành tạo thêm một taxonomy nữa mang tên Nhãn hiệu, bạn làm giống như bước trên, chỉ là thay tên thành:

  • Plural: Product Brands
  • Singular: Product Brand.
  • Slug: nhan-hieu

ten_shop_post_type_8

Các bạn đang làm tốt chứ? ổn định các phần trên rồi hẳn kéo xuống xem tiếp nhé!

3. Tạo Custom Field

Các custom field này mình sẽ tạo một số field sau:

  • Giá (Single Line)
  • Mô tả sản phẩm (WYSIWYG)
  • Tình trạng (Còn hàng hay hết hàng) (Dropdown)

Chỉ cần vậy thôi, muốn thêm gì các bạn tự tự hiểu và làm thêm nhé.

Để tạo custom field, bạn vào Types -> Custom Fields -> Add a custom fields group. Ở đây nó sẽ phân theo group, chúng ta nên hiểu mỗi group là một tập hợp nhiều custom fields.

ten_shop_post_type_9

Sau đó điền tên group và chọn post type cần sử dụng group này như hình.

ten_shop_post_type_10

Hãy để ý bên tay phải phần Available fields, đó là những loại kiểu field mà bạn có thể thêm. Ví dụ kiểu Single Line là field nhập chữ với một dòng, kiểu Checkbox là bạn sẽ chọn giá trị field có sẵn,…..

Bây giờ bạn click vào kiểu Single Line và đặt tên như sau.

ten_shop_post_type_11

Bạn chú ý đặt tên Slug như mình ở trên nhé, vì xíu nữa đụng tới code thì còn nhớ mà gọi nó ra, tốt nhất bạn hãy đặt và ghi nhớ như này: product-tên_field

Tiếp theo nhé, chọn WYSIWYG và nhập như hình

ten_shop_post_type_12

Tiếp tục, chọn Radio và thêm như hình…

ten_shop_post_type_13

Vậy là đã hoàn thành xong bước tạo Custom post type rồi đó, tiếp theo sẽ là phần hướng dẫn tạo website bán hàng bằng wordpress bằng cách thêm sản phẩm mẫu lên website.

4. Thêm sản phẩm demo lên trang web

Vào phần Products -> Add New

Bạn nên thêm từ 3-6 sản phẩm demo khác nhau cho vào các danh mục sản phẩm khác nhau để khi đưa lên website trông sẽ dễ quản lý và theo dõi hơn.

Phần này thì tương đối dễ nên tóm gọn thôi nhé, giờ chúng ta sẽ đi tiếp sang nội dung tiếp theo.

5. Tạo trang chi tiết sản phẩm

Ở phần này các bạn chú ý ở điểm này, file single.php nếu có dạn là single-{slug}.php thì nó sẽ áp dụng cho post type tương ứng với slug đó. Do vậy bạn tạo cho mình một file với tên single-san-pham.php để áp dụng cho post type là san-pham như ở trên mình đã tạo slug trước đó.

Sau đó, điều đầu tiên mà bạn cần làm là copy nội dung file single.php vào file single-san-pham.php vừa tạo để cho nó có cấu trúc phù hợp với theme bạn đang dùng.

Bây giờ bạn nhìn kỹ vào nội dung, thấy 2 dòng  while ( have_posts() ) : the_post()  và  endwhile
chứ? Đó là đoạn bắt đầu và kết thúc của Loop. Ở giữa 2 đoạn này có một số code linh ta linh tinh để in các phần như tiêu đề, nội dung bài, category,…Bạn hãy xoá hết nó và viết đoạn code dưới đây vào phần đó.

ten_shop_post_type_14

Copy đoạn code ở dưới đây:

<header>
        <!--BEGIN: PRODUCT THUMBNAIL-->
        <div class="product-thumb">
                <?php the_post_thumbnail( 'medium' ); ?>
        </div>
        <!--END: PRODUCT THUMBNAIL-->
 
        <!--BEGIN: PRODUCT INFO-->
        <div class="product-info">
                <h1><?php the_title(); ?></h1> <!--Tiêu đề sản phẩm-->
                <p class="product-price">
                        <?php echo "<strong>Giá:</strong> ". get_post_meta( $post->ID, 'wpcf-product-price', true ); ?>
                </p><!--Giá sản phẩm-->
 
                <p class="product-status">
                        <?php echo "<strong>Tình trạng:</strong> ";
                                $product_status = get_post_meta( $post->ID, 'wpcf-product-status', true );
                                if ($product_status == conhang) {
                                        echo "Còn hàng";
                                } else { echo "Hết hàng"; }
                        ?>
        </p><!--Tình trạng sản phẩm-->
 
                <div class="product-description">
                        <?php echo get_post_meta( $post->ID, 'wpcf-product-description', true ); ?>
                </div><!--Mô tả sản phẩm-->
 
                <a href="#" class="order-button">Đặt hàng</a>
        </div>
        <!--BEGIN: PRODUCT INFO-->
</header>
 
<div class="post-info">
        <?php the_content(); ?>
</div>

OK, thêm một chút CSS vào cho nó đẹp chút, copy đoạn code dưới đây và dán vào file style.css của bạn:

/*--Shop CSS--*/
.product-thumb {
        width: 45%;
        float: left;
}
.product-info {
        width: 45%;
        margin-left: 5%;
        float: right;
}
.product-info h1 {
        font-size: 1.5em;
        margin-bottom: 0.5em;
}
.product-price, .product-status, .product-description {
        margin: 5px 0;
}
.order-button {
        color: #fff;
        background: rgb(33, 189, 12);
        text-decoration: none;
        padding: 5px;
        margin: 15px 0;
        display: table;
}
.post-info {
        clear: both;
        padding-top: 15px;
}

Bây giờ khi xem sản phẩm, ta có kết quả như sau

ten_shop_post_type_15

Xấu lắm đúng không? không sao cái đó chắc bạn tự CSS được mà.

Như vậy là ta đã có một trang chi tiết sản phẩm kèm theo là nút mua hàng rồi, ở nút mua hàng này bạn cần phải code cho nó chuyển hướng sang một form liên hệ nhé, nếu chưa biết tạo form như thế nào bạn có thể tìm hướng dẫn tạo Form với Contact 7 trên Google giúp mình.

OK, sắp xong rồi sang phần cuối cùng nào!

6. Tạo danh sách sản phẩm

Tạo một file shop.php trong thư mục theme với nội dung như sau:

<?php
  $temp = $wp_query;
  $wp_query = null;
  $wp_query = new WP_Query();
  $wp_query->query('showposts=6&post_type=san-pham'.'&paged='.$paged);
  $count = 0;
 
  while ($wp_query->have_posts()) : $wp_query->the_post(); $count++;
?>
 
  <?php //Tạo biến chèn class 'thrid' vào mỗi 3 bài viết.
        if ($count == 3) {
                $p3 = 'thrid';
                $count = 0;
        } else { $p3 = ''; }
  ?>
 
  <div <?php post_class($p3); ?> id="product-<?php the_ID(); ?>">
                <?php the_post_thumbnail( array('class' => 'product-thumb') ); ?>
                <a href="<?php the_permalink(); ?>"><h3 class="product-title"><?php the_title(); ?></h3></a>
                <div class="info">
                        <p style="margin-top: 5px;"><?php echo get_post_meta( $post->ID, 'wpcf-product-price', true ); ?></p>
                        <p class="product-status">
                                <?php
                                        $product_status = get_post_meta( $post->ID, 'wpcf-product-status', true );
                                        if ($product_status == conhang) {
                                                echo "<strong style='color:green;'>Còn hàng</strong>";
                                        } else { echo "<strong style='color:red;'>Hết hàng</strong>"; }
                                ?>
                        </p><!--Tình trạng sản phẩm-->
                        <a class="order-button" href="<?php the_permalink();?>">Xem chi tiết</a>
                </div>
  </div>
 
<?php endwhile; ?>
 
<nav>
    <?php previous_posts_link('&laquo; Mới hơn') ?>
    <?php next_posts_link('Cũ hơn &raquo;') ?>
</nav>
 
<?php
  $wp_query = null;
  $wp_query = $temp;  // Reset
?>

Thêm một chút CSS vào cho đẹp:

.san-pham {
        width: 31%;
        float: left;
        margin-right: 3%;
}
.san-pham.thrid {
        clear: right;
        margin-right: 0;
        float: right;
}

Ở đoạn loop trên cũng không có gì quá phức tạp nếu bạn chịu khó nhìn kỹ. Mình chỉ là tạo một Query mới với WP_Query để lấy sản phẩm từ post type san-pham ra ngoài. Trong đoạn query đó, mình có thiết lập thêm biến $paged để nó tiến hành tạo thêm cái phân trang để chúng ta có thể dùng  previous_posts_link()  và  next_posts_link()  để chèn 2 cái link dẫn tới trang tiếp theo và trang trước đó.

Nếu bạn muốn dùng phân trạng dạng số thì cũng dễ dàng thôi, đó là cài thêm plugin WP-PagiNavi vào và thay đoạn sau

<nav>
    <?php previous_posts_link('&laquo; Mới hơn') ?>
    <?php next_posts_link('Cũ hơn &raquo;') ?>
</nav>

Thành:

 <?php wp_pagenavi(); ?>

Wow, hãy xem thành quả nãy giờ nào:

ten_shop_post_type_18

Xong rồi đấy, bây giờ bạn có thể sử dụng hoặc tự tuỳ biến thêm cho phù hợp với nhu cầu cá nhân nhé. Nếu bạn muốn đưa page này ra trang chủ, hãy vào Settings -> Reading và Set front page là trang mà bạn vừa tạo.

Bài viết có hơi dài thật đấy nhưng khá chi tiết rồi, cám ơn tác giả Thạch Phạm đã có bài hướng dẫn tạo website bán hàng bằng WordPress rất có tâm, mình chỉ đơn giản lại cho các bạn dễ thao tác hơn thôi.

Link nguồn: https://thachpham.com/wordpress/wordpress-development/lam-trang-ban-hang-custom-post-type.html

Xin cám ơn đã đọc bài!

Xem thêm:

Bài viết cùng chủ đề:

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *