Hướng dẫn nhập môn phát triển chủ đề WooCommerce: Xây dựng trang web thương mại điện tử của bạn từ con số 0

Nếu bạn đã quen với việc phát triển các giao diện (theme) cho WordPress, thì việc tạo ra một giao diện riêng cho WooCommerce sẽ là bước tiếp theo tự nhiên. Là một plugin thương mại của WordPress, WooCommerce vận hành dựa trên các mẫu trang (page templates), vòng lặp (loops), và mã ngắn (shortcodes) được tùy chỉnh. Một giao diện WooCommerce cần phải sử dụng đúng cách các thành phần này, đồng thời đảm bảo rằng tất cả các phong cách thiết kế (styles) và script đều được tích hợp một cách liền mạch.

Để phát triển một giao diện (theme) cho WooCommerce, trước hết bạn cần một giao diện WordPress cơ bản làm nền tảng. Điều này có thể là một giao diện con (sub-theme) được bạn tạo ra từ đầu, hoặc là kết quả của việc phát triển lại một giao diện có sẵn (chẳng hạn như Underscores hoặc Storefront). Điều quan trọng nhất là giao diện của bạn phải được công bố là hỗ trợ WooCommerce; chỉ khi đó các plugin mới có thể đưa các tệp mẫu (template files) của chúng vào cấu trúc giao diện của bạn.

Quá trình này bao gồm một số bước chính: thiết lập môi trường phát triển, tìm hiểu cấu trúc các template của WooCommerce, tạo các tệp tin thể hiện (theme files) cần thiết, sử dụng các hook (action và filter) để tùy chỉnh chức năng theo nhu cầu, và cuối cùng là kiểm thử và tối ưu hóa sản phẩm. Tiếp theo, chúng ta sẽ phân tích từng bước một một.

Đọc thêm Hướng dẫn nhập môn phát triển chủ đề WordPress: Xây dựng chủ đề đầu tiên từ con số 0。

Thiết lập môi trường phát triển và cấu trúc chủ đề

Trước khi bắt đầu viết bất kỳ đoạn mã nào, một môi trường phát triển địa phương (local development environment) đáng tin cậy là điều kiện tiên quyết. Bạn nên sử dụng các công cụ như Local, XAMPP hoặc Docker để nhanh chóng thiết lập môi trường bao gồm PHP, MySQL và Apache/Nginx. Hãy đảm bảo rằng phiên bản PHP của bạn phù hợp với yêu cầu mới nhất của WooCommerce (thường là PHP 7.4 trở lên), đồng thời cài đặt đúng cách WordPress và các plugin liên quan đến WooCommerce.

UltaHost – Nhà cung cấp dịch vụ máy chủ WordPress chuyên nghiệp

Bảo đảm hoàn tiền trong 30 ngày, băng thông và cơ sở dữ liệu không giới hạn, bảo vệ DDoS miễn phí, mua 3 năm ưu đãi 50%

Truy cập trang

Tạo một thư mục chủ đề mới, ví dụ như… my-woocommerce-themeVà đặt nó ở đó. wp-content/themes/ Trong thư mục gồm các tệp tin, một chủ đề hỗ trợ WooCommerce cơ bản nhất cần có ít nhất các tệp tin cốt lõi sau:

• style.cssĐây là bảng định dạng cho chủ đề (theme stylesheet), trong đó phải chứa các thẻ tiêu đề chuẩn của WordPress.
• index.phpTệp mẫu chính cho chủ đề (main template file for the theme).
• functions.phpĐây là các tệp cốt lõi được sử dụng để bổ sung tính năng chủ đề (theme), các script liên quan đến quá trình đăng ký người dùng, cũng như các thiết lập về giao diện (styles), đồng thời xác nhận rằng nền tảng WooCommerce được hỗ trợ.

Đầu tiên, trong style.css Trong phần chú thích ở đầu, bạn cần định nghĩa rõ ràng thông tin chủ đề.

/*
Theme Name: My WooCommerce Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Description: 一个为 WooCommerce 定制的现代电商主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-woocommerce-theme
*/

Tiếp theo, functions.php Trong tệp tin, điều đầu tiên và quan trọng nhất là phải tuyên bố rằng chủ đề của bạn hỗ trợ WooCommerce. Điều này được thực hiện bằng cách… add_action Cái móc và… add_theme_support hàm.

<?php
/**
 * 主题功能文件
 */
function my_woocommerce_theme_setup() {
    // 声明主题支持 WooCommerce
    add_theme_support( 'woocommerce' );
    // 可选：支持 WooCommerce 的特定功能，如产品画廊缩放、轮播等
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'my_woocommerce_theme_setup' );

// 注册主题的样式和脚本
function my_woocommerce_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入 WooCommerce 样式
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_style( 'woocommerce-theme', get_template_directory_uri() . '/css/woocommerce.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_woocommerce_theme_scripts' );
?>

Hiểu và ghi đè mẫu WooCommerce

WooCommerce sử dụng một hệ thống mẫu có thể được thay thế (overridden templates). Tất cả các tệp mẫu mặc định đều nằm trong thư mục plugin của WooCommerce. templates/ Trong thư mục đó. Để tùy chỉnh các mẫu này trong chủ đề của bạn, bạn cần tạo một tệp có tên… (tên tệp cần được điền vào đây) trong thư mục chứa các tệp liên quan đến chủ đề của bạn. woocommerce Hãy tạo thư mục tương ứng, sau đó sao chép và sửa đổi các tệp mẫu theo cấu trúc đường dẫn giống nhau có trong plugin.

Đọc thêm Hướng dẫn tối thượng phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh đầu tiên từ con số không。

Ví dụ, nếu bạn muốn thay đổi mẫu trang sản phẩm cụ thể, đường dẫn mặc định của WooCommerce là… plugins/woocommerce/templates/single-product.phpBạn cần tạo ra những nội dung sau trong chủ đề của mình:themes/my-woocommerce-theme/woocommerce/single-product.phpKhi tệp tin này tồn tại, WooCommerce sẽ ưu tiên tải phiên bản tương ứng từ thème (tema) của bạn.

Mức độ phân cấp của các mẫu (template hierarchy) là một khái niệm quan trọng khác. WooCommerce đã tích hợp một cách khéo léo vào hệ thống phân cấp mẫu tiêu chuẩn của WordPress. Ví dụ, đối với trang cửa hàng (Shop Page), WordPress sẽ tìm kiếm các mẫu theo thứ tự sau:archive-product.php > archive.php > index.phpDo đó, việc tạo ra… archive-product.php Đây là phương pháp trực tiếp và hiệu quả nhất để tạo trang danh sách cửa hàng được tùy chỉnh.

Các tệp mẫu cốt lõi thường được sử dụng và được khuyến nghị nên được ghi đè (override) ưu tiên bao gồm:
- single-product.phpTrang chi tiết sản phẩm đơn lẻ.
- archive-product.phpTrang lưu trữ sản phẩm (Trang chủ cửa hàng).
- cart/cart.phpTrang giỏ hàng.
- checkout/form-checkout.phpTrang thanh toán.
- myaccount/my-account.phpTrang tài khoản của tôi.

Hosting.com - lưu trữ chia sẻ

Hiệu năng cao, được trang bị CPU AMD EPYC, lưu trữ SSD NVMe và LiteSpeed, hỗ trợ chuyên gia nội bộ 24 giờ/ngày, các biện pháp bảo mật tiên tiến bao gồm SSL, chống brute force, phần mềm độc hại và bảo vệ DDoS, tiết kiệm tới 73%.

Truy cập trang

Khi thay thế các tệp mẫu (templates), thực hành tốt nhất là sao chép các tệp mẫu gốc từ plugin WooCommerce vào thư mục tương ứng của chủ đề (theme) của bạn trước khi thực hiện bất kỳ thay đổi nào, nhằm đảm bảo rằng các chức năng cốt lõi của WordPress và WooCommerce vẫn hoạt động bình thường.

Sử dụng các “hook” (các công cụ hoặc cơ chế kết nối) để tùy chỉnh chức năng.

Ngoài việc thay thế các tệp mẫu (template files), WooCommerce còn cung cấp rất nhiều hành động (actions) khác để bạn có thể tùy chỉnh hoạt động của trang web thương mại điện tử của mình.action) và bộ lọc (filters)filterCác công cụ như “hook” cho phép bạn thêm, xóa hoặc sửa đổi nội dung và chức năng mà không cần phải thay đổi các tệp mẫu (template files) cốt lõi. Phương pháp này thường nhẹ nhàng hơn và dễ bảo trì hơn so với việc sao chép trực tiếp các tệp mẫu.

Các “hook hành động” (action hooks) cho phép bạn thực thi mã tự định tại những vị trí cụ thể. Ví dụ, bạn có thể thêm một khối nội dung tùy chỉnh sau phần tóm tắt sản phẩm.

Đọc thêm Xây dựng website chuyên nghiệp: Hướng dẫn toàn diện phát triển chủ đề WordPress tùy chỉnh từ đầu。

function my_custom_product_message() {
    echo '<p class="my-custom-notice">🎉 Sản phẩm này đang tham gia chương trình khuyến mãi có thời hạn!</p>';
}
add_action( 'woocommerce_single_product_summary', 'my_custom_product_message', 20 );

Tại đây,woocommerce_single_product_summary Đó là tên của con móc (hook).20 Đó là các con số biểu thị thứ tự ưu tiên (quyết định thứ tự thực hiện).

Các hook của bộ lọc cho phép bạn thay đổi dữ liệu. Ví dụ, bạn có thể thay đổi văn bản của nút “Thêm vào giỏ hàng”.

Máy chủ chia sẻ của InterServer

Lưu trữ chia sẻ với mức phí $2,50 USD mỗi tháng, giảm giá $0,1 USD trong tháng đầu tiên, mã giảm giá tryinterserver, với 461 ứng dụng đám mây và cài đặt chỉ bằng một cú nhấp chuột.

Truy cập trang

function my_custom_add_to_cart_text( $text ) {
    if ( is_product() ) {
        $text = __( '立即购买', 'my-woocommerce-theme' );
    }
    return $text;
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'my_custom_add_to_cart_text' );

Một công cụ mạnh mẽ khác là các “hook” (khớp nối) trong mẫu (templates). WooCommerce đã đặt rất nhiều hook trong các tệp mẫu của nó. do_action Gọi hàm. Bằng cách tìm kiếm những “hook” (điểm kết nối) này, bạn có thể kiểm soát chính xác cách trang web được hiển thị. Bạn có thể sử dụng chúng để thực hiện các thao tác cần thiết. remove_action Hãy loại bỏ các phần tử không cần thiết, hoặc sử dụng… add_action Chèn các phần tử mới vào vị trí cụ thể trong trang web là một cách linh hoạt hơn so với việc chỉnh sửa trực tiếp tệp tin mẫu. Điều này đặc biệt hữu ích khi bạn đang cập nhật plugin WooCommerce, vì những thay đổi của bạn sẽ ít có nguy cơ bị ghi đè bởi các bản cập nhật mới từ nhà phát triển plugin.

Tùy chỉnh kiểu dáng và thiết kế thích ứng (Style Customization and Responsive Design)

WooCommerce có sẵn một bộ giao diện cơ bản, nhưng để nó phù hợp với phong cách thiết kế của bạn, việc tùy chỉnh giao diện một cách chi tiết là rất cần thiết. Đề nghị bạn tạo một tệp CSS riêng biệt để thực hiện các thay đổi cần thiết. woocommerce.cssvà trong functions.php Nội dung được tải dựa trên các điều kiện được chỉ định, như đã minh họa trong ví dụ trước đó.

Trọng tâm của việc tùy chỉnh giao diện là hiểu rõ cấu trúc HTML và các lớp CSS được tạo ra bởi WooCommerce. Việc sử dụng công cụ phát triển trên trình duyệt để kiểm tra các thành phần như danh sách sản phẩm hoặc bảng giỏ hàng là một cách nhanh chóng và hiệu quả để bắt đầu. WooCommerce đã thêm rất nhiều lớp CSS có ý nghĩa (semantic classes) cho hầu hết các thành phần trong trang web, giúp việc thiết kế giao diện trở nên dễ dàng và dễ hiểu hơn. .product、.woocommerce-loop-product__link、.onsale v.v.

Ví dụ, để thay đổi kiểu dáng của thẻ “Giá đặc biệt”:

/* 在你的 woocommerce.css 中 */
.onsale {
    background-color: #ff3366;
    color: white;
    border-radius: 0;
    padding: 0.5em 1em;
    font-weight: bold;
    top: 10px;
    right: 10px;
    left: auto; /* 覆盖默认的 left: 0 */
}

Thiết kế phản ứng (responsive design) rất quan trọng đối với các trang web thương mại điện tử. Bạn cần đảm bảo rằng các bảng sản phẩm, bảng biểu (chẳng hạn như giỏ hàng, chi tiết đơn hàng) đều được hiển thị tốt trên mọi kích thước màn hình. Hãy sử dụng các công cụ như CSS Media Queries và các phương thức bố trí Flexbox/Grid để điều chỉnh cách sắp xếp các mục trong danh sách sản phẩm.

@media (max-width: 768px) {
    ul.products li.product {
        width: 48%; /* 在平板设备上每行显示两个产品 */
        margin-right: 4%;
    }
    ul.products li.product:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    ul.products li.product {
        width: 100%; /* 在手机上每行显示一个产品 */
        margin-right: 0;
    }
    /* 调整结账表单的输入框 */
    .woocommerce form .form-row {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}

Tóm lại

Việc phát triển các giao diện (theme) cho WooCommerce là quá trình kết hợp kiến thức về thiết kế giao diện WordPress với các yêu cầu đặc thù của thương mại điện tử. Yếu tố then chốt là phải hiểu rõ cơ chế hoạt động của hệ thống các mẫu (templates) trong WordPress, đồng thời thành thạo việc sử dụng các hàm gọi (actions) và hook để tùy chỉnh chức năng một cách linh hoạt. Từ việc thiết lập môi trường phát triển, khai báo sự hỗ trợ cần thiết, ghi đè các mẫu cốt lõi, cho đến việc sử dụng các hook để điều chỉnh chi tiết và tùy chỉnh giao diện một cách sâu rộng – mỗi bước đều là nền tảng để xây dựng một cửa hàng trực tuyến chuyên nghiệp, độc đáo và hiệu quả. Hãy luôn nhớ rằng, việc phát triển nên được thực hiện trong các giao diện con (sub-themes), và ưu tiên sử dụng các hook thay vì thay đổi trực tiếp các mẫu cốt lõi của WordPress; đây là thực hành tốt nhất để đảm bảo tính bảo trì dễ dàng của mã nguồn và khả năng tương thích trong tương lai.

FAQ 常见问题

Làm thế nào để loại bỏ hoặc sắp xếp lại các thành phần trên trang chi tiết sản phẩm trong một chủ đề (theme)?

Bạn có thể sử dụng remove_action Có một hàm được sử dụng để loại bỏ các phần tử cụ thể khỏi khu vực tóm tắt sản phẩm. Trước tiên, bạn cần biết rằng phần tử đó được thêm vào thông qua hook nào và mức độ ưu tiên (priority) của nó là bao nhiêu.

Ví dụ, để loại bỏ tiêu đề sản phẩm, bạn có thể xem… plugins/woocommerce/templates/single-product/title.phpBạn sẽ nhận thấy rằng nó hoạt động thông qua các “hook” (các điểm kết nối được định nghĩa sẵn trong mã nguồn). woocommerce_single_product_summary Hãy thêm nó với mức độ ưu tiên 5. Vậy, trong chủ đề của bạn… functions.php Chỉ cần thêm đoạn mã sau vào đó là bạn có thể loại bỏ nó:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

Để sắp xếp lại các yếu tố, bạn cần phải loại bỏ tất cả các phần tử liên quan trước, sau đó thêm chúng lại theo thứ tự bạn mong muốn. Ngoài ra, bạn cũng có thể sắp xếp chúng bằng cách điều chỉnh các con số biểu thị thứ tự ưu tiên; số càng nhỏ, yếu tố đó sẽ được thực hiện sớm hơn và xuất hiện ở vị trí trước trong kết quả.

Tại sao những thay đổi mà tôi đã thực hiện trên giao diện của trang web (theme) lại biến mất sau khi tôi cập nhật phiên bản mới của WooCommerce?

Nếu bạn trực tiếp sửa đổi thư mục chứa các plugin của WooCommerce…wp-content/plugins/woocommerce/Nếu bạn sử dụng các tệp mẫu nằm dưới thư mục đó, mọi thay đổi bạn thực hiện sẽ bị ghi đè mỗi khi plugin được cập nhật. Đây là cách làm hoàn toàn không được khuyến nghị.

Cách làm đúng là tuân theo cơ chế thay thế các mẫu (template override) của WooCommerce: sao chép tệp mẫu cần chỉnh sửa vào thư mục chứa các mẫu của chủ đề (theme) của bạn. woocommerce/ Bạn nên thực hiện các thay đổi trong các thư mục con. Bằng cách này, WooCommerce sẽ ưu tiên tải phiên bản đã được cấu hình sẵn trong giao diện của bạn, và việc cập nhật các plugin cũng sẽ không ảnh hưởng đến nội dung tùy chỉnh của bạn.

Làm thế nào để tạo một bố cục tùy chỉnh cho trang web cửa hàng WooCommerce?

Cách hiệu quả nhất để tạo bố cục tùy chỉnh cho trang cửa hàng là bằng cách ghi đè (override) các thiết lập có sẵn trong hệ thống. archive-product.php Đây là một tệp tin mẫu (template file). Bạn hoàn toàn có thể thiết kế lại cấu trúc HTML của tệp tin này theo ý muốn của mình.

Một phương pháp khác, mang tính mô-đun hơn, là sử dụng các “hook” (các công cụ hoặc thành phần kết nối). Nội dung trang cửa hàng chủ yếu được tạo thành từ các thành phần được quản lý độc lập và có thể được kết hợp với nhau thông qua các hook này. woocommerce_before_main_content、woocommerce_archive_description、woocommerce_before_shop_loop、woocommerce_after_shop_loop Bạn có thể kiểm soát các quy trình xử lý thông qua những “hook” (các điểm kết nối trong mã nguồn). Bạn có thể loại bỏ vòng lặp mặc định và chèn các truy vấn tùy chỉnh cũng như cấu trúc vòng lặp của riêng mình vào giữa các hook này, để tạo ra các bố cục lưới (grid), danh sách (list) hoặc kiểu bố cục masonry (masonry layout) độ

Đồng thời, bằng cách sử dụng công cụ Customizer của WordPress hoặc tạo một trang tùy chọn chủ đề (theme options page), bạn có thể cho phép người dùng thay đổi giao diện (layout) mà không cần phải chỉnh sửa mã nguồn.

Làm thế nào để thêm JavaScript tùy chỉnh vào chủ đề WooCommerce một cách chính xác?

Để thêm JavaScript tùy chỉnh cho một chủ đề WooCommerce, bạn nên tuân theo các thực hành tốt nhất liên quan đến việc sắp xếp thứ tự thực thi các tập lệnh JavaScript trong WordPress. Điều này giúp đảm bảo rằng các đoạn mã được thực thi đúng thứ tự và không xảy ra xung đột giữa chúng. functions.php Trong tệp functions.php, sử dụng wp_enqueue_script Các hàm được sử dụng để đăng ký và tải các tập lệnh (script) vào hệ thống.

Hãy đảm bảo rằng bạn đang sử dụng những công cụ hoặc phương pháp phù hợp để thực hiện công việc của mình. wp_enqueue_script Khi cần thiết, bạn có thể thiết lập các phụ thuộc (dependencies) thông qua tham số thứ ba, chẳng hạn như phụ thuộc vào thư viện jQuery. Đối với các script đặc thù của WooCommerce, đôi khi chúng cũng có thể yêu cầu sự phụ thuộc vào những thư viện khác. wc-add-to-cart-variation(Dành cho sản phẩm có thể thay đổi) hoặc wc-checkout(Dùng cho trang thanh toán.) Thông qua. wp_localize_script Bạn có thể an toàn truyền các biến PHP (chẳng hạn như địa chỉ URL của AJAX, địa chỉ trang web, v.v.) sang tệp JavaScript của mình bằng cách sử dụng các hàm.

php
function my_theme_wc_scripts() {
wp_enqueue_script(
'my-woocommerce-script',
`get_template_directory_uri()` . 'https://www.likacloud.com/js/my-woocommerce.js',
`array('jquery', 'wc-add-to-cart-variation'),` // Các thành phần phụ thuộc (dependencies)
'1.0.0',
true // Tải nội dung vào phần chân trang (footer)
);
`wp_localize_script('my-woocommerce-script', 'myWooParams', array(...));`
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_wc_scripts' );