Trang chủ WordpressWordpress Plugin [Woocommerce] Cách sử dụng theme Storefront

[Woocommerce] Cách sử dụng theme Storefront

bởi Thạch Phạm
88 bình luận 17,1K views

Tham gia nhóm hỗ trợ WordPress

Tham gia nhóm Hỗ trợ Server - Hosting & WordPress để cùng nhau hỏi đáp và hỗ trợ các vấn đề về WordPress, tối ưu máy chủ/server.

Tham gia ngay
Bài này thuộc phần 5 của 32 phần trong serie wHọc Woocommerce

Khi sử dụng Woocommerce thì chắc chắn không phải theme nào cũng có thể hỗ trợ hiển thị gian hàng của mình tốt nhất. Lý do trong plugin WooCommerce nó sẽ có thêm một vài thành phần bắt buộc hiển thị như cửa hàng, gian hàng, giỏ hàng,…mà nếu theme đang dùng không tối ưu hiển thị các thành phần này nó sẽ có thể không được đẹp cho lắm vì sử dụng cách hiển thị mặc định của WooCommerce. Ngoài ra theme dành riêng cho WooCommerce thường sẽ có thêm phần giỏ hàng trên menu khá đẹp và tiện lợi.

Khi chấp nhận sử dụng Woocommerce, nếu bạn muốn gian hàng của mình đẹp thì chắc chắn sẽ cần phải mua một số theme trả phí dành riêng cho Woocommerce tại WooThemes hoặc ThemeForest (phong phú hơn) nhưng bạn chỉ nên sử dụng theme trả phí cho Woocommerce khi bạn đã thật sự biết cách sử dụng nó.

Vì vậy nếu bạn là người mới bắt đầu, mình khuyên các bạn nên sử dụng theme StoreFront nếu như cần một giao diện bán hàng đơn giản hoàn toàn miễn phí nhưng hỗ trợ cho Woocommerce tối đa.

Tham khảo: Storefront trên Github

Khuyến mãi Black Friday

Tại sao người mới nên sử dụng theme StoreFront?

Có nhiều lý do để mình đưa theme này vào hướng dẫn vì hiện tại có rất nhiều theme nên không phải cái nào mình sẽ hướng dẫn. Nó rất tốt cho người mới tìm hiểu WooCommerce là vì:

  • Hoàn toàn miễn phí và mã nguồn mở.
  • Tương thích tốt với các plugin hỗ trợ thiết kế như Origin Page Builder hoặc Visual Composer để tự thiết kế bố cục cho mỗi trang.
  • Hỗ trợ cấu trúc HTML5 và Schema chuẩn SEO.
  • Khu vực tùy chỉnh Customize đầy đủ.
  • Dễ sử dụng.
  • Hỗ trợ Responsive.
  • Có hỗ trợ phần mở rộng Storefront Designer để hỗ trợ tùy biến chuyên nghiệp hơn.
  • Code thân thiện với lập trình viên. Có thể tùy biến lại dễ dàng nếu bạn nắm vững action hook và filter hook.
  • Hỗ trợ nhiều child theme (trả phí).

Chỉ vậy thôi, tuy không quá nhiều chức năng nhưng ít nhất là nó không quá thừa thải nên theme này sẽ vô cùng nhẹ.

Thêm dữ liệu mẫu (Dummy Content) cho Woocommerce

Dữ liệu mẫu của Woocommerce là một gói dữ liệu đã tạo sẵn một số sản phẩm để chúng ta có thể dễ dàng thử nghiệm các chức năng hoặc theme. Mục đích mình kêu các bạn thêm dữ liệu mẫu này vào là để chúng ta có thể thấy theme hiển thị đầy đủ thế nào.

Đầu tiên bạn tải plugin Woocommerce về máy tính và giải nén ra. Khi giải nén ra, bạn vào thư mục /woocommerce/dummy-data/ sẽ thấy các tập tin dữ liệu mẫu. Nhưng ở đây chúng ta chỉ sử dụng tập tin dummy-data.xml.

Cuối cùng là bạn truy cập vào website -> Công cụ -> Nhập vào -> WordPress (cài plugin WordPress Importer nếu bạn chưa cài) và upload tập tin dummy-data.xml lên.

storefront-04

Đưa các sản phẩm về user của bạn và đánh dấu vào Download and import file attachments rồi Submit.

storefront-05

Nếu mạng của bạn hơi chậm và bị timeout, hãy tạo tập tin php.ini hoặc .user.ini trong host/localhost và thêm:


[code]max_execution_time = 200[/code]

Thông báo sau khi nhập dữ liệu mẫu thành công.

Import dữ liệu thành công

Kiểm tra bạn sẽ thấy nó có khá nhiều sản phẩm mẫu được cấu hình rất đầy đủ.

storefront-06

Cài đặt và kích hoạt Storefront

Để cài theme này, bạn truy cập vào phần Giao diện -> Giao diện -> Thêm mới và gõ tìm theme “Storefront“.

storefront-01

Sau khi cài đặt xong, hãy kích hoạt nó lên.

Cài đặt trang chủ

Theme này không tự hiển thị trang chủ mà bạn phải tạo một trang mới và thiết lập giao diện Homepage cho nó. Bạn vào phần [textmarker color=”247BFF”]Trang -> Thêm trang mới [/textmarker]để tạo một trang, bạn có thể đặt tên trang là Trang chủ, nội dung bỏ trống và thiết lập Giao diện là Homepage.

storefront-02

Đồng thời bạn nên tạo một trang mới tên là Blog hoặc Tin tức, nội dung để trống và không thiết lập gì khác nữa.

wc26-cai-storefront-01

Sau đó bạn truy cập vào [textmarker color=”247BFF”]Cài đặt -> Đọc[/textmarker] và thiết lập trang chính và trang bài viết theo từng trang mà bạn vừa tạo.

storefront-03

Lưu lại và ra trang chủ xem kết quả.

wc26-cai-storefront-02

Trước tiên mình cũng xin giải thích qua về ý nghĩa của các thành phần có trên trang chủ của theme Storefront như:

  • Shop by Category: Hiển thị các danh mục sản phẩm có trong website. Mặc định nó sẽ hiển thị 3 danh mục theo thứ tự chữ cái trên tên danh mục. Bạn có thể sửa danh mục để thêm hình đại diện vào.
  • New In: Danh sách các sản phẩm mới nhất.
  • We Recommend: Danh sách các sản phẩm nổi bật mới nhất, để thiết lập một sản phẩm thành nổi bật bạn vào trang quản lý sản phẩm và đánh vào dấu sao tương ứng của nó.
  • Fan Favorites: Các sản phẩm mới nhất được đánh giá cao nhất.
  • On Sales: Các sản phẩm mới nhất đang giảm giá.
  • Best Sellers: Các sản phẩm mới nhất bán chạy.

Thiết lập khu vực chèn widget

Theme Storefront hỗ trợ cho chúng ta 6 vị trí chèn widget bao gồm:

  • Below Header
  • Sidebar
  • 4 cái Footer (Footer 1, Footer 2, Footer 3 và Footer 4)

Bạn có thể xem trong Giao diện -> Widget.

Xem thêm: Hướng dẫn sử dụng widget trong WordPress.

Tính năng tùy chỉnh trong theme

Theme này cung cấp một số tùy chỉnh tại [textmarker color=”247BFF”]Giao diện -> Tùy chỉnh[/textmarker] và ở đó bạn có thể thiết lập logo, thay đổi màu sắc, bố cục,….

storefront-08

Dịch theme Storefront sang tiếng Việt

Theme này hiện tại chưa có ngôn ngữ tiếng Việt, do vậy bạn có thể sẽ thấy một số từ tiếng Anh như Product Categories, Recent Products,….nếu bạn cần dịch nó, bạn có thể cài thêm plugin Loco Translate và xem chi tiết cách sử dụng plugin này để dịch tại đây.

Tùy biến Storefront nâng cao

Như mình đã nói ở trên, Storefront là một theme có khả năng tùy biến cao nhờ vào action hook và filter hook. Nếu bạn nào đã rành về code thì có thể xem tập tin inc/storefront-template-functions.php để xem qua một số hàm riêng được khai báo trong theme này để bạn có thể tùy biến lại bằng filter hook.

Nên xem: Cách sử dụng filter hook trong WordPress

Cài child theme trước khi tùy biến

Khi tùy biến theme, nên tránh sửa hoặc thêm code vào trực tiếp theme vì nó sẽ mất sạch khi bạn update phiên bản theme mới sau này. Để không bị mất khi update, bạn hãy tạo một child theme đành cho Storefront. Mình đã tạo sẵn một child theme đơn giản gồm 2 tập tin:

  • style.css – Tùy biến CSS của theme.
  • functions.php – Thêm các code PHP tùy biến trong theme.

Tải Storefront Child Theme

Sau đó bạn vào [textmarker color=”247BFF”]Giao diện -> Thêm mới -> Tải lên[/textmarker] và upload theme này lên rồi kích hoạt như bình thường.

Tất cả các code bên dưới bạn sẽ chèn vào tập tin functions.php của child theme này.

Bỏ một số thành phần hiển thị tại trang chủ

Trong tập tin template-homepage.php của theme này bạn sẽ thấy có một đoạn khai báo như sau:


<?php
/**
* Functions hooked in to homepage action
*
* @hooked storefront_homepage_content – 10
* @hooked storefront_product_categories – 20
* @hooked storefront_recent_products – 30
* @hooked storefront_featured_products – 40
* @hooked storefront_popular_products – 50
* @hooked storefront_on_sale_products – 60
* @hooked storefront_best_selling_products – 70
*/
do_action( ‘homepage’ ); ?>

Với đoạn trên ta sẽ biết tại action hook homepage sẽ có các hàm nào được móc vào, và để xóa bớt các thành phần không muốn hiển thị ra trang chủ thì ta chỉ đơn giản là xóa hàm đó ra khỏi hook homepage. Ví dụ mình muốn xóa phần Fan Favorite và We Recommend thì có đoạn code sau trong functions.php:


/**
* Xóa đi các thành phần không sử dụng trong homepage
* @hook after_setup_theme
*
* template-homepage.php
* @hook homepage
* @hooked storefront_homepage_content – 10
* @hooked storefront_product_categories – 20
* @hooked storefront_recent_products – 30
* @hooked storefront_featured_products – 40
* @hooked storefront_popular_products – 50
* @hooked storefront_on_sale_products – 60
* @hooked storefront_best_selling_products – 70
*/
function tp_homepage_blocks() {
/*
* Sử dụng: remove_action( ‘homepage’, ‘tên_hàm_cần_xóa’, số thứ tự mặc định );
*/
remove_action( ‘homepage’, ‘storefront_featured_products’, 40 );
remove_action( ‘homepage’, ‘storefront_popular_products’, 50 );
}
add_action( ‘after_setup_theme’, ‘tp_homepage_blocks’, 10 );

Mình comment khá rõ trong code rồi nên bạn tự đọc nhé.

Chỉnh số lượng hiển thị ở các mục ngoài trang chủ

Tất cả các mục hiển thị ra ngoài trang chủ chúng ta có thể sửa lại số lượng hiển thị ra. Ví dụ phần Shop by Category mặc định hiển thị 3 cái nhưng chúng ta có thể thay đổi lại, bằng cách sửa lại tham số vào filter hook của nó mà đã được khai báo tại inc/storefront-template-functions.php.

Ví dụ phần Shop by Category được khai báo filter như thế này:


$args = apply_filters( ‘storefront_product_categories_args’, array(
‘limit’ => 3,
‘columns’ => 3,
‘child_categories’ => 0,
‘orderby’ => ‘name’,
‘title’ => __( ‘Shop by Category’, ‘storefront’ ),
) );

Và bây giờ ta khai báo một hàm khác để filter lại cái hook storefront_product_categories_args.


/**
* Tùy biến Product by Category
* @hook storefront_product_categories_args
*
*/
function tp_product_categories_args( $args ) {

$args = array(
‘limit’ => 6,
‘title’ => __( ‘Danh mục sản phẩm’, ‘thachpham’ )
);

return $args;

}
add_filter( ‘storefront_product_categories_args’, ‘tp_product_categories_args’ );

Các bạn làm tương tự với các phần khác và mỗi phần là khai báo một hàm như vậy, hoặc nếu bạn dùng PHP 5.4 thì có thể viết ngắn gọn hơn sử dụng kỹ thuật Anonymous functions trong PHP để gom vào một hàm cho dễ quản lý.


/**
* Tùy biến các mục ngoài trang chủ
* @hook after_setup_theme
*
* @locate /inc/storefront-template-functions.php
* @function storefront_product_categories_args
* @function storefront_featured_products_args
* @function storefront_popular_products_args
* @function storefront_on_sale_products_args
* @function storefront_best_selling_products_args
*/
function tp_homepage_blocks_custom() {

/* Shop by Category */
add_filter( ‘storefront_product_categories_args’, function($args) {
$args = array(
‘limit’ => 6,
‘title’ => __( ‘Danh mục sản phẩm’, ‘thachpham’ )
);

return $args;
} );

/* New In */
add_filter( ‘storefront_recent_products_args’, function($args) {
$args = array(
‘limit’ => 12,
‘title’ => __( ‘Sản phẩm mới’, ‘thachpham’ )
);
return $args;
} );

/* And so on…. */

}
add_action( ‘after_setup_theme’, ‘tp_homepage_blocks_custom’ );

Tên các hook tùy biến ngoài trang chủ:

  • storefront_product_categories_args: Shop by Category
  • storefront_featured_products_args: We Recommended
  • storefront_popular_products_args: Fan Favorite
  • storefront_recent_products_args: New In
  • storefront_on_sale_products_args: On Sales
  • storefront_best_selling_products_args: Best Sellers

Lời kết

Có phải theme này rất dễ sử dụng đúng không? Chỉ với vài thao tác thôi là chúng ta đã có một trang shop đơn giản trên WordPress với sự kết hợp của plugin Woocommerce khá đẹp rồi. Coi như phần hiển thị chúng ta đã lo xong, chúng ta sẽ tìm hiểu thêm về các thiết lập ở video sau hén.

3.7/5 - (3 bình chọn)
88 bình luận

Có thể bạn quan tâm

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.