6 bước tự làm trang bán hàng trong WordPress

Trang sản phẩm

Có một câu hỏi mình gặp đi gặp lại nhièu khi viết serie Thủ thuật Woocommerce đó là nhiều người Việt Nam không cần một plugin quá nhiều tính năng như vậy mà họ chỉ cần trưng bày sản phẩm lên và có một nút đặt hàng đơn giản nhất có thể, không cần billing, không cần thanh toán trực tuyến,…v..v…Và mình xin nói thẳng, WordPress hiện tại không có plugin nào như vậy mặc dù là đơn giản.

Trang sản phẩmVậy thì trong bài này, mình sẽ hướng dẫn tỉ mỉ cho các bạn cách làm một tính năng như vậy cùng với tính năng đặt hàng đơn giản để bạn có thể thực hành. Cụ thể, chúng ta sẽ làm những việc sau đây:

  1. Tạo custom post type tên Shop.
  2. Tạo các custom post field cho post type này (giá, mã sản phẩm,…v..v…).
  3. Tạo custom taxonomy cho post type này (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 grid.
  5. Tạo trang hiển thị chi tiết sản phẩm.

Nhìn thì có vẻ khá nhiều nhưng đó là tất cả những gì chúng ta sẽ cần làm để có một tính năng như vậy. Dĩ nhiên, mình cần bạn có một chút kiến thức về PHP, CSS cơ bản vì mình sẽ không giải thích nhiều về những cái thuộc phạm vi cơ bản.

Sử dụng plugin WP-Types

Trong bài này mình sẽ tạo custom post type, custom field, custom taxonomy bằng một plugin tên là Types vì mình cũng đã quen làm việc với plugin này. Hơn nữa, nó cũng hỗ trợ khá nhiều tính năng đặc trưng mà có thể các plugin khác cùng chức năng không có được, trong đó có một tính năng mình rất thích đó là Relationship Post Type, một giải pháp làm các site truyện hay phim nhưng bài này mình tạm không nói qua.

Types documentation.

1. Tạo Custom Post Type

Trước tiên ta sẽ tạo một phần để đăng sản phẩm tương tự như Posts để đăng bài viết, ta gọi đó là Custom Post Type. Ở đây mình sẽ dùng plugin Types để tạo nên trước tiên bạn sẽ cần cài plugin này vào (miễn phí).

Để tạo post type, bạn vào Types -> Custom Types and Taxonomies -> Add Custom Post Type

Tạo post type

Sau đó các bạn điền 4 dòng đầu tiên như sau:

Tạo post type đăng sản phẩm

Trong đó:

  • 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.

Tuỳ chọn Display Section

Những phần còn lại bạn có thể để nguyên, sau đó ấn nút Save Custom Post Type phía dưới.

Bây giờ bạn nhìn bên tay trái sẽ thấy mục tên là Sản phẩm hiện ra, đúng không nào? Đó là custom post type vừa tạo.

tao-shop-post-type-4

2. Tạo custom taxonomies

Taxonomies là một khái niệm dùng để phân loại nội dung ví dụ như Category và Tag của Post. Ở đây mình sẽ cần tạo 2 custom taxonomy là Nhãn hiệu và Loại sản phẩm.

Vào lại phần Types -> Custom Types & Taxonomies -> Add Custom Taxonomy.

Tạo custom taxonomy

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. Sở dĩ phải đặt tiếng Anh là vì không biết nên đặt kiểu gì ở số nhiều (plural)  :oh: . Bạn điền và chọn như sau:

Tạo custom taxonomy danh mục sản phẩm

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).

Tạo taxonomy mục sản phẩm

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

Tạo custom taxonomy cho sản phẩm

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ự làm thêm hen.

Để 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.

Tạo custom fields cho sản phẩm

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

Tạo custom fields cho sản phẩm

Bây giờ bạn để ý 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.

Tạo custom field cho sản phẩm

Bạn lưu ý phần slug, cái này bạn nên viết theo mình bởi vì ta cần viết làm sao cho dễ nhớ và dễ quản lý để tí nữa ta còn viết code gọi ra nữa. Tốt nhất là nên bắt đầu là product-tên_field

Tiếp tục, chọn WYSIWYG và nhập như hình

Tạo custom field cho sản phẩm

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

Thêm custom field cho sản phẩm

Mình xin giải thích một chút về field Checkbox này. Cơ chế làm việc của nó là tự tạo ra giá trị định sẵn khi chọn vào. Ví dụ như thiết lập trên, nếu bạn chọn là Còn hàng thì khi save bài lại nó sẽ tự lưu vào database với giá trị là conhang. Sau này khi hiển thị ra, nó sẽ hiển thị cái title của field (Còn hàng/Hết hàng). Còn giá trị thì để dành sau này chúng ta muốn code thêm gì có sử dụng tới việc kiểm tra giá trị.

Thế là xong bước tạo custom post type, custom taxonomies và custom fields. Nếu bạn vẫn đang loay hoay không chắc chắn đã tạo đúng hay sai thì có thể tải file import của mình. Sau đó vào Types -> Import/Export và import file này lên.

4. Thêm sản phẩm mẫu

Trước khi bắt đầu code ta phải thêm vào WordPress một vài sản phẩm mẫu cái đã để tí nữa khỏi mất công tạo. Bây giờ bạn vào Products -> Add New thêm sản phẩm như đăng bài, nhớ là phải thêm Featured Image và điền các field mà mình vừa tạo xong đó nhé.

Tips khi thêm sản phẩm

Bạn nên thêm khoảng 3 hoặc 6 sản phẩm khác nhau, mỗi sản phẩm là một product category và một nhãn hiệu khác nhau, tình trạng sản phẩm cũng thế. Nếu bạn lười thì có thể tải file XML bài viết của mình và vào Tools -> Import để import vào.

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

Ở trang này nó sẽ hiển thông tin đầy đủ về sản phẩm như giới thiệu, hình ảnh, giá cả,….Do quan trọng nên có thể phần này sẽ hơi dài. Dĩ nhiên, mình cần bạn hiểu qua về WordPress Loop trước khi xem phần này.

Nào, bây giờ bạn tạo cho mình một file tên là single-san-pham.php. Như mình đã nói trong bài Hướng dẫn Custom Post Type, nếu file single.php có dạng là single-{slug}.php thì nó sẽ được áp dụng cho post type tương ứng với slug đó. Do đó, file single-san-pham.php sẽ được áp dụng cho nội dung chi tiết của post type san-pham mà ta đã tạo 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()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 đó.

Tự tạo shop với WordPress bằng Custom Post Type


				<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>

Trong đoạn code trên không có gì là khó hiểu cả, các template tags có chữ the đằng trước là dùng để lấy giá trị tương ứng của bài viết. Ví dụ the_title() là tiêu đề bài viết, the_content() là nội dung bài viết.

Đồng thời mình cũng có dùng ham get_post_meta() để gọi giá trị của custom post field, bạn có thể xem các bài hướng dẫn về custom post field của mình nếu chưa hiểu hàm đơn giản này. Trong hàm này mình gọi giá trị của field với tên slug field tương ứng mà mình đã tạo. Sở dĩ phải thêm wpcf- vào đằng trước là vì plugin Types này nó tự thêm. Thực ra có thể gọi bằng hàm riêng của plugin này để đẹp hơn nhưng mình sẽ không nói qua cho đỡ rắc rối.

Ok, bây giờ bạn cần thêm một chút CSS vào file style.css nhé


/*--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

Trang thông tin chi tiết sản phẩm

Nhìn hơi xấu nhỉ, nhưng mà đơn giản mà, các bạn có thể tự viết lại CSS.

Ở cái nút đặt hàng, bạn tham khảo bài hướng dẫn tạo form với Contact Form 7 rồi trỏ link nút đặt hàng trong code về một trang chứa form nhé hoặc tham khảo thêm tạo hiệu ứng popup cho form để làm hiệu ứng popup khi click vào form.

Đó là xong phần tạo trang sản phẩm, bây giờ tới phần tạo trang hiển thị danh sách sản phẩm.

6. Tạo trang hiển thị danh sách sản phẩm

Ở trang này chúng ta sẽ cùng nhau làm một trang hiển thị danh sách các sản phẩm theo cột, mỗi hàng sẽ có 3 cột và mỗi trang sẽ chứa 4 hàng tất cả.

Ở đây mình sẽ sử dụng khái niệm tên Custom Page Template để làm vì dễ sử dụng hơn.

Đầu tiên bạn tạo một file mang tên shop.php trong thư mục theme với nội dung như sau:



<?php
/*
Template Name: Shop
*/

/*-----CHÚNG TA SẼ VIẾT CODE PHÍA DƯỚI NÀY-----*/


Trong đoạn code trên, chúng ta sẽ tạo một custom page template có tên là Shop. Sau khi save lại, bạn vào Pages -> Add New để tạo một trang mới và chọn Page Template là Shop, nội dung bỏ trống.

Tạo trang hiển thị sản phẩm

Lưu lại như bình thường, đừng xem trang chi cho mất công vì bây giờ chưa có gì đâu. Việc mà chúng ta sẽ làm bây giờ là viết code cho cái template.

Bạn mở file page.php của theme và copy toàn bộ code bỏ vào dưới dòng /*-----CHÚNG TA SẼ VIẾT CODE PHÍA DƯỚI NÀY-----*/.

Sau đó tìm đoạn loop trong code và xoá đi, chỉ để lại mỗi các đoạn HTML và get_header, get_sidebar và get_footer. (Xem ảnh). Nhớ để lại một khoảng trống ngay đoạn vừa xoá nhé vì chút ta sẽ viết code vào đoạn đó.

Xoá loop trong file shop.php

Tiếp đó hãy viết đoạn loop này vào đoạn giữa mà ta vừa xoá để lấy các bài viết trong post type san-pham mà ta đã tạo ra, mình sẽ giải thích phía dưới.


			<?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
			?>

Và một vài đoạn CSS đơn giản


.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()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(); ?> 

Kết quả chúng ta sẽ có như thế này.

Trang sản phẩm

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 hơi dài nên viết mệt quá, mình kết thúc bài tại đây. Nếu có vấn đề gì chưa hiểu bạn cứ bình luận phía dưới để mình giải thích rõ hơn.

Nguồn: 6 bước tự làm trang bán hàng trong WordPress | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Công thức kéo traffic và tăng tỉ lệ chuyển đổi 2019
Calculated Fields Form – Tạo bảng tính chuyên nghiệp nhất
Tác giả

Bình luận

Jamesboymn

ed vacuum pump https://canadaedwp.com pain meds without written prescription

Leave a Message

Registration isn't required.

NguyenLp LarTheme