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

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

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

Vì vậy, nếu bạn là người mới bắt đầu, tôi khuyên bạn nên sử dụng chủ đề StoreFront nếu bạn 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ợ tối đa cho Woocommerce.

Tham khảo: Mặt tiền cửa hàng trên Github

Tại sao người mới nên sử dụng chủ đề StoreFront?

Có nhiều lý do để tôi đưa chủ đề này vào hướng dẫn vì hiện tại có rất nhiều chủ đề, không phải tất cả những gì tôi sẽ hướng dẫn. Nó tuyệt vời cho người mới bắt đầu sử dụng WooCommerce 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ư Trình tạo trang gốc hoặc Trình soạn nhạc trực quan để thiết kế bố cục của riêng bạn cho mỗi trang.
  • Hỗ trợ cấu trúc HTML5 và Lược đồ chuẩn SEO.
  • Hoàn toàn tùy chỉnh khu vực tùy chỉnh.
  • Dễ sử dụng.
  • Hỗ trợ đáp ứng.
  • Có hỗ trợ cho tiện ích mở rộng Storefront Designer để hỗ trợ tùy chỉnh chuyên nghiệp hơn.
  • Mã thân thiện với lập trình viên. Có thể dễ dàng tùy chỉnh lại nếu bạn thành thạo các móc hành động và móc lọc.
  • Hỗ trợ nhiều chủ đề con (trả phí).

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

Thêm dữ liệu mẫu (Nội dung giả) cho Woocommerce

Dữ liệu mẫu Woocommerce là một gói dữ liệu được tạo sẵn của một số sản phẩm để chúng tôi có thể dễ dàng kiểm tra các chức năng hoặc chủ đề. Mục đích mà tôi yêu cầu bạn thêm dữ liệu mẫu này vào là để chúng ta có thể thấy cách chủ đề hiển thị đầy đủ.

Bạn đầu tiên Tải xuống plugin Woocommerce vào máy tính của bạn và giải nén nó. Khi bạn giải nén nó, hãy chuyển đến thư mục / woocommerce / dummy-data / sẽ thấy các tệp dữ liệu mẫu. Nhưng ở đây chúng tôi chỉ sử dụng tệp dummy-data.xml.

Cuối cùng, bạn truy cập vào trang web -> Công cụ -> Nhập -> WordPress (cài đặt plugin WordPress Importer nếu bạn chưa có) và tải lên tệp dummy-data.xml.

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

Đưa sản phẩm đến người dùng của bạn và chọn Tải xuống và nhập tệp đính kèm rồi Gửi.

mặt tiền cửa hàng-05

Nếu mạng của bạn hơi chậm và hết thời gian, hãy tạo tệp 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.

Nhập dữ liệu thành công

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

mặt tiền cửa hàng-06

Cài đặt và kích hoạt Mặt tiền cửa hàng

Để cài đặt chủ đề này, hãy truy cập Giao diện -> Giao diện -> Thêm mới và nhập chủ đề tìm kiếm “Mặt tiền cửa hàng“.

mặt tiền cửa hàng-01

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

Cài đặt trang chủ

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

mặt tiền cửa hàng-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.

wc26-cai-storefront-01

Sau đó, bạn truy cập [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 bạn vừa tạo.

mặt tiền cửa hàng-03

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

wc26-cai-storefront-02

Trước hết, mình xin giải thích qua ý nghĩa của các thành phần trên trang chủ của theme Storefront như:

  • Cửa hàng theo thể loại: Hiển thị các danh mục sản phẩm trong trang web. Mặc định nó sẽ hiển thị 3 danh mục theo thứ tự bảng chữ cái trên tên danh mục. Bạn có thể chỉnh sửa danh mục để thêm hình đại diện cho nó.
  • Mới: Danh sách các sản phẩm mới nhất.
  • Chúng tôi đề nghị: Danh sách các sản phẩm nổi bật mới nhất, để đặt một sản phẩm nổi bật, bạn vào trang quản lý sản phẩm và đánh dấu vào dấu sao tương ứng của sản phẩm đó.
  • Yêu thích của người hâm mộ: Các sản phẩm mới nhất được đánh giá cao nhất.
  • Đang bán: Các sản phẩm mới nhất đang được bán.
  • Bán chạy nhất: Sản phẩm bán chạy mới nhất.

Đặt khu vực chèn tiện ích con

Chủ đề Mặt tiền cửa hàng hỗ trợ chúng tôi 6 vị trí chèn tiện ích bao gồm:

  • Bên dưới Tiêu đề
  • Thanh bên
  • 4 Chân trang (Chân trang 1, Chân trang 2, Chân trang 3 và Chân trang 4)

Bạn có thể xem trong Giao diện -> Tiện ích.

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

Tính năng tùy chỉnh trong chủ đề

Chủ đề này cung cấp một số tùy chỉnh tại [textmarker color=”247BFF”]Xuất hiện -> Tùy chỉnh[/textmarker] và ở đó bạn có thể đặt logo, thay đổi màu sắc, bố cục, v.v.

mặt tiền cửa hàng-08

Dịch chủ đề Storefront sang tiếng Việt

Theme này hiện chưa có ngôn ngữ tiếng Việt nên bạn có thể thấy một số từ tiếng Anh như Danh mục sản phẩm, Sản phẩm gần đây,…. Nếu cần dịch, bạn có thể cài đặt plugin Loco Translate và xem chi tiết. cách sử dụng plugin này để dịch nơi đây.

Tùy chỉnh mặt tiền cửa hàng nâng cao

Như tôi đã nói ở trên, Storefront là một chủ đề có khả năng tùy biến cao nhờ vào móc hành động và móc lọc của nó. Nếu bạn đã quen thuộc với mã, bạn có thể kiểm tra tệp inc / storefront-template-functions.php để xem một số hàm gốc được khai báo trong chủ đề này mà bạn có thể tùy chỉnh bằng các móc lọc.

Nên xem: Cách sử dụng móc lọc trong WordPress

Cài đặt chủ đề con trước khi tùy chỉnh

Khi tùy chỉnh chủ đề, tránh chỉnh sửa hoặc thêm mã trực tiếp vào chủ đề vì nó sẽ bị mất khi bạn cập nhật phiên bản chủ đề mới sau này. Để không bị mất khi cập nhật, hãy tạo chủ đề con cho Mặt tiền cửa hàng. Tôi đã tạo một chủ đề con đơn giản với 2 tệp:

  • style.css – Tùy chỉnh CSS của chủ đề.
  • functions.php – Thêm mã PHP tùy chỉnh trong chủ đề.

Tải xuống Chủ đề con của mặt tiền cửa hàng

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

Tất cả mã bên dưới bạn sẽ chèn vào tệp functions.php của chủ đề con này.

Xóa một số yếu tố khỏi trang chủ

Trong tệp template-website.php của chủ đề này, bạn sẽ thấy một 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, chúng ta sẽ biết những chức năng nào sẽ được hook vào trang chủ của action hook, và để loại bỏ những phần tử không muốn hiển thị trên trang chủ, chúng ta chỉ cần gỡ bỏ chức năng đó khỏi hook. homepage. Ví dụ: nếu tôi muốn xóa phần Người hâm mộ yêu thích và Chúng tôi đề xuất, tôi có mã 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õ ràng trong đoạn code, các bạn có thể tự đọc nhé.

Điều chỉnh số lần hiển thị trên các mục ngoài trang chủ

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

Ví dụ: phần Mua sắm theo Danh mục được khai báo dưới dạng bộ lọc như sau:


$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ờ chúng ta khai báo một hàm khác để lọc 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’ );

Bạn làm tương tự với các phần khác và mỗi phần khai báo một hàm như vậy hoặc nếu bạn sử dụng PHP 5.4 thì có thể viết ngắn gọn hơn bằng cách sử dụng kỹ thuật Anonymous functions trong PHP để gom một hàm để 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ủa các móc tùy chỉnh ngoài trang chủ:

  • storefront_product_categories_args: Cửa hàng theo thể loại
  • storefront_featured_products_args: Chúng tôi đề xuất
  • storefront_popular_products_args: Người hâm mộ yêu thích
  • storefront_recent_products_args: Mới
  • storefront_on_sale_products_args: Đang bán
  • storefront_best_selling_products_args: Bán chạy nhất

Phần kết

Chủ đề này rất dễ sử dụng phải không? Chỉ với vài thao tác là chúng ta đã có một trang shop đơn giản trong WordPress với sự kết hợp của plugin Woocommerce và khá đẹp mắt. Giả sử màn hình mà chúng tôi đã quan tâm, chúng tôi sẽ tìm hiểu thêm về cài đặt trong video tiếp theo.

3.7 / 5 – (3 phiếu bầu)

Tiếp tục đọc trong bộ truyện