4. Series Học WooCommerce: Những điều cần biết về theme Storefront

– Chuyên mục: Series Học WooCommerce

Ở bài hướng dẫn này tôi sẽ giới thiệu những điều cơ bản nhất về theme Storefront. Các bạn có thể tham khảo thêm tại trang tiếng anh của WooCommerce Tại đây

1. Thêm dữ liệu mẫu (WooCommerce Demo Content hoặc Theme Demo Content)

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 của Plugin hoặc theme. Mục đích của việc 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. Đa số các theme trả phí của WooCommerce đều có sẵn dữ liệu mẫu, nếu theme không hỗ trợ dữ liệu mẫu thì lúc đó chúng ta mới dùng dữ liệu mẫu có trong plugin WooCommerce. Các bạn có thể xem thêm các theme hỗ trợ dữ liệu mẫu Tại đây

Theme Storefront này không hỗ trợ dữ liệu mẫu vì vậy tôi sẽ tải về plugin WooCommerce và lấy dữ liệu mẫu.

Đầ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. Bạn làm như hình dưới

nhung-dieu-can-biet-ve-theme-storefront-2 nhung-dieu-can-biet-ve-theme-storefront-3

Sau khi bạn nhập dữ liệu thành công, bạn vào mục Sản phẩm bạn sẽ thấy có rất nhiều sản phẩm ở đây như hình dưới

nhung-dieu-can-biet-ve-theme-storefront-4

2. Templates

Theme Storefront có hai templates tạo thêm là Homepage, Full Width và một templates mặc định tên là Giao diện mặc định. Bây giờ chúng ta cùng tìm hiểu tác dụng của các templates trên.

2.1 Homepage

Đây là trang khi bạn thêm một sản phẩm vào nó sẽ được hiển thị ở đây. Bạn có thể xem Storefront demo của trang này Tại đây
Để tạo được trang như vậy. Đầu tiên bạn phải vào mục Trang >> Thêm trang mới >> làm như hình dưới

nhung-dieu-can-biet-ve-theme-storefront

Quan trọng nhất là ngay mục Thuộc tính của trang bạn phải chọn là Homepage. Còn tên trang tôi đặt là Shop còn các bạn có thể đặt là trang chủ … đó là tùy các bạn. Trong phần nội dung bạn muốn ghi gì cũng được nó sẽ hiển thị phía trên của các sản phẩm hoặc bạn có thể không ghi gì cả và Đăng bài viết

2.2 Giao diện mặc định

Đây là trang khi bạn vào Bài viết >> Viết bài mới >> thì nó sẽ hiển thị ở đây.
Để tạo được trang như vậy. Đầu tiên bạn phải vào mục Trang >> Thêm trang mới >> làm như hình dưới

nhung-dieu-can-biet-ve-theme-storefront-5

Quan trọng nhất là ngay mục Thuộc tính của trang bạn phải chọn là Giao diện mặc định. Còn tên trang tôi đặt là Blog còn các bạn có thể đặt là Hướng dẫn cách dùng, Tin tức, Khuyến mãi … đó là tùy các bạn. Trong phần nội dung bạn không ghi gì cả (dù bạn có ghi thì sau này bạn mặc định nó là Trang bài viết thì nó cũng không hiển thị gì cả mà chỉ hiển thị các bài viết) và Đăng bài viết.

2.3 Thiết lập trang chính và trang bài viết

Bạn truy cập vào Cài đặt >> Đọc >> thiết lập trang chính và trang bài viết mà bạn vừa tạo ở 02 bước trên, Các bạn thiết lập theo hình vẽ dưới

nhung-dieu-can-biet-ve-theme-storefront-6

và sau đó các bạn Lưu thay đổi

Bây giờ bạn ra ngoài Trang chủ bạn sẽ thấy như hình dưới

nhung-dieu-can-biet-ve-theme-storefront-7

2.4 Full Width

Template này thường được dùng cho trang Giỏ hàng hoặc trang Thanh toán. Nó sẽ hiển thị đầy đủ chiều rộng và không có Sidebar trên template này.

Bạn vào Trang >> Tất cả các trang >> Tìm trang Giỏ hàng (hoặc trang Thanh toán) >> Chỉnh sửa >> Tìm đến phần giao diện chọn Full Width.

3. Menus

Theme Storefront này hỗ trợ 03 menus như hình sau

nhung-dieu-can-biet-ve-theme-storefront-8

Primary Menu và Secondary Menu chỉ hiển thị khi người dùng sử dụng Laptops, máy tính bàn, … nói chung là sử dụng màn hình lớn. Nó sẽ được hiển thị như hình dưới

nhung-dieu-can-biet-ve-theme-storefront-9

Handeld Menu chỉ hiển thị khi người dùng sử dụng điện thoại di động, máy tính bảng, … nói chung là sử dụng màn hình nhỏ. Nó sẽ được hiển thị như hình dưới

nhung-dieu-can-biet-ve-theme-storefront-10

4. Widgets

Theme này hỗ trợ 06 vị trí chèn widgets như hình dưới

nhung-dieu-can-biet-ve-theme-storefront-11

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

Bạn vào Giao diện >> Tùy chỉnh và ở đây bạn có thể thiết lập logo, thay đổi màu sắc, bố cục … và ở đây các bạn có thể xem một theme nào đó có tương thích với điện thoại di động không.

Các bạn có thể xem thêm tính năng này trên trang WooCommerce Tại đây

6. Dịch theme Storefront sang Tiếng Việt

Xem thêm: Hướng dẫn sử dụng plugin Loco Translate

Đây là plugin dùng để dịch các theme, plugin WordPress từ Tiếng Anh, Tiếng Nhật, Tiếng Pháp … sang Tiếng Việt. Loco Translate là một plugin mới nhưng được đánh giá rất cao trong vấn đề hỗ trợ dịch thuật trên website WordPress. Với giao diện mang tính tương đồng với PoEdit, hỗ trợ dịch các form số nhiều y hệt như PoEdit và tự động đồng bộ các đoạn text trong theme hoặc plugin là một ưu thế rất mạnh của Loco Translate. Với hơn 200.000 lượt cài đặt thì bạn thấy đây là một plugin được sử dụng rộng rãi như thế nào? Vì vậy nên tôi mới chọn plugin này để viết bài hướng dẫn.

7. Tùy biến Storefront

7.1 Cài đặt và kích hoạt Plugin Theme Customisations

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. Để tránh việc đó, bạn nên làm như sau:

nhung-dieu-can-biet-ve-theme-storefront-12

Sau khi bạn tải về plugin tên là “Theme Customisations .zip” Bạn cài đặt và kích hoạt như các plugin khác. Vậy là từ bây giờ khi bạn muốn tùy biến Theme Storefront này bạn chỉ cần vào Gói mở rộng >> Biên tập >>  Chọn plugin để chỉnh sửa Theme Customisations >> Chọn mục cần sửa hoặc thêm code vào như mục functions.php hay custom.js hoặc style.css

7.2 Loại trừ một số thành phần tại trang Shop

Bạn vào Giao diện >> Sửa >> Chọn giao diện để chỉnh sửa Storefront >> template-homepage.php >> mở tập tin lên 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’ ); ?>

Trong đó:
– storefront_product_categories: Shop by Category
– storefront_featured_products: We Recommended
– storefront_popular_products: Fan Favorite
– storefront_recent_products: New In
– storefront_on_sale_products: On Sales
– storefront_best_selling_products: Best Sellers

trong các mục trên thì mục storefront_featured_products: We Recommended không thể loại trừ vì nó là mặc định hiển thị của child theme Boutique. Còn các mục còn lại các bạn có thể loại trừ nó đi bằng cách làm như sau:
Bạn vào Gói mở rộng >> Biên tập >> Chọn plugin để chỉnh sửa Theme Customisations >> Chọn mục functions.php >> mở tập tin lên và thêm code sau vào cuối đoạn

function nguyenbinh_homepage_loaitru() {
remove_action( ‘homepage’, ‘storefront_product_categories’, 20 );
remove_action( ‘homepage’, ‘storefront_recent_products’, 30 );
remove_action( ‘homepage’, ‘storefront_popular_products’, 50 );
remove_action( ‘homepage’, ‘storefront_on_sale_products’, 60 );
remove_action( ‘homepage’, ‘storefront_best_selling_products’, 70 );
}
add_action( ‘after_setup_theme’, ‘nguyenbinh_homepage_loaitru’, 10 );

Như đoạn code trên là tôi đã loại trừ tất cả các thành phần tại trang Shop. Bây giờ tôi muốn giữ lại New In và Best Sellers thì tôi chỉ cần mở tập tin functions.php và thêm code sau vào cuối đoạn

function nguyenbinh_homepage_loaitru() {
remove_action( ‘homepage’, ‘storefront_product_categories’, 20 );
remove_action( ‘homepage’, ‘storefront_popular_products’, 50 );
remove_action( ‘homepage’, ‘storefront_on_sale_products’, 60 );
}
add_action( ‘after_setup_theme’, ‘nguyenbinh_homepage_loaitru’, 10 );

Với 02 ví dụ trên chắc các bạn đã hiểu cách loại trừ thành phần bạn không muốn khỏi trang Shop

7.3 Chỉnh số lượng, số cột và chủ đề hiển thị ở các mục ngoài trang Shop

Tất cả các mục hiển thị ra ngoài trang Shop chúng ta có thể sửa lại số lượng, số cột và chủ đề hiển thị ra.

Bạn vào Giao diện >> Sửa >> Chọn giao diện để chỉnh sửa Storefront >>  inc/storefront-template-functions.php >> mở tập tin lên và tìm các đoạn code sau

/**
* Mặc định của We Recommend
*
*/
$args = apply_filters( ‘storefront_featured_products_args’, array(
‘limit’ => 4,
‘columns’ => 4,
‘orderby’ => ‘date’,
‘order’ => ‘desc’,
‘title’ => __( ‘We Recommend’, ‘storefront’ ),
) );
/**
* Mặc định của Fan Favorites
*
*/
$args = apply_filters( ‘storefront_popular_products_args’, array(
‘limit’ => 4,
‘columns’ => 4,
‘title’ => __( ‘Fan Favorites’, ‘storefront’ ),
) );
/**
* Mặc định của Shop by Category
*
*/
$args = apply_filters( ‘storefront_product_categories_args’, array(
‘limit’ => 3,
‘columns’ => 3,
‘child_categories’ => 0,
‘orderby’ => ‘name’,
‘title’ => __( ‘Shop by Category’, ‘storefront’ ),
) );
/**
* Các bạn tìm như vậy tương tự cho các phần còn lại
*
*/

Ví dụ: Ở phần We Recommend mặc định hiển thị số lượng giới hạn = 4, số cột = 4 và chủ đề là ‘We Recommend’, ‘storefront’ như code bên dưới

$args = apply_filters( ‘storefront_featured_products_args’, array(
‘limit’ => 4,
‘columns’ => 4,
‘orderby’ => ‘date’,
‘order’ => ‘desc’,
‘title’ => __( ‘We Recommend’, ‘storefront’ ),
) );

Bây giờ bạn vào Gói mở rộng >> Biên tập >> Chọn plugin để chỉnh sửa Theme Customisations >> Chọn mục functions.php >> mở tập tin lên và thêm code sau vào cuối đoạn

function nguyenbinh_sanphamnoibat( $args ) {
$args = array(
‘limit’ => 6,
‘columns’ => 3,
‘title’ => __( ‘Sản phẩm nổi bật’, ‘nguyenbinh’ )
);
return $args;

}
add_filter( ‘storefront_featured_products_args’, ‘nguyenbinh_sanphamnoibat’ );

Như code trên tôi đã sửa thành số lượng giới hạn = 6, số cột = 3 và chủ đề là ‘Sản phẩm nổi bật’, ‘nguyenbinh’

Với các phần còn lại các bạn cũng làm tương tự như vậy nếu các bạn muốn thay đổi. Tất cả các phần đó nó sẽ có các hook sau:

– 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

Vậy là đã kết thúc một bài dài về những điều cần biết về theme Storefront

0 comments… add one

Leave a Comment

Do NOT follow this link or you will be banned from the site!