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

Hiep Tan

1 năm trước

Nếu bạn mới bắt đầu làm website thì bạn nên sử dụng theme StoreFront cho Woocommerce vì nó miễn phí, đơn giản và hỗ trợ rất tốt cho Woocommerce.

Mục lục

1. Lý do người mới nên dùng theme StoreFront

Nhẹ, dễ sử dụng, 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 từng trang.
Hỗ trợ HTML5 và Schema chuẩn SEO
Tùy chỉnh Customize đầy đủ
Hỗ trợ Responsive
Code thân thiện với lập trình viên
Hỗ trợ khá nhiều child theme (trả phí)
Hỗ trợ phần mở rộng Storefront Designer giúp tùy biến chuyên nghiệp hơn.

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

– Dữ liệu mẫu trong Woocommerce là gói dữ liệu được tạo sẵn với một vài sản phẩm để bạn có thể trải nghiệm các chức năng hay theme. Và với các dữ liệu mẫu này thì bạn sẽ thấy theme hiển thị đầy đủ thế nào.

– Trước tiên bạn tải plugin Woocommerce tại đây sau đó giải nén ra. Giải nén xong bạn vào thư mục /woocommerce/dummy-data/ sẽ thấy các tập tin dữ liệu mẫu. Sau đó bạn vào trang quản trị của 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.

Đưa các sản phẩm của bạn về user đăng nhập của bạn rồi tick vào ô Download and import file attachments sau đó ấn Sumit.

– Nếu bạn bị timeout do mạng chậm thì vào localhost mở tập tin php.ini tìm dòng

max_execution_time (thường thì nó sẽ mặc định là 30)

Sau đó bạn thay đổi giá trị của nó thành 100 hoặc 200 là ok.

max_execution_time = 100

Khi nhập dữ liệu thành công bạn sẽ được thông báo như sau:

– Vào màn hình quản lý Sản phẩm bạn sẽ nhìn thấy nhiều sản phẩm được thêm vào:

3. Cài đặt theme Storefront

Để cài đặt theme, bạn vào Giao diện -> Giao diện -> Theme và nhập ‘StoreFront’ trong ô tìm kiếm

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

a. Cài đặt trang chủ

Theme này không tự hiển thị trang chủ. Do vậy, bạn phải tạo ra một trang mới và chọn giao diện (template) Homepage

Bạn vào Trang -> Thêm trang mới để tạo trang, đặt tên trang là Trang chủ, nội dung bỏ trống, phần Giao diện thì để là Homepage.

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

Tiếp theo vào Cài đặt -> Đọc để thiết lập Trang chính và Trang bài viết theo từng trang mà bạn mới tạo.

Nhấn Lưu thay đổi và vào website để xem kết quả.

Một số phần chính trên giao diện:

Shop By Category: HIển thị danh mục sản phẩm. 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.
New In: Danh sách các sản phẩm mới nhất.
We recommended: Danh sách các sản phẩm nổi bật mới nhất. Muốn sản phẩm nổi bật bạn vào quản lý sản phẩm và đánh dấu sao tương ứng.
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 được giảm giá.
Best Sellers: Các sản phẩm mới nhất bán chạy

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

c. Tùy chỉnh theme Storefront cho Woocommerce

Bạn có thể tùy chỉnh theme này tại Giao diện -> Tùy chỉnh và tại đây bạn có thể thêm logo, thay đổi màu sắc, bố cục,…

– Dịch thêm Storefront sang tiếng Việt

Theme này chưa có ngôn ngữ tiếng Việt. Nếu bạn cần dịch nó bạn có thể cài thêm plugin Loco Translate.

– Tùy biến Storefront nâng cao

Khi tùy biến, bạn tránh sửa trực tiếp vì code sửa sẽ bị mất sạch khi bạn cập nhật theme. Để không bị mất, bạn có thể tạo một child theme dành cho Storefront.

Tải Storefront Child Theme

Một cách khác bạn có thể sử dụng plugin Theme Customisations. Bạn vào Giao diện -> Storefront, click Download Theme Customisations.

Để cài đặt plugin, bạn vào Gói mở rộng -> Cài mới. Tiếp đó chọn Tải plugin lên. Bạn chọn file zip vừa tải về. Cuối cùng activate plugin để sử dụng, plugin này tạo cho bạn sẵn một vài file. Bạn cần tùy biến gì chỉ cần mở file tương ứng và thêm code.

Tất cả các code bên dưới sau đây, bạn sẽ chèn vào tập tin functions.php của child theme cũng như plugin Theme Customisations.

– Bỏ một số thành phần hiển thị trên trang chủ

Trong tập tin template-homepage.php, bạn thấy một đoạn khai báo 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’ ); ?>

Từ đoạn code này chúng ta biết được action hook hompage có hàm nào được móc vào. Như vậy, nếu bạn không muốn một thành phần hiện ra trang chủ, đơn giản hãy xóa hàm đó ra khỏi hook homepage.

Ví dụ bạn muốn xóa Fan Favorite và We Recommend thì sử dụng đ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 );

Chú ý: Bạn có thể sử dụng plugin homepage-control để kiểm soát việc hiển thị và thứ tự các component ở trang chủ.

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

Mặc định phần Shop by Category hiển thị là 3 cái. Nhưng chúng ta có thể sửa lại bằng cách sửa lại tham số vào filter hook được khai báo tại inc/storefront-template-functions.php.

Phần Shop by Category được khai báo filter như sau:

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

Đây là code tùy biến của chúng ta

/**
* 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', 'PA' )
);
return $args;
}
add_filter( 'storefront_product_categories_args', 'tp_product_categories_args' );

Tên các hook tùy biến ngoài trang chủ cho bạn tham khảo

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

Trên là bài viết về Cách sử dụng themes StoreFront để các bạn có thể hiểu rõ một cách dễ dàng.

PA Việt Nam cung cấp dịch vụ thiết kế Website chuyên nghiệp Web30s

CHỈ 30S CÓ NGAY WEBSITE HIỆN ĐẠI VÀ CHUYÊN NGHIỆP

CHỦ ĐỀ WEBSITE CHUYÊN BIỆT THEO NGÀNH NGHỀ

Tham khảo thêm về Web30s tại https://kb.pavietnam.vn/category/web30s.

5/5 - (1 bình chọn)