Lập trình WordPress nâng cao: Phát triển WooCommerce

WooCommerce Development – phần cực kỳ quan trọng nếu bạn muốn:

• Xây dựng website bán hàng bằng WordPress
• Tuỳ chỉnh giao diện sản phẩm / giỏ hàng / thanh toán
• Thêm tính năng riêng (như mã giảm giá, phí vận chuyển, trường bổ sung, v.v.)

WooCommerce là gì?

WooCommerce là plugin bán hàng số 1 trên WordPress, giúp bạn biến website thành một cửa hàng: có sản phẩm, giỏ hàng, thanh toán, đơn hàng, email…

Mục tiêu học hôm nay:

1. Cài đặt WooCommerce
2. Hiển thị sản phẩm trên theme
3. Tuỳ chỉnh template WooCommerce
4. Thêm custom field vào sản phẩm
5. Hook vào hành vi mua hàng (action/filter)

1. Cài đặt WooCommerce

• Vào Plugins → Thêm mới
• Tìm: WooCommerce → Cài đặt → Kích hoạt
• Làm theo trình hướng dẫn: chọn quốc gia, đơn vị tiền tệ, loại sản phẩm,…

Khi cài xong, Woo sẽ tạo sẵn các trang:

Trang	Mục đích
/shop	Trang danh sách sản phẩm
/cart	Giỏ hàng
/checkout	Thanh toán
/my-account	Tài khoản người dùng

2. Thêm sản phẩm

• Vào Sản phẩm → Thêm mới
• Nhập tên, giá, mô tả, hình ảnh, danh mục,…
• Nhấn Đăng

3. Hiển thị sản phẩm ra theme

Bạn có 2 lựa chọn:

A. Dùng shortcode:

📋 Copy[products limit="4" columns="2" orderby="date" order="DESC"]

➡️ Hiển thị 4 sản phẩm mới nhất theo 2 cột.

B. Dùng hàm PHP:

Trong front-page.php hoặc nơi bạn muốn:

📋 Copy<?php
$args = array(
    'post_type' => 'product',
    'posts_per_page' => 4
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
    wc_get_template_part('content', 'product');
endwhile;
wp_reset_postdata();
?>

wc_get_template_part() sẽ gọi đúng giao diện sản phẩm mặc định của Woo.

4. Tùy chỉnh giao diện WooCommerce (Template Override)

WooCommerce lưu giao diện tại:

📋 Copywp-content/plugins/woocommerce/templates/

Nếu bạn muốn tùy chỉnh, hãy copy file bạn muốn chỉnh sang theme của bạn:

📋 Copy/wp-content/themes/ten-theme/woocommerce/

Ví dụ:

Bạn muốn sửa giao diện single product → copy:

📋 Copywoocommerce/single-product/title.php

→ sang:

📋 Copyyour-theme/woocommerce/single-product/title.php

Sau đó sửa nội dung trong đó theo ý bạn.

5. Thêm custom field vào sản phẩm (ACF)

• Cài plugin Advanced Custom Fields
• Tạo field group (ví dụ: “Mã sản phẩm phụ”)
• Áp dụng cho post type: product
• Hiển thị ở template:

📋 Copy<?php if ( get_field('ma_san_pham_phu') ) : ?>
    <p><strong>Mã phụ:</strong> <?php the_field('ma_san_pham_phu'); ?></p>
<?php endif; ?>

6. Dùng hook WooCommerce (action & filter)

Ví dụ: Thêm thông báo dưới nút “Thêm vào giỏ”

📋 Copyadd_action('woocommerce_after_add_to_cart_button', 'gfon_note_cart');
function gfon_note_cart() {
    echo '<p style="color:blue;">🔥 Sản phẩm có khuyến mãi đặc biệt hôm nay!</p>';
}

Các hook thường dùng:

Hook	Vị trí / Mục đích
woocommerce_before_main_content	Trước nội dung trang Shop
woocommerce_after_shop_loop_item_title	Dưới tên sản phẩm ở trang danh sách
woocommerce_single_product_summary	Giao diện chi tiết sản phẩm
woocommerce_thankyou	Sau khi đặt hàng thành công
woocommerce_email_order_details	Tuỳ chỉnh email xác nhận đơn hàng

Dữ liệu Woo lưu ở đâu?

• Sản phẩm là post_type = product
• Đơn hàng là post_type = shop_order
• Dữ liệu khách hàng lưu ở:
  • wp_users
  • wp_usermeta
• Các field như giá, SKU, tồn kho → lưu trong custom field (postmeta)

Tổng kết

Bạn vừa học	Giải thích ngắn
Cài và cấu hình WooCommerce	Bán hàng trên WP
Hiển thị sản phẩm bằng shortcode & PHP	Nhiều cách linh hoạt
Tùy chỉnh template Woo	Override từ plugin sang theme
Dùng ACF để thêm thông tin riêng	Tùy biến linh hoạt
Hook để chèn logic mới	Thêm code vào đúng chỗ, dễ bảo trì