Dĩ nhiên với một plugin làm website bán hàng như WooCommerce thì các tính năng tích hợp thanh toán là không thể thiếu. Tuy nhiên các tính năng thiết lập thanh toán mặc định trong WooCommerce khá đơn giản và có thể không còn phù hợp, nên trong bài này mình sẽ đi thẳng vào các vấn đề chính là tích hợp thanh toán online qua mã QR, MoMo vào WooCommerce thông qua các plugin hỗ trợ.

Tích hợp thanh toán qua quét mã QR của VietQR

VietQR có cung cấp bộ API miễn phí hoàn toàn để làm chức năng tự động sinh ra mã QR thanh toán được điền sẵn số tiền và nội dung thanh toán. Hiện nay có một plugin WordPress miễn phí để bạn khai thác tính năng này mà không cần phải lập trình thêm, plugin đó tên là VietQR.

Sau khi cài đặt xong plugin này, bạn cấu hình nó tại WooCommerce => Settings => Payments và bật tính năng thanh toán Scan VietQR lên, đồng thời ấn nút Finish setup để thiết lập.

Sau đó bạn hoàn tất thiết lập bằng cách điền các thông tin vào bao gồm tài khoản ngân hàng của bạn, hãy tham khảo nội dung dưới đây.

Sau đó tiến hành thử nghiệm đặt hàng với phương thức thanh toán vừa cấu hình.

Ở bước cuối cùng hệ thống sẽ hiển thị mã QR để khách hàng quét thanh toán.

Bạn thấy trang hoàn tất đơn hàng có vẻ hơi xấu và hiển thị chưa tốt đúng không? Đừng lo, ở bài sau mình sẽ hướng dẫn bạn tuỳ biến lại trang này bằng Elementor.

Nếu bạn muốn phần tích hợp thanh toán qua mã QR có thêm tính năng hỗ trợ nhiều ngân hàng, nhiều tính năng bổ sung hay hơn thì có thể xem qua plugin iSures QrCode Payment for Vietnam thử nhé.

Tích hợp thanh toán qua MoMo

Để tích hợp được thanh toán qua MoMo thì bạn cần phải có tài khoản MoMo Doanh Nghiệp, bạn có thể xem thông tin về chương trình này và cách đăng ký tại đây. Sau đó thì bạn sẽ cần plugin tích hợp thanh toán MoMo vào WooCommerce để tự động hoá phần này. Do đây là plugin trả phí và cách sử dụng cũng rất đơn giản là nhập thông tin kết nối của MoMo vào nên mình sẽ không hướng dẫn chi tiết ở đây.

Nếu bạn không có tài khoản MoMo Business thì có thể dùng plugin ISures QrCode Payment For Vietnam có hỗ trợ quét mã QR Code tài khoản MoMo cá nhân.

Thanh toán khi nhận hàng (COD)

Nếu bạn có áp dụng thanh toán COD thì có thể đơn giản là tạo thêm một phương thức thanh toán tượng trưng và hiển thị các thông tin cần thiết. Trong WooCommerce họ đã tạo sẵn phương thức thanh toán này đặt tên là Cash on delivery, bạn chỉ cần bật lên và ấn nút Finish setup để ghi thông tin hướng dẫn vào là được.

Kết bài

Tới đây bạn đã thiết lập hoàn tất phần thanh toán của WooCommerce rồi. Khi viết bài này, mình nhận ra là quên hướng dẫn thiết kế trang tổng quan đơn hàng sau khi đặt hàng nên nó hiển thị hơi ghê, ở bài sau mình sẽ hướng dẫn bạn hoàn tất thiết kế trang này trên Elementor.

Như mình có nói ở đầu chuỗi bài viết Học WordPress Tinh Gọn 2024 này, việc sử dụng WordPress hiện nay chủ yếu là chúng ta sẽ sử dụng những theme trả phí với các tính năng và giao diện hiển thị như ý muốn, sau đó kết hợp với các kiến thức cơ bản về WordPress để có thể cài đặt và sử dụng.

Tuy nhiên mình nhận thấy rằng việc sử dụng WordPress cơ bản đôi khi sẽ gặp khá nhiều bối rối nếu lần đầu tiên sử dụng theme trả phí, vì nó có quá nhiều thứ cần phải làm quen để có thể tinh chỉnh lại theo ý mình.

Để giúp bạn có cái nhìn tổng quan hơn việc sử dụng một theme trả phí như thế nào, bài này mình sẽ nói qua về các thao tác để mua và sử dụng một theme trả phí trên ThemeForest cho mục đích làm wesite blog cá nhân, tạp chí hay các website tương tự.

Mua theme WordPress cho blog cá nhân trên ThemeForest

Công đoạn mất thời gian nhất ở đây đó là đi lựa chọn một theme phù hợp trên “chợ” ThemeForest. Bước đầu tiên bạn sẽ cần truy cập vào địa chỉ themeforest.net, sau đó chọn chuyên mục WordPress và tìm đến chuyên mục Blog / Magazine, trong đây nó sẽ hiển thị ra các theme đang được bán cho mục đích làm website blog hoặc tạp chí.

Tại đây nó sẽ hiển thị ra các theme đang được mua nhiều, hoặc theme đang được khuyến mãi,…để bạn lựa chọn.

Hoặc nếu bạn muốn xem với dạng danh sách để xem toàn bộ theme trong đây thì có thể ấn vào nút All trên thanh điều hướng.

Khi xem một theme, điều bạn cần quan tâm đầu tiên là xem trước (demo) của theme đó để biết nó có các tính năng nào, hiển thị ra sao bằng cách ấn vào nút Live Preview của nó.

Các theme trả phí hiện nay thường là khi ấn nút Live Preview, bạn sẽ được dẫn tới một trang giới thiệu của họ sẽ có rất nhiều thông tin về theme này, và có nhiều bản xem trước khác nhau để ám chỉ với theme này bạn có thể được hỗ trợ sẵn những cấu hình để hiển thị theo nhiều kiểu khác nhau.

Việc của bạn là chọn một bản demo mà bạn cho là thích nhất trong các demo được họ cung cấp sẵn. Khi xem demo, ngoài việc xem qua bố cục của trang thì bạn nên quan tâm đến thanh menu của họ, vì ở đây họ sẽ cung cấp khá nhiều thông tin để bạn xem trước trong demo này, ví dụ như cách thiết kế các trang bên trong, các thành phần trang trí nội dung,…

Nếu bạn thấy ưng ý và quyết định mua nó thì quay trở lại trang thông tin theme này ở ThemeForest và ấn nút Add To Cart để cho vào giỏ hàng.

Sau đó thực hiện thanh toán và tạo tài khoản ThemeForest. Hình thức thanh toán ở ThemeForest là thanh toán qua thẻ quốc tế Visa/Mastercard hoặc PayPal, hoàn toàn có thể dễ dàng thanh toán nếu bạn đang ở Việt Nam.

Sau khi thanh toán hoàn tất thì bạn có thể vào trang Download trong tài khoản ThemeForest để tải về bắt đầu sử dụng.

Cài đặt theme từ ThemeForest

Do theme trả phí thường sẽ có rất nhiều thành phần khác nhau, nên mình khuyến khích bạn tạo ra một trang mới hoặc clone (nhân bản) website WordPress của mình ra để cài đặt thay vì thao tác trực tiếp lên website đang hoạt động. Đồng thời thực hiện backup trước website.

Sắp tới blog thachpham.com có dịp đổi qua dùng theme khác, mình sẽ cố gắng quay lại video quá trình này để bạn có thể biết được quy trình đổi theme của một website sẽ như thế nào.

Xem thêm:

• Tạo bản staging cho WordPress với plugin WP STAGING
• Backup website WordPress với UpdraftPlus

Trước tiên bạn sẽ cần tải về dữ liệu theme đã mua và nhớ chọn All files & documentation.

Bạn sẽ nhận được một tập tin .zip, hãy thực hiện giải nén nó ra và bên trong của nó thường sẽ bao gồm như thế này:

• Tập tin documentation: File hướng dẫn chi tiết cách dùng theme hoặc đường link dẫn tới tài liệu hướng dẫn. Bất kỳ theme nào khi mua trên ThemeForest bạn cũng phải đọc hướng dẫn của họ để có thể sử dụng đúng cách.
• Tập tin theme.zip: Tập tin theme mà bạn vừa mua.
• Tập tin child-theme.zip: Tập tin theme con của theme bạn mua, mục đích cài vào website để nếu có tuỳ biến thì bạn sẽ tuỳ biến tên child theme thay vì theme chính. Như vậy nếu bạn có cập nhật phiên bản của theme sẽ không bị ghi đè các thay đổi.

Bây giờ ta sẽ lần lượt cài tập tin theme.zip và child-theme.zip lên website để bắt đầu sử dụng. Bạn vào website cần cài đặt và tìm tới phần Appearance => Themes và chọn Add New Theme, sau đó chọn Upload Theme và tải tập tin theme.zip lên trước, nhưng không kích hoạt.

Sau đó tiếp tục thao tác tải lên theme mới để tải tập tin child-theme.zip lên và lần này sẽ thực hiện kích hoạt child theme.

Sau khi kích hoạt xong, nó có thể dẫn bạn tới một trang chào mừng, và yêu cầu nhập mã chứng nhận mua theme (Purchase code). Nếu theme của bạn có yêu cầu nhập Purchase code thì bạn sẽ tìm thấy mã của bạn tại phần Support của trang giới thiệu theme bạn mua.

Và đa phần các theme trả phí hiện nay thường bắt buộc cài thêm một số plugin, bạn sẽ thấy thông báo cài plugin phụ thuộc như thế này.

Bạn bấm vào Begin installing plugins và thực hiện cài hết plugin phụ thuộc. Nếu bạn gặp lỗi khi cài nhiều plugin thì hãy ấn nút Install từng plugin trong đây.

Import demo data

Khi sử dụng theme trả phí bạn phải thực hiện một bước để cài các dữ liệu mẫu của theme vào và dữ liệu mẫu này thường giống hệt bản demo mà bạn xem trước đó, bước này thường được gọi là Import Demo Data.

Lưu ý: Nếu bạn đang làm trên một webiste đã có dữ liệu thì có thể bỏ qua bước này. Tuy nhiên sẽ cần phải cấu hình thủ công theme theo hướng dẫn đi kèm để hiển thị đúng.

Để hiểu rõ cách nhập các dữ liệu này vào cho đúng cách thì bạn nên tham khảo qua tài liệu hướng dẫn (documentation) có đính kèm theo theme mà mình đã nòi ở bước trên. Ví dụ như với theme mình đang sử dụng thì sẽ import bằng cách vào Appearance => Import Demo Data để bắt đầu nhập các dữ liệu mẫu vào.

Thường là sau khi import demo thì website sẽ hiển thị hoàn chỉnh các tính năng giống như mẫu demo bạn xem.

Tuỳ chỉnh lại nội dung

Sau khi đã cài đặt hoàn chỉnh theme bạn mua lên website, thì việc của bạn bây giờ là thực hiện tuỳ chỉnh lại theme này để phù hợp với nhu cầu sử dụng của bạn. Dưới đây là một số cái có thể cần tuỳ chỉnh lại:

• Thiết lập lại font chữ để hỗ trợ tốt tiếng Việt.
• Thiết lập lại màu sắc nếu cần thiết.
• Tuỳ chỉnh lại menu của website
• Đăng tải nội dung của bạn lên website

Khi đã hoàn tất các bước trên thì tiến hành xoá các nội dung mẫu bao gồm các post, page,…để tránh dữ liệu bị thừa.

Đối với các theme sử dụng Elementor thì nó có thể hơi khác một chút, đó là chúng ta sẽ thực hiện thay đổi lại thiết kế của từng trang để thay đổi lại nội dung cần hiển thị thay vì tạo nội dung mới.

Tuỳ theo theme mà sẽ có những cách cấu hình lại khác nhau. Bạn thử ngó xem trong trang quản trị có phần nào với tên là Theme Options không vì có thể nó sẽ có phần này để tuỳ chỉnh lại các thông số cơ bản của theme.

Nếu không có thì bạn thử truy cập vào tính năng Appeanrace => Customize vì có thể phần này sẽ chứa các thiết lập của theme.

Mọi thao tác của bạn làm việc trên website bây giờ và tất cả những gì hiển thị ra ngoài đều phụ thuộc vào theme bạn sử dụng, mỗi theme lại có cách sử dụng khác nhau nên bạn hãy cố gắng xem kỹ tài liệu hướng dẫn nếu có bất kỳ thắc mắc nào, hoặc liên hệ với tác giả để được hỗ trợ.

Kết thúc

Ở trên là các thao tác mua một theme trên ThemeForest và sử dụng, và hầu như các theme trả phí đều có trình tự sử dụng như nhau nên bạn có thể áp dụng nó khi mua theme cho WooCommerce trên ThemeForest để làm website bán hàng.

Đến đây thì xem như là bạn đã sử dụng WordPress khá tốt để tự vận hành website của mình rồi. Ở bài sau mình sẽ nói một vấn đề khá quan trọng trong WordPress, đó là vấn đề bảo mật WordPress.

Nếu bạn muốn tuỳ biến lại trang này với Elementor thì có thể thực hiện theo hướng dẫn này. Trước tiên bạn cần tạo một trang mới, đặt tên gì đó không phải là Order received, ví dụ mình chọn tên là Hoàn tất đơn hàng với slug đường dẫn là hoan-tat-don-hang.

Tiến hành đăng trang này lên và ấn vào nút Edit with Elementor để bắt đầu thiết kế trên Elementor.

Ở đây bạn sẽ chèn một widget tên Purchase Summary vào để nó hiển thị nội dung của trang order received ra.

Sau khi chèn xong nó sẽ hiển thị dữ liệu lấy từ một đơn hàng bạn thực hiện đặt thử nghiệm trước đó. Trước tiên bạn nên chỉnh kích thước chiều rộng của container chứa thành phần này khoảng 1024px để nó hiển thị dễ nhìn hơn.

Bạn có thể chuyển qua mục Style của container và thêm màu nền để làm nổi bật nếu muốn.

Bây giờ ở phần thiết lập widget thì có thể tinh chỉnh lại các chữ hiển thị ra qua tiếng Việt, và tinh chỉnh lại ở phần Style theo ý muốn.

Sau khi hoàn tất chỉnh sửa thì nhớ ấn nút Publish để lưu lại. Và cấu hình WooCommerce sử dụng trang này thay cho trang order-received mặc định, bằng cách truy cập vào WooCommerce => Settings => Advanced và thay thế order-received thành slug của trang mới tạo là hoan-tat-don-hang.

Kết bài

Sau bài này thì mình cũng sẽ kết thúc phần hướng dẫn về WooCommerce trong chuỗi bài viết Học WordPress Tinh Gọn 2024. Bắt đầu các bài sau sẽ là các hướng dẫn khác dành cho WordPress chứ không phải về WooCommerce nữa. Do vậy nếu bạn muốn tìm hiểu nhiều hơn về WooCommerce thì có thể xem thêm tài liệu về WooCommerce hoặc các nguồn tài nguyên khác trên internet.

Tính năng thiết lập phí ship mặc định của WooCommerce sẽ giúp bạn có thể tự thiết lập phí vận chuyển dựa theo vị trí nhận hàng của khách hàng (dựa theo tỉnh/thành nếu bạn cài đặt plugin WooCommerce Vietnam Checkout ở bài trước), hoặc kết hợp thêm tính năng phân lớp vận chuyển (Shipping Classes) để tính phí ship dành cho một số sản phẩm đặc biệt.

Cũng nên lưu ý một điều là tính năng tính phí ship mặc định của WordPress sẽ không cần thiết nếu như bạn sử dụng dịch vụ vận chuyển của các bên chuyên giao hàng như Giao Hàng Nhanh (GHN) hay Giao Hàng Tiết Kiệm (GHTK). Lúc này bạn sẽ cần plugin kết nối tính phí ship tự động dựa theo phí dịch vụ của các bên này.

Sử dụng tính phí ship mặc định của WooCommerce

Nếu như bạn muốn tự đặt phí ship theo ý muốn của bạn thì có thể sử dụng tính năng tính phí ship mặc định của WooCommerce. Mặc định WooCommerce sẽ có các tính năng tính phí ship được phân chia như sau:

• Shipping Zones (khu vực vận chuyển): Thiết lập khu vực ship dựa theo tỉnh/thành của người nhận. Ví dụ bạn muốn phí ship đến Hà Nội sẽ khác so với phí ship đến Đà Nẵng, thì bạn sẽ cần tạo hai shipping zones là Đà Nẵng và Hà Nội để thiết lập phí ship riêng.
• Shipping Classes (lớp vận chuyển): Phân loại sản phẩm vào các “lớp vận chuyển” và thực hiện tính thêm phí ship ở các sản phẩm có trong lớp nào đó. Bạn cũng có thể kết hợp giữa Shipping Zones và Shipping Classes để tính phí ship cụ thể hơn. Ví dụ bạn có nhiều sản phẩm, có một vài sản phẩm cồng kềnh mà phí vận chuyển hàng cồng kềnh thường cao hơn, nên bạn sẽ tạo một shipping class có tên “Hàng cồng kềnh”, sau đó các sản phẩm giao đến Hà Nội sẽ tự cộng thêm 25.000 đồng vào phí giao hàng của sản phẩm có trong lớp “Hàng cồng kềnh”.

Thiết lập Shipping Classes

Nếu bạn dự định sản phẩm của bạn cung cấp có một số sản phẩm đặc biệt mà phí vận chuyển có thể cao hơn, như hàng dễ cháy nổ, hàng cồng kềnh, hàng dễ vỡ,…, thì nên phân loại các sản phẩm đó vào những shipping class riêng biệt.

Shipping class là một tính năng giúp bạn phân loại phí ship dễ dàng, và sau đó khi thiết lập phí ship bạn có thể thu thêm phí cho các sản phẩm thuộc một shipping class nào đó.

Để tạo shipping class bạn chọn Classes trong mục Shipping và ấn nút Add shipping class.

Sau đó bạn đặt tên, slug (không dấu, không khoảng trắng) và mô tả của shipping class cần tạo.

Sau khi tạo xong, bạn sẽ cần đưa sản phẩm tương ứng vào class này bằng cách sửa sản phẩm, ở mục Shipping trong Product data bạn chọn Shipping class vừa tạo ra.

Vậy là xong, việc còn lại là bạn sẽ tạo ra các shipping zones để thiết lập phí ship cho các sản phẩm, bao gồm các sản phẩm chứa shipping class vừa tạo.

Tạo và thiết lập Shipping Zones

Để thiết lập shipping zones, bạn truy cập vào trang quản trị, tìm đến WooCommerce => Settings => Shipping và chọn Shipping Zones.

Tại đây WooCommerce sẽ tạo sẵn các khu vực cho bạn và thường là khu vực chung đại diện phí ship cho tất cả khu vực còn lại.

Bây giờ giả sử bạn muốn thiết lập phí ship đến Bà Rịa – Vũng Tàu thì bạn sẽ cần tạo một zone đại diện cho nó, bằng cách ấn vào nút Add Zone. Trong giao diện tạo zone mới, bạn sẽ cần chọn vị trí địa lý của zone này và có thể chọn nhiều vị trí tuỳ theo yêu cầu của bạn.

Sau khi nhập thông tin tên zone và vị trí, bạn sẽ cần bấm vào nút Add shipping method để thêm các phương thức vận chuyển khi vị trí người dùng thuộc zone này. Khi thêm shipping method thì sẽ có ba kiểu tính phí vận chuyển như sau:

• Free shipping: Nếu bạn muốn khách hàng trong zone này sẽ được miễn phí ship. Khi chọn kiểu này, bạn có thể đặt tuỳ chỉnh sẽ miễn phí ship khi đơn hàng có áp dụng coupon, khi tổng giá trị đơn hàng đạt mức cố định,…
• Flat rate: Áp dụng phí ship cố định cho zone này. Phần thiết lập flat rate mình sẽ diễn giải chi tiết ở phần dưới.
• Local pickup: Phương thức ship đại diện cho việc khách đến cửa hàng tự lấy.

Một shipping zones bạn có thể đặt nhiều phương thức vận chuyển khác nhau. Ví dụ bạn có phương thức free ship sẽ miễn phí ship nếu giá trị đơn hàng đạt trên 500.000 đồng, còn nếu ít hơn nó sẽ tính phí ship flat rate.

Hướng dẫn thiết lập Flat rate

Trong phần thiết lập flat rate bạn sẽ thiết lập phí ship cố định của zone trong phần Cost.

Tại phần Cost, bạn có thể nhập số tiền phí vận chuyển cho cả đơn hàng. Ngoài ra bạn cũng có thể sử dụng công thức để tính phí ship bằng cách kết hợp với các thẻ dữ liệu trong đơn hàng. Nó sẽ có các thẻ như sau:

– Số lượng sản phẩm trong đơn hàng

– Đại diện cho phần trăm của tổng giá trị đơn hàng

Ví dụ bạn muốn thu 15.000 đồng phí ship cho đơn hàng và mỗi sản phẩm phát sinh trong đơn hàng sẽ tự cộng thêm 5.000 đồng thì sẽ đặt công thức trong phần Cost như sau:

10000 + ( 5000 * [qty] )

Ở công thức trên nghĩa là mình sẽ đặt phí ship ban đầu là 10.000 và cộng thêm 5.000 đồng cho mỗi sản phẩm trong giỏ hàng. Dĩ nhiên giỏ hàng lúc nào cũng tối thiểu là 1 nên nếu chỉ có 1 sản phẩm thì nó sẽ cộng thêm 5.000 đồng để thành 15.000 đồng.

Hoặc bạn muốn đặt phí ship là 15% tổng giá trị đơn hàng thì sẽ đặt công thức là:

[fee percent="15%"]

Hoặc nếu bạn muốn thu 15% nhưng phải tối thiểu 20.000 nhưng tối đa chỉ 40.000 đồng thì sẽ đặt thêm tham số min_fee và max_fee trong công thức như sau:

[fee percent="15%" min_fee="20000" max_fee="40000]

Ở phần dưới của shipping class cost thì là phí cộng thêm cho các sản phẩm thuộc một shipping class nào đó.

Ví dụ nếu khách hàng thuộc zone Bà Rịa Vũng Tàu mua hàng thì mình sẽ thu phí ship là 25.000 đồng cho các sản phẩm thông thường, nhưng nếu mua sản phẩm được đánh dấu là “Hàng dễ vỡ” thì sẽ cộng thêm 10% phí của tổng giá trị đơn hàng thì sẽ thiết lập như hình dưới.

Khi kết hợp với shipping class, bạn cần lưu ý về tuỳ chọn Calculation type để tính phí ship cho shipping class trong trường hợp đơn hàng có các sản phẩm ở nhiều class khác nhau.

• Per class: Phí ship của shipping class sẽ tính độc lập và cộng vào tổng tiền thanh toán.
• Per order: Nếu đơn hàng có nhiều sản phẩm với shipping class khác nhau, thì khách hàng chỉ phí shipping class lớn nhất. Ví dụ bạn có 2 shipping class, phí ship lần lượt cho mỗi shipping class là 15.000 và 25.000 thì khách chỉ thanh toán 25.000 thay vì 40.000.

Khi tạo shipping zone xong bạn có thể thử nghiệm đặt hàng bằng cách tự đặt hàng và chọn khu vực cần thử nghiệm.

Nếu bạn sử dụng plugin WooCommerce Vietnam Checkout thì có thể vào trang cài đặt bật tuỳ chọn ẩn tên phương thức vận chuyển, và ẩn các phương thức vận chuyển khác nếu như đơn hàng đủ điều kiện free ship.

Kết nối tính phí ship với GHTK, GHN,…

Nếu bạn có đang liên kết sử dụng dịch vụ giao hàng của bên thứ ba như GHTK, GHN, ViettelPost,…thì lúc này sẽ cần tìm cách đồng bộ phí ship của các đơn vị này vào website để tính phí một cách chính xác nhất. Lúc này bạn sẽ không cần phải thiết lập phí ship như thao tác ở trên, mà sẽ cần một plugin nào đó để kết nối giữa website và tài khoản người bán hàng của các công ty vận chuyển này.

Dưới đây là danh sách các plugin trả phí mà bạn có thể kết nối từ WooCommerce đến các bên giao hàng để tính phí ship tự động chính xác:

• Plugin kết nối Viettel Post và WooCommerce – Lê Văn Toản
• Plugin kết nối GHN với WooCommerce – Lê Văn Toản
• Plugin kết nối GHTK với WooCommerce – Lê Văn Toản
• AfterShip Tracking – Hỗ trợ kết nối với hơn 900 công ty vận chuyển toàn cầu

Kết bài

Trong bài này bạn đã biết qua về cách thiết lập phí ship để khách hàng trả phí trong WooCommerce, cũng như nói qua về các giải pháp tính phí ship của các công ty giao hàng để đồng bộ tốt hơn. Trong bài sau, cũng là bài cuối cùng trong hướng dẫn WooCommerce mình sẽ nói qua về cách thiết lập thanh toán như thanh toán qua VietQR API, chuyển khoản ngân hàng,…

Sau khi đã thiết kế template hiển thị cho các trang liên quan đến WooCommerce bằng Elementor ở phần trước, chúng ta sẽ tiếp tục việc cài đặt thêm plugin WooCommerce Vietnam Checkout của Lê Văn Toản để thêm phần chọn địa danh cấp tỉnh, quận/huyện và phường/xã cho khách hàng lựa chọn khi đặt hàng, giúp tạo ra sự nhất quán về địa chỉ của khách hàng.

Trước tiên bạn cần cài đặt plugin tên WooCommerce Vietnam Checkout của tác giả Lê Văn Toản nhé.

Ngay khi cài đặt xong, phần thanh toán của bạn sẽ tự động ẩn đi một số trường nhập liệu không cần thiết như Quốc gia, mã bưu chính,…và bổ sung thêm phần chọn Tỉnh/thành, Quận/huyện và Phường/xã thay vì nhập liệu thủ công.

Thông tin thêm: Nếu bạn muốn hiển thị hoàn toàn bằng tiếng Việt thì chỉ cần đổi lại ngôn ngữ website WordPress tại trang Settings => General. Cả chuỗi bài viết này mình sẽ để tiếng anh vì hướng dẫn dựa trên giao diện tiếng Anh để giữ sự nhất quán.

Plugin này cũng cho phép bạn tinh chỉnh lại mà bạn có thể xem trong trang thiết lập của nó tại WooCommerce => Woo VN Checkout.

Xong rồi đó, plugin này chỉ việc cài vào và nó sẽ tự động hiển thị nên sẽ không có hướng dẫn gì thêm. Ở bài sau mình sẽ nói qua về việc thiết lập phần tính phí ship dựa theo tỉnh/thành mà khách hàng chọn.

Hướng dẫn này cần sử dụng Elementor Pro, và áp dụng cho giao diện Elementor tự thiết kế theo hướng dẫn Elementor phần 1 và phần 2.

Bạn hãy nhớ lại ở bước ban đầu cài đặt WooCommerce, website sẽ tự động tạo ra các trang sử dụng cho plugin này bao gồm các trang như Shop, Cart, Checkout,…Các trang này hiện nay được thiết kế bằng Block Editor, nên một số trường hợp bạn không sử dụng Block Editor thì sẽ bị lỗi hiển thị hoặc thành phần hiển thị ra không đồng nhất với thiết kế của website.

Dĩ nhiên nếu bạn sử dụng các theme trả phí dành riêng cho WooCommerce thì các trang này được thiết kế sẵn rất đẹp. Nhưng nếu bạn đang sử dụng Elementor và tự thiết kế theo hướng dẫn của chuỗi bài học này thì sẽ hiển thị bị lỗi.

Vậy tóm lại, trong bài này mình sẽ mô tả qua những thao tác để thiết kế lại các trang này bằng Elementor để nó hiển thị đẹp và theo mong muốn của mình hơn.

Thiết kế trang “Shop” với Elementor

Đầu tiên chúng ta tiến hành tạo một Page mới tại Pages => Add New Page và đặt tên phù hợp, ví dụ như tên “Sản Phẩm”, nội dung bạn để trống. Sau đó ấn vào nút Edit with Elementor để bắt đầu chỉnh sửa.

Khi thiết kế, bạn có thể áp dụng cách chia bố cục website thành 2 cột nhanh bằng cách chọn sẵn bố cục này khi thêm một container mới. Mục đích là ta sẽ để cột nhỏ bên trái hiển thị các tính năng lọc sản phẩm.

Xây dựng khu vực hiển thị sản phẩm (cột phải)

Sau khi chia bố cục xong, thì dĩ nhiên chúng ta sẽ dành cột to nhất để hiển thị các sản phẩm. Chúng ta đang xây dựng trang tên “Sản Phẩm” nghĩa là sẽ muốn nó hiển thị toàn bộ sản phẩm ở khu vực này, có thể phân trang nếu có nhiều sản phẩm, khi người dùng cần tìm sản phẩm theo bộ lọc thì thao tác ở cột bên trái (sẽ làm ở phần sau).

Về quy tắc kỹ thuật, chúng ta sẽ xây dựng một truy vấn để hiển thị các sản phẩm ra trang này. Trong Elementor, bạn có thể chèn widget tên Products để hiển thị các sản phẩm theo bố cục mặc định của WooCommerce, hoặc nếu muốn khả năng tuỳ biến cao hơn thì sử dụng widget tên Grid Loop (trong bài về thiết kế Elementor mình đã hướng dẫn).

Ở đây, mình sẽ sử dụng widget Loop Grid để tuỳ biến hiển thị tốt hơn.

Sau khi thêm widget Loop Grid vào khu vực cần hiển thị, bạn thiết lập lại loại post type template cần sử dụng cho nó, ở đây chúng ta sẽ chọn Products để hiển thị dữ liệu liên quan tới sản phẩm trong WooCommerce.

Và nếu bạn có nhiều sản phẩm thì hãy nhớ thiết lập phân trang ở phần Pagination trong widget này. Bạn có thể chọn kiểu phân trang nào đó mà bạn muốn dùng.

Bây giờ chúng ta sẽ tiến hành tạo template hiển thị từng sản phẩm ra ngoài trang này trong widget Loop Grid. Bấm vào nút Create a template ở giao diện của widget này.

Và việc của chúng ta bây giờ là thêm các widget cần thiết để hiển thị thông tin của một sản phẩm như:

• Featured Image (ảnh đại diện cho sản phẩm): Chọn kích thước vừa phải, khoảng 300×300.
• Product Title (hiển thị tên sản phẩm): HTML Tag chọn là p, phần Link thì chèn dynamic tag là Post URL. Qua mục Style cho chữ in đậm lên, kích thước điều chỉnh từ 18px đến 20px là đẹp.
• Product Price (hiển thị giá sản phẩm): Bạn có thể chọn màu sắc hiển thị giá sản phẩm mà bạn muốn, nếu bạn có sản phẩm đang giảm giá thì có thể chọn màu sắc của giá đang giảm để làm nổi bật nó lên.
• Add To Cart (nút thêm vào giỏ hàng): Bạn có thể tự trang trí lại nút này để hiển thị đồng nhất trong website, có thể vào phần Quantity trong tuỳ chọn widget này tắt tính năng chọn số lượng kế bên nút thêm vào giỏ hàng nếu không cần hiển thị. Nếu muốn nút hiển thị ra giữa khung thì vào mục Button chọn Alignment là Center.

Đại loại template ta sẽ thêm vào như sau:

Cuối cùng nếu bạn muốn từng sản phẩm hiển thị ra có điểm nhấn một chút thì tuỳ chỉnh lại container hiển thị sản phẩm bằng cách ấn vào nút sửa container của nó như hình dưới.

Sau đó thiết lập màu nền (#FAFAFA), viền 1px với màu #F5F5F5, border radius cho 4 4 4 4. Nếu bạn muốn có thêm hiệu ứng nổi bật sản phẩm lên một chút khi rê chuột vào thì ở phần Border, bạn chọn qua mục Hover và thêm hiệu ứng box shadow vào cho nó là được.

Bạn có thể sẽ cần thêm một chút padding cho container này là 5 5 5 5 trong phần Advanced.

Tổng thể cuối cùng ta có phần hiển thị sản phẩm như thế này, trông khá ổn đúng không.

Sau khi đã hoàn tất trang “Sản phẩm” thì bạn sẽ cần thiết lập cho WooCommerce luôn nhớ trang này là trang hiển thị tất cả sản phẩm, thay vì sử dụng trang mặc định tạo sẵn. Bạn truy cập vào trang quản trị, vào WooCommerce => Settings, chọn tab Products và sửa lại Shop page.

Thêm bộ lọc sản phẩm cho Elementor

Thành quả ở trên ta đã hoàn thiện phần sản phẩm bên tay phải, nhưng tay trái còn hơi trống và đó là vị trí mà chúng ta đã chừa ra để hiển thị các thông tin khác như bộ lọc sản phẩm, banner khuyến mãi gì đó,…

Mặc định Elementor không có widget hỗ trợ chèn phần lọc sản phẩm vào mà phải sử dụng thêm plugin hỗ trợ. Trong hướng dẫn này thì mình sẽ sử dụng plugin miễn phí tên Product Filter by WBW rất dễ dùng, đủ tính năng cần thiết.

Sau khi cài plugin xong, bạn truy cập mục WBW Product Filter => Add New Filter để tạo một filter mới.

Sau đó bạn đặt tên để nhận biết filter, đồng thời đánh dấu vào những tính năng cho phép người dùng sử dụng để filter.

Sau khi tạo xong nó sẽ chuyển hướng đến trang thiết lập filter vừa tạo ra. Nếu muốn thì có thể xem thêm các thiết lập của từng loại bộ lọc trong này để tuỳ biến lại. Trường hợp bạn muốn filter theo thuộc tính thì phải chọn nó trong cài đặt của filter.

Bây giờ bạn có thể quay lại giao diện chỉnh sửa trang Sản phẩm trên Elementor và chèn widget tên Woofilter vào cột trái. Sau đó chọn bộ filter bạn vừa tạo ra.

Thêm giỏ hàng vào header

Website bán hàng mà chưa có cái giỏ hàng thì hơi sai sai. Chúng ta tiến hành sửa header đang sử dụng trên cả website, bằng cách chọn sửa template header nhanh trên thanh công cụ admin.

Việc còn lại là bạn chèn widget tên Menu Cart vào khu vực cần hiển thị. Còn lại bạn tự do tuỳ chỉnh style theo ý mình. Kết quả

Nếu bạn có thấy giao diện giỏ hàng khi nhấp vào hiển thị bị lỗi thì không sao nhé, bạn hãy lưu lại và xem thử ở bên ngoài sẽ đẹp hơn. Kết quả ta đã có nút xem giỏ hàng trên menu khá chỉnh chu.

Thiết kế trang “Giỏ hàng”với Elementor

Mặc định trang giỏ hàng (Cart) tạo sẵn của WooCommerce lúc mới cài plugin sẽ sử dụng Block Editor để thiết kế. Việc này có thể tiện lợi với những website đang dùng Block Editor nhưng nó sẽ gây lỗi hiển thị và có thể sẽ không tương thích với một số plugin hỗ trợ cho WooCommerce.

Vì vậy trong phần này chúng ta sẽ tạo một trang giỏ hàng khác bằng Elementor. Trước tiên bạn sẽ cần xoá đi trang giỏ hàng mặc định để tránh nhầm lẫn.

Và vào add new page để tạo một trang mới đặt tên là Giỏ hàng và bắt đầu chỉnh sửa với Elementor.

Lúc này, bạn chỉ cần thả cái widget tên Cart vào nội dung là có ngay một trang giỏ hàng, với rất nhiều tuỳ chỉnh. Các tuỳ chỉnh này bạn tự thao tác thử nhé chứ nói cũng hơi dài.

Sau khi tạo trang giỏ hàng xong, bạn phải thiết lập cho WooCommerce sử dụng trang này làm trang giỏ hàng bằng cách vào WooCommerce => Settings, chọn tab Advanced.

Thiết kế trang “Thanh toán” với Elementor

Tương tự như thao tác tạo trang giỏ hàng, bạn cũng cần xoá trang Thanh toán (Checkout) mặc định mà WooCommerce tạo ra, sau đó tạo một trang thanh toán mới, chọn Edit with Elementor và kéo widget tên Checkout vào là có ngay trang thanh toán.

Bạn đừng vội tuỳ chỉnh lại trang thanh toán này để phù hợp với khách hàng Việt Nam. Bạn chỉ cần cài plugin WooCommerce Vietnam Checkout của Lê Văn Toản vào là trang thanh toán này tự động được sửa lại cách hiển thị, phần này mình sẽ hướng dẫn ở bài sau.

Sau khi tạo xong trang Thanh toán thì bạn cũng phải cài đặt WooCommerce sử dụng nó tại WooCommerce => Settings => Advanced.

Tương tự với các thao tác trên, bạn có thể tạo trang My Account mới, chèn widget My Account vào và thiết lập trong WooCommerce để sử dụng nó.

Thiết kế template hiển thị sản phẩm

Mặc định WooCommerce hiển thị sản phẩm cũng khá chuyên nghiệp và đầy đủ các thông tin như hình ảnh bên dưới. Nhưng bạn sẽ không thể tuỳ biến lại được những bố cục hiển thị ở đây trừ khi bạn tự tạo một template hiển thị cho sản phẩm theo ý mình.

Nếu bạn gặp lỗi: Nếu bạn đang thực hành theo chuỗi bài viết Học WordPress Tinh Gọn nhưng bị lỗi không hiển thị sản phẩm chi tiết, thì có thể bạn đang bị xung đột với template Single Post đã thiết kế trước đó đang áp dụng cho cả sản phẩm. Bạn có thể sửa bằng cách đảm bảo điều kiện hiển thị của template đó chỉ áp dụng với Posts. Kiểm tra tại Templates => Theme Builder => Single Post và ấn nút Edit Conditions để chỉ hiển thị với Posts.

May mắn thay trong Elementor Pro, chúng ta có thể dễ dàng tuỳ biến lại cách hiển thị của sản phẩm ra ngoài website, bằng cách sử dụng tính năng Theme Builder và thiết kế cho template Single Product để có thể tuỳ biến lại cách hiển thị.

Bạn tiến hành truy cập vào Templates => Theme Builder và chọn thêm mới một template trong phần Single Product.

Và nhớ chọn điều kiện hiển thị của nó là Products.

Để tiện thiết kế, bạn cũng nhớ sử dụng tính năng Preview Content để tuỳ chọn nội dung hiển thị xem trước trong lúc thiết kế.

Chúng ta bắt đầu đi vào việc chi tiết thiết kế template hiển thị sản phẩm thôi.

Trong đây bạn sẽ thực hiện chia bố cục hiển thị như mong muốn, sau đó chèn các widget như sau:

• Product Title: Hiển thị tên sản phẩm
• Product Images: Hiển thị ảnh đại diện và các ảnh gallery của sản phẩm bên dưới (nếu có)
• Product Price: Giá sản phẩm
• Short Description: Mô tả ngắn
• Product Meta: Hiển thị tên category, tag và mã SKU của sản phẩm
• Product Rating: Số lượt đánh giá sản phẩm
• Product Content: Mô tả chi tiết của sản phẩm
• WooCommerce Breadcrumbs: Thanh điều hướng breadcrumb cho sản phẩm
• Additional Information: Hiển thị các thông tin thêm của sản phẩm
• Product Data Tabs: Phần hiển thị mô tả chi tiết, additional information, reviews theo dạng tab như mặc định

Về chi tiết các bước thiết kế thì bạn vui lòng xem video hướng dẫn của bài này. Dưới đây là bố cục sau khi hoàn thiện của mình:

Ở hình trên nếu bạn chưa biết thì mình hiển thị phần thông số sản phẩm và giới thiệu sản phẩm bằng widget Accordion mặc định của Elementor, sau đó bên trong mỗi item bên trong mình chèn widget Additional Information và Product Content vào. Mặc định Elementor không có widget hiển thị danh sách reviews của khách hàng nên mình cũng tạm không cho hiển thị phần này.

Sau khi hoàn tất và publish template này thì hãy ra ngoài website tận hưởng thành quả nhé.

Tạo template cho Product Archive

Phần này sẽ thiết kế trang hiển thị cho sản phẩm khi vào xem nội dung chi tiết của danh mục sản phẩm, product tag và kết quả tìm kiếm sản phẩm.

Bạn có thể tạo template cho trang này tại mục Templates => Theme Builder => Product Archive. Bạn có thể tự thiết kế lại bố cục hiển thị theo ý muốn, vẫn sử dụng Loop Grid giống như khi thiết kế trang Sản phẩm ở đầu bài, nhưng nhớ tuỳ chỉnh query về là Current Query nhé.

Khi xuất bản thì nhớ chọn áp dụng cho tất cả trang lưu trữ cho sản phẩm, còn nếu bạn siêng thì tạo nhiều template cho từng phần cũng được .

Kết bài

Nếu bạn đang tìm câu trả lời làm thế nào để có thể tự thiết kế giao diện hiển thị website bán hàng trên WordPress sử dụng WooCommerce, thì các hướng dẫn trong bài mình đã trình bày ở trên đã đủ để bạn có thể tuỳ ý biến tấu giao diện trang bán hàng của mình với Elementor Pro rồi.

Tiếp theo bài sau mình sẽ có một hướng dẫn ngắn về việc thêm tính năng chọn tỉnh thành vào website thông qua plugin WooCommerce Vietnam Checkout, ngoài ra nó cũng giúp tối ưu hiển thị một số thành phần trong website phù hợp hơn với thói quen sử dụng của người Việt Nam.

Để tìm hiểu về WooCommerce theo lộ trình tốt hơn, mình nghĩ rằng ngay khi cài đặt xong thì việc nên làm tiếp theo là tìm hiểu ngay phần quản lý sản phẩm của WooCommerce, và cần biết xem WooCommerce cho phép chúng ta đăng các loại sản phẩm nào vì biết đâu được bạn sẽ có câu trả lời cho thắc mắc của bạn ở đây.

Các loại sản phẩm trong WooCommerce

Trước khi bắt đầu thêm sản phẩm đầu tiên lên website, mình cần nói qua một chút về những loại sản phẩm mà bạn có thể đăng lên website sử dụng WooCommerce, và hầu hết những loại sản phẩm ở đây đều đáp ứng được các nhu cầu sử dụng hiện tại.

Hiện nay với WooCommerce bạn có thể đăng các loại sản phẩm như sau:

• Sản phẩm đơn giản (Simple Product): Là loại sản phẩm thông thường mà các bạn hay thấy, sản phẩm này sẽ bao gồm thiết lập giá, kích thước và cân nặng để tính phí vận chuyển, các thuộc tính nhưng không hỗ trợ giá cho từng thuộc tính.
  • Trong sản phẩm đơn giản thì sẽ có tuỳ chọn thêm hai kiểu sản phẩm khác bao gồm Virtual (sản phẩm ảo) và Downloadable (sản phẩm có thể tải về được) dành cho các website bán sản phẩm kỹ thuật số mà người dùng sẽ được tải về máy sau khi thanh toán xong (ví dụ như các phần mềm). Các loại sản phẩm này sẽ không cần thiết lập vận chuyển. Nếu không chọn các tuỳ chọn này thì sản phẩm là thông thường.
• Groupped Product (sản phẩm theo nhóm, hoặc combo): Loại sản phẩm này sẽ thực hiện liên kết tới nhiều sản phẩm khác đã đăng trên website và khách hàng có thể chọn số lượng của từng sản phẩm được liên kết để thêm vào giỏ hàng. Phù hợp nếu bạn muốn đăng bán sản phẩm theo combo hoặc gợi ý khách mua theo nhóm.
• External/Affiliate product (sản phẩm tiếp thị liên kết hoặc liên kết ngoài): Sản phẩm này sẽ hiển thị thông tin và mô tả của sản phẩm như thông thường, nhưng nó sẽ không thêm sản phẩm vào giỏ hàng khi ấn vào nút mua mà sẽ mở một liên kết ra bên ngoài website khác. Phù hợp cho các website kiếm tiền bằng tiếp thị liên kết, hoặc các shop muốn dẫn link đến sản phẩm trên các sàn thương mại điện tử, ví dụ như website này.
• Variable Product (sản phẩm có biến thể): Trong phần thiết lập sản phẩm thông thường, bạn có thể thêm các thuộc tính sản phẩm. Ví dụ nếu bạn xem sản phẩm trên thegioididong.com thì sẽ thấy các thông số kỹ thuật của sản phẩm hiển thị ra bên dưới, đó là thuộc tính của sản phẩm. Thế nhưng nếu bạn chọn sản phẩm là loại có biến thể, thì có thể cho phép thiết lập giá, hình ảnh đại diện riêng cho từng biến thể. Loại sản phẩm này khá thông dụng hiện nay, ví dụ như khi khách mua hàng bạn có thể thiết lập cho khách chọn kích cỡ quần áo, màu sắc sản phẩm,…được gọi là các biến thể, và có thể tính giá thêm cho từng biến thể đó hoặc không.

Để thêm một sản phẩm, bạn sẽ cần truy cập vào trang quản trị, vào phần Products => Add New.

Trong đây bạn lưu ý các thông tin mà sẽ cần khai báo trên bất kỳ loại sản phẩm nào bao gồm:

• Product description (Mô tả sản phẩm): Đây là nội dung mô tả chi tiết trong trang sản phẩm, bạn có thể thực hiện viết bài mô tả chi tiết đầy đủ thông tin, có hình ảnh để tốt cho SEO.
• Product short description (Mô tả ngắn cho sản phẩm): Ngoài mô tả chi tiết ở trên, bạn có thể viết một đoạn mô tả ngắn gọn về sản phẩm, không cần chèn ảnh và nó sẽ hiển thị ngay bên trên giá sản phẩm ở website.
• Product Image: Một tấm ảnh đại diện cho sản phẩm
• Product gallery: Tập hợp các hình ảnh khác của sản phẩm và nó sẽ hiển thị ở bên dưới tấm ảnh đại diện của sản phẩm.
• Product categories: Danh mục sản phẩm, được sử dụng để phân loại sản phẩm.
• Product tags: Thẻ sản phẩm, được sử dụng để phân loại sản phẩm. Nếu website có ít sản phẩm thì có thể không cần phân loại theo tag.

Thêm sản phẩm đơn giản

Để thêm một sản phẩm đơn giản, bạn chọn loại sản phẩm là Simple product tại khung thiết lập dữ liệu cho sản phẩm.

Khi chọn loại sản phẩm này, nếu bạn muốn thêm các sản phẩm ảo hoặc có thể tải về được thì nhấp nút chọn là Virtual hoặc Downloadable hoặc có thể chọn cả hai nếu muốn. Với trường hợp chọn sản phẩm Downloadable thì bạn sẽ cần tải lên tập tin mà người dùng sẽ được phép tải về máy sau khi hoàn tất thanh toán.

Trong phần nhập thông tin sản phẩm đơn giản sẽ có các thông tin cần nhập như sau:

• General: Thiết lập chung, bao gồm thiết lập giá bình thường, giá đang ưu đãi (nếu có), tập tin tải về (đối với sản phẩm kiểu Downloadable).
• Inventory: Sử dụng nếu bạn đang muốn đồng bộ số lượng sản phẩm trong kho nếu bạn đang sử dụng một phần mềm nào đó để quản lý kho. Bạn cũng có thể lập trình thêm tính năng tự đồng bộ số lượng sản phẩm trong kho và kết nối nó vào WooCommerce. Trong đây bạn cũng có thể thiết lập số lượng sản phẩm đang còn trong kho thủ công, hoặc thiết lập trạng thái tồn kho của nó để hiển thị ra ngoài website.
• Shipping: Thiết lập thông tin sản phẩm mà có thể ảnh hưởng đến phí ship, bao gồm cân nặng và kích thước của sản phẩm đó. Cái này sẽ rất hữu ích nếu bạn kết nối WooCommere với các dịch vụ giao hàng như GHTK, GHN,…và nó sẽ tự tính phí ship dựa trên thông tin ở đây.
• Linked Products: Tuỳ chọn thêm sản phẩm bán thêm (upsells) hay bán chéo (cross-sells). Sản phẩm upsells sẽ được gợi ý ở trang thông tin chi tiết sản phẩm. Còn sản phẩm cross-sells sẽ được hiển thị gợi ý khi khách hàng xem giỏ hàng hoặc thanh toán.
• Attributes: Thiết lập thuộc tính sản phẩm để hiển thị cũng như giúp người dùng có thể lọc sản phẩm theo thuộc tính. Thuộc tính có thể được xem như là một mô tả ngắn gọn đặc tính của sản phẩm đó, và sẽ được tái sử dụng trên nhiều sản phẩm khác nhau. Mình có phần hướng dẫn riêng về thuộc tính sản phẩm ở bên dưới để giải thích rõ hơn.
• Advanced: Một số tuỳ chọn nâng cao như ghi chú hiển thị ra sau khi khách mua hàng, cho phép review sản phẩm,…
• Get more options: Quảng cáo một số plugin mở rộng cho WooCommerce để có nhiều tính năng thiết lập sản phẩm hơn.

Thêm sản phẩm liên kết ngoài/affiliate

Đối với các sản phẩm có liên kết trỏ ra bên ngoài thì việc thêm sản phẩm cũng có các tuỳ chọn như sản phẩm đơn giản, nhưng bạn sẽ cần khai báo thêm liên kết của sản phẩm đó ở bên ngoài, và không thể thiết lập được thông tin liên quan tới vận chuyển.

Khi hiển thị ra website thì nó vẫn hiển thị gần như sản phẩm đơn giản, nhưng tiêu đề của nút có thể sửa lại được.

Cách thêm thuộc tính vào sản phẩm

Thuộc tính sản phẩm trong WooCommerce là một loại thông tin mà người dùng có thể tìm kiếm, sử dụng bộ lọc và hiển thị ra bên ngoài. Hầu hết các sản phẩm đều có thuộc tính nào đó mà việc tận dụng tốt tính năng này giúp việc tìm kiếm sản phẩm nhanh và khoa học hơn. Ví dụ một số thuộc tính bạn có thể thường xuyên bắt gặp khi đi mua hàng online như Chất liệu, Thương hiệu, Thời gian bảo hành,…hay một số sản phẩm đặc thù có các thuộc tính khác nhau, ví dụ điện thoại thì có các thuộc tính Hệ điều hành, RAM, Loại CPU,…

Khi thêm sản phẩm, bạn có thể tiến hành thêm thuộc tính sản phẩm nhanh bằng cách thiết lập trong trang Attributes ở trang nhập liệu sản phẩm. Có thể khai báo tên thuộc tính nhanh và các giá trị thuộc tính. Chúng ta sẽ nhập thuộc tính và giá trị của nó, nếu có nhiều giá trị thì mỗi giá trị sẽ cách nhau bằng ký tự | (nút bên phải nút ký tự }).

Khi thêm thuộc tính, mặc định nó sẽ hiển thị ở phần Thông tin bổ sung (Additional Information) trên website trong trang hiển thị sản phẩm đó.

Tái sử dụng thuộc tính

Trường hợp nếu website bạn có nhiều sản phẩm và cần hiển thị một cách nhất quán, bạn có thể khai báo sẵn các thuộc tính vào dữ liệu và tái sử dụng khi cần. WooCommerce cung cấp giao diện quản lý các thuộc tính cố định tại trang Products => Attributes.

Khi truy cập vào đây bạn có thể tiến hành tạo ra các thuộc tính mà cần sử dụng lại nhiều lần. Như hình dưới là mình sẽ tạo một thuộc tính tên Thương hiệu. Khi tạo nếu bạn đánh dấu vào bật lưu trữ (Enable Archive) thì thuộc tính này cũng sẽ có trang lưu trữ riêng để phân loại các sản phẩm đang sử dụng chung thuộc tính này.

Khi tạo ra thuộc tính xong, bạn cũng sẽ phải khai báo các giá trị cho thuộc tính đó, bằng cách ấn vào nút Configure terms trên thuộc tính này để bắt đầu khai báo các giá trị cần sử dụng.

Và bắt đầu tạo ra các giá trị các thuộc tính thôi.

Sau khi đã tạo xong các thuộc tính cần sử dụng, khi nhập liệu sản phẩm thì chỉ cần chọn thuộc tính có sẵn trong danh sách và chọn giá trị sử dụng tương ứng.

Thêm sản phẩm có biến thể

Sản phẩm có biến thể là sản phẩm có chứa các thuộc tính cho phép khách hàng lựa chọn khi đặt hàng, bạn có thể thiết lập giá riêng cho từng biến thể và hình ảnh hiển thị riêng.

Điểm đặc biệt của loại sản phẩm này là bạn không đặt giá mặc định cho sản phẩm, mà phải thiết lập từng giá riêng cho từng biến thể, và chọn một biến thể hiển thị mặc định.

Để cấu hình sản phẩm có biến thể, bạn chọn loại dữ liệu sản phẩm là Variable product.

Sau đó bạn phải bắt buộc thêm các thuộc tính vào sản phẩm, ví dụ bạn muốn biến thể chọn màu sắc, thì bạn phải vào mục Attributes để thêm một thuộc tính là Màu sắc và các giá trị cần sử dụng cho nó. Trường hợp bạn muốn chọn nhiều biến thể (ví dụ như mua iPhone thì sẽ cần chọn màu sắc và phiên bản dung lượng 256GB, 512GB,…) thì bạn cũng phải tạo nhiều thuộc tính.

Có thể tự nhập thuộc tính hoặc sử dụng thuộc tính đã khai báo sẵn như hướng dẫn ở trên.

Với các thuộc tính muốn sử dụng cho biến thể, thì bạn phải đánh dấu vào ô Used for variations của thuộc tính đó. Ví dụ như bên dưới là mình sẽ có hai biến thể chọn màu sắc và dung lượng. Thao tác thuộc tính xong nhớ ấn nút Save attributes để lưu lại.

Sau khi khai báo thuộc tính xong, bạn chuyển qua mục Variations để bắt đầu tạo các biến thể. Tại đây bạn có thể ấn vào nút Generate variations để tự động tạo biến thể nhanh dựa trên tất cả các thuộc tính có đánh dấu Used for variations mà bạn đang có.

Trong các biến thể tạo ra tự động, nó sẽ tạo ra từng biến thể cho từng giá trị thuộc tính. Nếu sản phẩm bạn có nhiều biến thể, nó sẽ tự động tạo biến thể để đảm bảo khách hàng luôn có thể chọn xen kẽ các biến thể với nhau, ví dụ chọn iPhone màu Titan với dung lượng 512GB. Như vậy bạn có thể tuỳ chọn đặt giá khác nhau cho mỗi biến thể, ví dụ màu Titan dung lượng 1TB sẽ giá cao hơn với màu Xanh dung lượng 1TB chẳng hạn.

Trừ trường hợp bạn có quá nhiều biến thể mà không có sự khác nhau về giá thì bạn có thể linh hoạt chọn giá trị là Any…Ví dụ như ảnh dưới đây biến thể màu Xanh có thể áp dụng chung cho bất kỳ dung lượng nào mà không tạo ra các biến thể khác nếu như không có sự khác biệt về giá hoặc hình ảnh.

Bây giờ nếu bạn nhấp vào thông tin chi tiết của từng biến thể thì bạn có thể khai báo lại mã kho, giá, hình ảnh cho biến thể đó, vận chuyển,…rất linh hoạt phải không nào. Lưu ý rằng bạn phải luôn khai báo giá cho từng biến thể dù nó không có sự khác nhau.

Trường hợp nếu sản phẩm của bạn có nhiều biến thể với giá khác nhau thì ở website nó sẽ hiển thị giá thấp nhất và cao nhất của các biến thể của sản phẩm này.

Và lưu ý cuối cùng là bạn nên chọn biến thể mặc định sẽ được chọn khi khách hàng vào xem, bằng cách thiết lập biến thể hiển thị mặc định, có thể chọn một hoặc nhiều biến thể mặc định.

Hiển thị biến thể màu sắc, hình ảnh

Mặc định WooCommerce sẽ hiển thị tuỳ chọn biến thể chỉ bằng một kiểu. Nếu bạn muốn hiển thị các biến thể theo nhiều cách khác nhau như hiển thị màu cho biến thể màu sắc, hay hiển thị hình ảnh lên biến thể thì sẽ cần sử dụng plugin hỗ trợ.

Hiện nay có rất nhiều plugin từ đơn giản đến phức tạp cho mục đích làm đẹp biến thể, nhưng bạn. cóthể sử dụng plugin miễn phí tên Variation Swatches for WooCommerce của tác giả tên Emran Ahmed vì mình thấy plugin này đủ tính năng cần thiết ở bản miễn phí, dễ sử dụng.

Sau khi cài đặt plugin này xong, bạn vào mục Products => Attributes để sửa lại các thuộc tính của bạn hoặc tạo mới, và chọn Type là loại thuộc tính cần hiển thị.

Sau đó bạn cũng vào Configure terms của thuộc tính này và tạo ra các giá trị sẵn, hoặc sửa lại giá trị đang có. Tuỳ theo từng loại biến thể bạn chọn ở trên, thì giao diện sửa giá trị thuộc tính sẽ có thêm tuỳ chọn thiết lập kiểu hiển thị ra bên ngoài.

Như vậy là xong rồi đó, bây giờ bạn thiết lập sản phẩm có biến thể của bạn và sử dụng thuộc tính đã tạo sẵn ra ở đây là được.

Kết bài

Sau khi đã làm quen với các thao tác thêm sản phẩm vào WooCommerce, bước tiếp theo là chúng ta sẽ cần xem các sản phẩm này sẽ hiển thị ra ngoài website như thế nào. Vì vậy tiếp tục ở bài sau mình sẽ bắt đầu một số hướng dẫn về việc tuỳ biến lại giao diện hiển thị trang liên quan đến WooCommerce trong Elementor, bao gồm thiết kế lại trang Shop để hiển thị sản phẩm, tuỳ biến lại trang thanh toán,….

Khoảng 7 năm trước mình có viết một serie bài viết về hướng dẫn WooCommerce và được chia thành rất nhiều phần với hướng dẫn chi tiết khác nhau. Tuy nhiên trong lần cập nhật sửa đổi nội dung vào năm 2024, mình sẽ tích hợp phần hướng dẫn WooCommerce vào chuỗi bài viết Học WordPress Tinh Gọn 2024 nhằm đơn giản hoá nội dung nhưng vẫn sẽ đảm bảo cập nhật đầy đủ các kiến thức cần thiết cho người sử dụng cơ bản.

Trong phần hướng dẫn về WooCommerce này mình sẽ hướng các bạn sử dụng chung WooCommerce với Elementor, từ chính giao diện blog mà chúng ta đã thiết kế phần trước. Nếu bạn không sử dụng Elementor thì cũng không sao, có thể bỏ qua các bài liên quan đến thiết kế giao diện.

Giới thiệu về WooCommerce là gì?

WooCommerce bản chất là một plugin được cài vào website WordPress để bổ sung một loạt các tính năng liên quan đến làm website bán hàng như quản lý sản phẩm, quản lý đơn hàng, tính năng giỏ hàng và đặt hàng, tích hợp thanh toán,…mà vốn dĩ WordPress không có sẵn. Hiện tại WooCommerce đã được Automattic (công ty đứng sau WordPress) sở hữu lại và phát triển đến ngày nay, đang được hàng triệu website sử dụng.

Nếu như bạn đã từng nghe nói đến việc sử dụng mã nguồn WordPress để làm trang bán hàng thì 99% là dùng plugin này, 1% còn lại là tự viết plugin riêng với tính năng hiển thị sản phẩm đơn giản và một form đặt hàng.

Cũng có rất nhiều tranh cãi nói rằng sử dụng WordPress làm trang bán hàng có thể sẽ không phù hợp hơn là việc dùng một mã nguồn chuyên cho nó như Magento, hay các dịch vụ dễ dùng hơn như Spotify hay Haravan. Nhưng mà mình thấy dùng WooCommerce vẫn tốt với các lý do như:

• Phù hợp cho các trang bán hàng nhỏ và vừa, số lượng sản phẩm từ vài chục đến 1k, 2k là vô tư.
• Dễ dàng tiếp cận và sử dụng (hơn Magento ở điểm này).
• Tự do tuỳ biến và tự quản lý dữ liệu (hơn Spotify và Haravan điểm này).
• Nhiều theme và plugin hỗ trợ.
• Đã có tích hợp chọn tỉnh thành Việt Nam, tích hợp với các cổng thanh toán tự động ở Việt Nam đầy đủ. Xem thêm plugin của Lê Văn Toản.

Thiết lập gửi mail trong WordPress

Trước khi bắt đầu sử dụng WooCommerce làm website bán hàng, bạn cần đảm bảo website WordPress của bạn có thể gửi email ra ngoài, vì WooCommerce đi kèm với tính năng gửi thông báo cho người mua hàng lẫn chủ website khi có đơn đặt hàng.

Nếu website của bạn là mới và chưa thiết lập gửi mail, hãy tham khảo qua bài viết Hướng dẫn thiết lập gửi mail với SMTP của Google/Gmail của mình nhé.

Các bước cài đặt WooCommerce

Nếu bạn đã theo chuỗi học WordPress của mình ngay từ đầu, thì mình khuyến khích bạn nên backup lại website bằng UpdraftPlus trước khi làm việc với WooCommerce, để có thể khôi phục lại trạng thái website khi chưa cài WooCommerce nếu cần thiết.

Cũng như các bước cài đặt plugin khác, chúng ta tìm plugin tên WooCommerce trên thư viện và cài đặt nó.

Khi kích hoạt lần đầu tiên, nó sẽ có giao diện thiết lập thế này, ở đây bạn có thể ấn skip đi vì các thông tin này ta sẽ thiết lập sau.

Cuối cùng là bạn chọn quốc gia hiện tại của cửa hàng và kết thúc quá trình cài đặt.

Thiết lập WooCommerce cơ bản

Tuỳ chỉnh lại cấu trúc đường dẫn tĩnh (permalink)

Đầu tiên bạn sẽ cần kiểm tra lại cấu trúc đường dẫn tĩnh của website xem đã bật lên chưa, và có thể tuỳ chỉnh lại cấu trúc đường dẫn của sản phẩm hoặc danh mục của sản phẩm lại cho phù hợp.

Để kiểm tra tuỳ chọn này, bạn truy cập vào trang quản trị, tìm Settings => Permalinks và kiểm tra đường dẫn tĩnh đã được bật lên.

Bạn kéo xuống dưới sẽ có phần tuỳ chọn Optinal có thiết lập:

• Product category base: Thiết lập cấu trúc đường dẫn cơ sở cho trang danh mục sản phẩm. Mặc định nó sẽ sử dụng tên product-category trên đường dẫn của trang danh mục sản phẩm (ví dụ đường dẫn đầy đủ là domain.ltd/product-category/ao-thun/, bạn có thể thay đổi tên đường dẫn cơ sở thành loai-san-pham để thay thành domain.ltd/loai-san-pham/ao-thun/.
• Product tag base: Tuỳ chỉnh lại đường dẫn cơ sở của trang thẻ sản phẩm.
• Product attribute base: Tuỳ chọn đường dẫn cơ sở cho các thuộc tính sản phẩm. Có thể bỏ trống như mặc định.

Kế tiếp bạn sẽ có phần thiết lập Product permalinks tức là cấu trúc đường dẫn tĩnh dẫn tới các sản phẩm trong website.

Mặc định WooCommerce sẽ sử dụng cấu trúc mặc định cho các trang sản phẩm sẽ là dạng domain.ltd/product/ten-san-pham/. Tuy nhiên bạn có thể cấu hình lại bằng cách chọn cấu trúc họ gợi ý sẵn, hoặc bạn chọn Custom base và chọn sử dụng các cấu trúc như dưới đây:

domain.ltd/san-pham/ten-danh-muc/ten-san-pham/

/san-pham/%product_cat%/

domain.ltd/san-pham/ten-san-pham/

/san-pham/

Chọn xong nhớ nút lưu lại nhé.

Thiết lập địa chỉ cửa hàng, quốc gia muốn bán hàng

Trước tiên để một số tính năng sau này hoạt động chính xác, bạn nên thiết lập ghi địa chỉ của cửa hàng/công ty vào website. Bạn truy cập vào WooCommerce => Settings, chọn mục General và tìm phần Store Address.

Tại đây bạn sẽ nhập địa chỉ (chỉ nên dùng Address 1 cho cả địa chỉ trừ cấp Tỉnh/thành và quốc gia). Bạn yên tâm ở các bài sau sẽ có phần thêm tuỳ chọn Tỉnh/thành của Việt Nam vào đây.

Kế tiếp là bạn để ý mục Selling location(s) và Shipping location(s) là tuỳ chọn để chỉ nhận bán và giao hàng tới một hoặc nhiều quốc gia cụ thể. Nếu như bạn dự định chỉ bán hàng ở Việt Nam thôi thì tuỳ chọn như bên dưới.

Các trang (page) mặc định của WooCommerce

Khi cài đặt WooCommerce thì nó sẽ tự động tạo thêm một số Page mặc định để hiển thị các nội dung liên quan, để xem các trang này bạn có thể tìm tại mục Pages => All Pages. Nó sẽ bao gồm các page:

• Shop: Trang hiển thị toàn bộ sản phẩm.
• Cart: Trang hiển thị giỏ hàng.
• Checkout: Trang thanh toán.
• My Account: Trang tài khoản khách hàng.
• Refund and Return Policy: Trang điều khoản hoàn tiền và trả hàng mặc định.

Các trang này được tạo ra mặc định, vì vậy có thể nó sẽ hiển thị hơi xấu hoặc thậm chí là lỗi. Vì vậy bạn cứ để nguyên đó và dùng để kiểm tra ban đầu thôi nhé, tới phần sau của bài viết mình sẽ có hướng dẫn bạn dùng Elementor thiết kế lại các trang này cho phù hợp theo ý mình hơn.

Kết bài

Trong khuôn khổ bài này chúng ta đã đi qua những bước đầu cơ bản nhất trong việc tìm hiểu WooCommerce và những thao tác cài đặt của nó. Ở tiếp tục trong bài sau, chúng ta sẽ cùng nhau đi tạo ra các sản phẩm trên WooCommerce và tìm hiểu một số tính năng liên quan đến tạo sản phẩm, bao gồm thuộc tính sản phẩm, sản phẩm có liên kết ngoài,…

Ở phần trước chúng ta đã thiết kế hoàn thiện phần Header, Footer và trang chủ dựa theo ý tưởng thiết kế của theme Spotlight thuộc Ghost CMS. Trong phần 2 này, chúng ta sẽ thực hiện hoàn thiện thiết kế ở các trang còn lại bao gồm:

• Bổ sung nút search trên header mà phần trước quên làm.
• Thiết kế template Single Post: Trang hiển thị nội dung chi tiết của một bài viết.
• Thiết kế template mặc định cho các Page: Hiển thị nội dung chi tiết của một page.
• Thiết kế template cho trang Archive: Hiển thị các bài viết của category hoặc tag đó khi nhấp vào xem một category hoặc tag.
• Thiết kế giao diện trang Search

Bổ sung nút Search trên Header

Phần trước chúng ta thiết kế phần header nhưng quên làm tính năng tìm kiếm nội dung. Mặc định ở Elementor, bạn chỉ có thể chèn một khung tìm kiếm vào website, nhưng với thiết kế giao diện mẫu này thì tính năng tìm kiếm sẽ hiển thị một cái icon trên header (góc bên phải) và khi nhấp vào nó sẽ ra khung search.

Ở Elementor ta có thể biến tấu lại một tính năng cũng tương tự như vậy nhờ vào việc sử dụng tính năng tạo Mega Menu trong Elementor.

Để bật tính năng Mega Menu, bạn vào trang quản trị, vào Elementor => Settings => Features và bật tính năng Menu lên.

Bây giờ bạn ra lại trang chủ, chọn sửa nhanh Header với Elementor để vào trang sửa template Header đang sử dụng trên trang này.

Bạn sẽ cần điều chỉnh lại container của cột bên phải trong header với Direction là Row để chúng ta chèn cái biểu tượng tìm kiếm kế bên cái nút. Sau đó bạn thêm widget tên Menu vào kế bên cái nút, xoá bớt item trong đó và chỉ giữ lại 1 item, xoá Title trên item và chọn sử dụng icon, tìm icon tìm kiếm trong thư viện.

Trong tính năng Menu mới của Elementor nó có một tính năng hữu ích đó là cho phép chúng ta chèn Dropdown Content tuỳ chỉnh vào, nghĩa là biến một menu thông thường thành Mega bằng cách chèn nội dung vào dropdown content đó. Như vậy ta sẽ bật tính năng Dropdown Content ở item vừa tạo ra và chèn một widget Search vào nội dung dropdown đó.

Trong khi sửa widget Menu, bạn có thể sửa lại chỉ hiển thị khung search khi nhấp vào menu thay vì chỉ rê chuột bằng cách sửa tuỳ chọn Open on ở phần Dropdown Effect từ Hover qua Click.

Bạn xem video thao tác bên dưới.

Thiết kế trang Single

Giao diện mẫu trang single của chúng ta gồm có phần hiển thị tác giả bài viết ở trên, kèm thông tin về ngày đăng, bên dưới là tiêu đề và các nút chia sẻ bài viết.

Chúng ta thực hiện thiết kế giao diện cho template Single bằng cách vào trang quản trị, vào Templates => Theme Builder và tạo một template ở Single Post.

Ở đây nếu bạn thích ăn luôn và ngay thì có thể sử dụng các template thiết kế sẵn cho Single Post mà Elementor gợi ý, cũng khá là đẹp đó. Dĩ nhiên trong khuôn khổ bài này thì mình sẽ bỏ qua và tự thiết kế giao diện theo ý mình.

Theo như thiết kế thì trong trang single post sẽ có hai phần chính mà nó sẽ cần container riêng, một là thanh breadcrumb ở trên để điều hướng bài viết, điều này cũng giúp người đọc dễ xác định bài viết đang được phân loại ở category nào, và hai là khu vực hiển thị nội dung của bài viết với kích thước chiều rộng nội dung là 736px.

Hiển thị thanh breadcrumbs trong bài viết ở Elementor

Một vấn đề phát sinh ra ở đây , là Elementor mặc định không có widget hỗ trợ chèn thanh breadcrumb này vào website, chúng ta bắt buộc phải tự code thanh breadcrumb này. Tuy nhiên mình có ý này hay hơn.

Hiện nay tất cả website WordPress hầu như phải cài một plugin hỗ trợ SEO là Rank Math SEO hoặc SEO by Yoast, trong đó Rank Math SEO hiện nay phổ biến hơn cả. Và trong plugin Rank Math SEO nó có hỗ trợ tính năng chèn breadcrumb vào website thông qua một đoạn mã PHP hoặc shortcode. May mắn thay, Elementor có hỗ trợ widget chèn Shortcode vào trang. Vậy là đã rõ, chúng ta sẽ cài plugin Rank Math SEO vào website, sau đó bật tính năng Breadcrumb và nhúng breadcrumb này vào giao diện thông qua widget Shortcode.

Sau khi cài xong plugin Rank Math SEO, bạn truy cập vào Rank Math => General Settings, chọn Breadcrumbs bên tay trái và kích hoạt nó lên, chọn Separator Character là ký tự » cho nó phần nào giống mẫu thiết kế.

Bây giờ chúng ta đã có breadcrumb nên tiếp tục công việc thiết kế với Elementor thôi, ta quay lại giao diện thiết kế Single Post của Elementor, tạo một container cho breadcrumb, sau đó chèn widget Shortcode vào và dán đoạn shortcode bên dưới vào nội dung:

[rank_math_breadcrumb]

Để tiến hành làm đẹp cho breadcrumb khi dùng shortcode thì ta phải bắt buộc sử dụng Custom CSS để chèn CSS tuỳ chỉnh vào widget này. Bạn chuyển qua tab Advanced và dán đoạn CSS dưới đây vào mục Custom CSS:

selector .rank-math-breadcrumb .last {
    color: var(--e-global-color-secondary);
}
selector .rank-math-breadcrumb a {
    color: inherit;
}
selector .rank-math-breadcrumb {
    font-size: 14px;
    font-weight: 500;
}

Còn lại bạn có thể cho margin top và bottom ở container chứa breadcrumb này đừng để nó đứng sát header quá sẽ không đẹp.

Thiết kế container chứa nội dung bài viết

Phần này chúng ta tiếp tục tạo thêm một container phía dưới, và điều chỉnh chiều rộng của container này về 736px.

Bây giờ ta sẽ đi vào chèn các nội dung trong bài viết.

Ở đầu bài viết ta có phần hiển thị các thông tin của bài viết như thế này, bạn thấy nó hiển thị trên cùng một hàng nhưng thông tin này ta có thể chỉ cần sử dụng một widget Post Info duy nhất và cho nó hiển thị phần tác giả và thời gian đăng bài.

Trong thiết lập phần Author hiển thị tên tác giả, bạn bật tính năng hiển thị Avatar lên và cho nó kích thước khoảng 40px.

Còn phần Date thì bạn tắt cái icon đi để không cho hiển thị icon.

Chuyển qua tab Styles, bật Divider lên để nó có viền ngăn cách giữa các thông tin, thiết lập height cho nó là 45% và width là 3.

Trong phần Styles có Text, bạn sửa Weight của chữ lên 500.

Cuối cùng là ta muốn tên tác giả nó có màu đen, bước này thì sẽ cần phải sử dụng Custom CSS vì ta không có tuỳ chọn màu chữ cho từng thành phần trong Post Info. Bạn chuyển qua tab Advanced của Post Info và chèn đoạn Custom CSS sau:

selector .elementor-post-info__item--type-author {
    color: var(--e-global-color-primary) !important;
}

Kết quả sơ bộ chúng ta có như sau, nó sẽ thiếu phần thời gian đọc vì mặc định Elementor không có widget hiển thị thời gian đọc mà cũng không cần thiết để cài thêm plugin.

Tiếp tục ta chèn thêm một widget là Post Title để hiển thị tiêu đề của bài viết ở ngay phía dưới. Widget này không cần tuỳ chỉnh gì nhiều, chỉ cần đưa độ đậm của chữ về 700 cho nó đậm lên.

Tiếp tục bạn chèn một widget tên là Share Buttons để chèn nút chia sẻ y hệt như demo. Bạn tuỳ chỉnh thiết lập của widget này như bên dưới đây.

Tuỳ chỉnh style để cho icon có màu đen và có kích thước nhỏ lại.

Tiếp theo bạn chèn một widget Post Content để hiển thị nội dung bài viết, tuỳ chỉnh size chữ của phần Post Content này lên 18px, line height lên 30px, màu chữ bạn cân nhắc đổi qua màu #343435 để tổng thể nhìn hài hoà hơn. Chuyển qua tab Advanced để thêm padding 50px cho top và 50px cho bottom để nó có khoảng đệm ở trên và dưới

Tiếp tục ở sau nội dung bài viết sẽ có thêm nút chia sẻ, bạn copy cái widget Share Button ở trên và paste lại ở dưới là được.

Sau đó nữa là cái hộp hiển thị thông tin tác giả, bạn sử dụng widget Author Box, chuyển qua phần Advanced và thiết lập background có màu nền là #f6f6f6, sau đó vào mục Border và cho border radius là 4 4 4 4. Chuyển qua tab Style, vào mục Author cho Name có màu Primary, Biography có màu là Secondary. Bạn có thể cho widget này padding là 35 25 35 25, và margin là 25 0 25 0 để hiển thị cân đối hơn chút. Nếu bạn muốn điều chỉnh ảnh avatar nhỏ như bản mẫu thì vào tuỳ chọn Styles và chỉnh Image Size về 48px.

Phần hiển thị cuối cùng trong nội dung bài viết này đó là phần Read Next, theo như mình phỏng đoán thì đây là các bài viết cũ hơn bài hiện tại để khuyến khích người dùng đọc tiếp.

Phần này bạn có hai hướng lựa chọn, một là bạn tái sử dụng phần Loop Carousel mà ta đã hoàn thiện ở phần trước, chỉnh query về lại để hiển thị các bài cũ hơn.

Hai là bạn chèn một widget Loop Grid và tái sử dụng template cho loop mà ta đã tạo ra trước đó ở phần hiển thị trên slide. Để xem các loop template bạn đang dùng, thì vào trang quản trị tìm Templates => Theme Builder, chọn Loop Item và ấn Edit để xem. Còn về query chỉ lấy bài viết cũ hơn bài hiện tại thì hiện tại Elementor chưa hỗ trợ query kiểu này, nên ở phần này chúng ta tạm sử dụng query để gọi các bài viết khác trong website thôi nhé.

Tổng quan sau khi hoàn thiện.

Như vậy là ta vừa hoàn thiện xong template Single Post rồi. Chúng ta tiếp tục thiết kế các template khác.

Sau khi hoàn tất bạn lưu lại thì nên hiển thị nó với Post thôi nhé.

Thiết kế cho template Archive

Template Archive là sẽ sử dụng chung khi chúng ta vào xem một trang thuộc loại lưu trữ, bao gồm trang category, tag, tác giả,…

Căn cứ theo mẫu thiết kế thì trong trang lưu trữ ta sẽ có hai thành phần chính, bao gồm tên loại lưu trữ và mô tả của nó ở trên, kèm tấm ảnh. Ở dưới là một cái grid loop nhưng không tạo query mới mà ta sẽ sử dụng query hiện tại trên trang lưu trữ để nó lấy đúng bài viết thuộc trang lưu trữ đang xem, cái này trong hướng dẫn mình sẽ có lưu ý khi hướng dẫn đến.

Chúng ta thực hiện tạo template cho trang lưu trữ bằng cách vào trang quản trị, tìm Templates => Theme Builder, sau đó chọn Archive và tạo một template mới ở đây.

Trước tiên ta cần tạo một container bao quát toàn bộ nội dung trong trang lưu trữ này, thiết lập margin top cho nó là 100px, margin bottom 50px.

Sau đó ta sẽ tạo một container để hiển thị thông tin giới thiệu của trang lưu trữ và mô tả của nó. Mình sẽ không cho hiển thị hình ảnh vì mặc định WordPress chưa có tính năng chèn ảnh đại diện cho một trang lưu trữ mà sẽ cần phải code thêm, nó không phù hợp ở bài viết hướng dẫn căn bản thế này. Ở container hiển thị thông tin trang lưu trữ, bạn cho padding 100 0 100 0 để có khoảng trống trên và dưới lớn giống như mẫu thiết kế.

Ta chèn widget Archive Title để hiển thị tiêu đề của trang lưu trữ, cho độ đậm của chữ lên 700. Bạn thiết lập tắt context khi hiển thị tên trang lưu trữ vì mặc định nó sẽ chèn thêm chữ Category: hoặc Tag: trước tên trang lưu trữ.

Để chèn mô tả của trang lưu trữ, ta sẽ sử dụng một thủ thuật nhỏ đó là chèn widget Text Editor vào, sau đó chọn nội dung hiển thị là Dynamic Tag và chọn Archive Description để hiển thị. Sau đó qua mục Styles và cho nó font size là 20px, độ đậm 500.

Tiếp tục tạo một container khác trong container chính, đặt padding về 0 và chèn widget Loop Grid, sử dụng template loop đã tạo trước đó, diều chỉnh số cột là 4 và hiển thị 8 hoặc 12 bài tuỳ ý bạn.

Ở phần Query, bạn chọn sử dụng Current Query.

Pagination bạn vẫn chọn kiểu Load on Click, và trang trí cái nút thành màu đen là được.

Tổng quan trang lưu trữ sau khi hoàn tất.

Thiết kế template trang Search Results

Template này sẽ được sử dụng khi ai đó tìm kiếm nội dung trên website của mình. Về cấu trúc và cách thức hoạt động thì nó y hệt như việc thiết kế template Archive. Vì vậy cách nhanh nhất đẻ tạo template Search là copy toàn bộ nội dung đã thiết kế bên trang Archive qua template này.

Để thực hiện việc này, bạn sẽ cần thao tác chọn copy container bao quát toàn bộ nội dung ở trang Archive mình vừa làm ở trên.

Sau đó bạn truy cập vào Templates => Theme Builder, tạo mới một template Search Results, và ấn chuột phải chọn Paste vào và lưu lại là xong.

Khi lưu lại lần đầu, bạn nhớ phải chọn áp dụng ở trang Search Results thôi nhé.

Bây giờ bạn có thể thử tìm kiếm trên website để xem giao diện hiển thị.

Vậy có cần thiết kế template giao diện của Page không?

Chúng ta chưa thao tác tạo template hiển thị nội dung của Page, nhưng hiện tại nó sẽ sử dụng template của Post ở mặc định. Mình nghĩ hiện tại ta không cần thực hiện tạo template cho page vì nếu bạn có tạo một page mới thì nên sử dụng Elementor để thiết kế, và chọn Page Template là Elementor Full Width để linh hoạt hơn.

Trường hợp nếu bạn muón thiết kế page mà không sử dụng header và footer mặc định thì sử dụng template Elementor Canvas.

Lưu lại thiết kế Elementor (export Kit)

Nếu bạn đã hoàn thiện thiết kế của mình trên Elementor, thì nên lưu lại nó thành một Elementor Kit để bạn có thể tự lưu trữ và tái sử dụng lại sau này khi cần, chứ lỡ lỗi website thì mất thật là uổng công.

Để Export các thiết kế hiện tại trong Elementor, bạn vào trang quản trị, tìm Elementor => Tools và chọn Import/Export Kit.

Trong quá trình tuỳ chọn trước khi export, bạn có thể chọn plugin mà đang phụ thuộc trong các thiết kế (nếu có) và nên export cùng để tránh bị thiếu.

Sau khi ấn nút Create Kit, trình duyệt sẽ tải về tập tin .zip và bạn có thể lưu trữ lại. Sau này cần dùng lại thì bạn cũng vào Elementor => Tools => Import/Export Kit và chọn Import để tái sử dụng.

Kết thúc hướng dẫn thiết kế blog bằng Elementor Pro

Chúng ta vừa đi qua hướng dẫn rất chi tiết việc sử dụng Elementor Pro để thiết kế một giao diện blog hoàn chỉnh. Trong suốt chiều dài bài viết, chúng ta đã ứng dụng rất nhiều thao tác với Elementor và với cacs thao tác đó, cộng với sự sáng tạo của bạn thì hoàn toàn có thể thiết kế được nhiều giao diện website khác nhau mà không cần phải sử dụng các đoạn code phức tạp.

Bây giờ bạn có thể giữ lại giao diện này để sử dụng trong các bài hướng dẫn tiếp theo về sau. Ở các bài sau, chúng ta sẽ đi tìm hiểu về WooCommerce để làm một trang bán hàng trong WordPress, và chúng ta sẽ kết hợp với Elementor Pro để thiết kế thêm một số tính năng hiển thị liên quan đến sản phẩm trong website.

Trong bài trước bạn đã làm quen với Elementor thông qua việc thiết kế một trang landing page đơn giản để làm quen với các thao tác. Trong đó mình cũng đã nói rõ rằng Elementor phiên bản miễn phí dường như chưa đủ khả năng tuỳ biến ở mức trên toàn website, nên nó sẽ chỉ phù hợp với việc thiết kế một langding page đơn giản như vậy.

Với các nhu cầu thiết kế mang tính toàn cục, ví dụ như thiết kế một giao diện blog riêng có khả năng tuỳ biến giao diện xem bài viết, giao diện các trang lưu trữ,…thì bạn sẽ cần hai giải pháp:

• Sử dụng theme thiết kế sẵn cho Elementor: Trong các theme này thường thì tác giả đã thiết kế template riêng để hiển thị toàn bộ các trang trong website, nên chúng ta chỉ cần sử dụng là được. Nhưng các theme đầy đủ hiện nay hầu như không miễn phí.
• Sử dụng Elementor Pro: Nếu bạn cần tự bắt tay vào thiết kế một giao diện riêng, bạn cũng có thể kết hợp vừa sử dụng theme có sẵn, vừa sử dụng Elementor Pro để cho hiệu suất tốt nhưng dĩ nhiên là tốn nhiều tô phở hơn.

Do phương án sử dụng theme có sẵn thường sẽ mất nhiều thời gian tìm hiểu vì các theme trả phí có rất nhiều tính năng, nên việc hướng dẫn sử dụng một theme mình sẽ đề cập ở các bài sau. Còn trong phần này thì mình sẽ hướng dẫn sử dụng Elementor Pro để tự thiết kế một trang blog hoàn chỉnh với giao diện đơn giản (xấu thì chưa chắc đâu nha).

Vì sao cần phải sử dụng Elementor Pro

Dĩ nhiên Elementor miễn phí cũng đáp ứng được đa số các nhu cầu sử dụng, đặc biệt là trong trường hợp bạn đã có một website hoạt động nhưng cần thêm tính năng kéo thả để chỉnh sửa bố cục thuận tiện hơn. Nhưng với một số yêu cầu như tự thiết kế một giao diện theo mong muốn bằng Elementor thì bắt buộc bạn phải dùng Elementor Pro, vì một số tính năng cần thiết như:

• Sử dụng theme builder để thiết kế toàn bộ các trang trong WordPress. Ví dụ bạn dùng theme Hello Elementor mà dùng với Elementor miễn phì thì sẽ không thiết kế giao diện cho một số trang bên trong, như trang single (để hiển thị bài viết), trang lưu trữ (giao diện khi xem nội dung một category hoặc tag),…
• Sử dụng Global Widget để tái sử dụng một widget trên nhiều trang. Điều này có thể rút ngắn thời gian hoàn thiện một website của bạn.
• Tận dụng thư viện template của Elementor khi tạo page hoặc một template mà không cần phải thiết kế từ đầu.
• Sử dụng một số widget có chữ Pro để thiết kế tốt hơn.
• Cho phép tuỳ chỉnh CSS cho từng widget hoặc một container, sẽ có lợi thế cho người dùng có kiến thức về CSS.
• Có thể tuỳ chỉnh query hoặc tham số request ở một số widget hiển thị nội dung.
• Hỗ trợ các widget dành riêng cho WooCommerce để làm website bán hàng.

Và rất nhiều tính năng khác mà Elementor miễn phí không có, bạn có thể tìm hiểu thêm tại đây. Vì vậy nếu bạn đang có dự định theo hướng dẫn của mình thì hãy chuẩn bị một thẻ thanh toán quốc tế để mua Elementor Pro với giá $59/năm nhé. Số tiền này không phải nhỏ nhưng cũng không phải quá lớn để bắt đầu tự thiết kế website cho riêng mình.

Thông tin thêm: Nếu bạn đang sử dụng hosting tại AZDIGI thì có thể liên hệ bộ phận kỹ thuật để được kích hoạt bản quyền Elementor Pro miễn phí, chỉ áp dụng cho 1 website cho mỗi gói dịch vụ.

Thiết kế giao diện blog minimalist với Elementor Pro

Trong bài này, chúng ta sẽ thực hiện thiết kế một giao diện WordPress mới hoàn toàn dựa vào Elementor Pro, giao diện đó sẽ được thiết kế lấy cảm hứng từ giao diện Spotlight của Ghost. Dĩ nhiên là mình chỉ đang lấy cảm hứng thôi chứ không hẳn là thiết kế hoàn toàn giống như vậy.

Reset hoặc thực hành trên một website mới

Để cho tối ưu trong việc tìm hiểu theo hướng dẫn này, bạn nên cài mới lại một website WordPress hoàn toàn mới, hoặc nếu bạn đang thực hành trên website đã cài đặt trước đó thì có thể reset lại thông qua cài plugin WP Reset để xoá toàn bộ các plugin/theme cùng các tuỳ chọn trước đó. Ở dưới là video hướng dẫn thao tác reset lại website.

Cài đặt theme Hello Elementor và kích hoạt Elementor Pro

Phần này đã quá đơn giản vì trước đó bạn đã có làm qua rồi, nên mình sẽ không nói qua về thao tác nữa nhé. Chỉ có một sự khác biệt là bạn sẽ cần kích hoạt Elementor Pro để có thể làm theo hướng dẫn này. Nếu bạn đã mua Elementor Pro hoàn tất trên trang chủ https://elementor.com/pricing-plugin/ thì sẽ cần tải file .zip của plugin Elementor Pro và cài đè vào website.

Khi cài xong thì truy cập vào Elementor => License để thực hiện kích hoạt bản quyền bằng cách kết nối website đến tài khoản Elementor của bạn.

Cài đặt Dummy Content với plugin FakerPress

Dummy Content là tập hợp những nội dung mẫu bao gồm các bài viết, trang, category và tag được tạo sẵn cho mục đích kiểm tra hiển thị của website. Do website chúng ta đang làm việc là mới hoàn toàn, không có nội dung sẵn nên sẽ cần thêm các dummy content này vào.

Thay vì tạo nội dung dummy content thủ công, bạn nên sử dụng plugin FakerPress để tạo nhanh các nội dung này vì plugin này có tính năng xoá nhanh các nội dung dummy content mà không cần phải xoá thủ công từng nội dung.

Sau khi cài đặt hoàn tất, bạn truy cập vào trang quản trị và vào FakerPress => Posts để bắt đầu tạo nội dung, ở phần Quantity bạn nên chọn tạo khoảng từ 15 đến 20 bài là đủ dùng, chọn xong thì ấn nút Generate ở dưới và đợi nội dung được tạo ra. Thời gian tạo này có thể mất khoảng từ 5-10 phút để hoàn tất.

Cấu hình Site Settings cơ bản

Giống như thao tác khi thiết kế landing page phần trước, chúng ta sẽ phải cần thiết lập sẵn các thông số cơ bản trong giao diện nếu như tự thiết kế giao diện bằng Elementor ngay từ đầu. Các thông số này bao gồm các màu sắc mà ta sẽ sử dụng trong trang, font chữ,…để đảm bảo các thành phần được hiển thị một cách nhất quán.

Bây giờ bạn vào Pages hoặc Posts, chọn Edit with Elementor ở một page và post bất kỳ, chọn Site Settings phía trên để bắt đầu thiết lập.

Và đây là một số thông số Site Settings mà bạn cần điều chỉnh để phù hợp với thiết kế của chúng ta.

• Global Colors: Do giao diện chúng ta chủ yếu là đen và trắng nên màu sắc ở đây cũng không có gì nhiều, màu Accent màu cam để dành làm điểm nhấn cho thành phần nhỏ nào đó, ví dụ như các liên kết trong bài viết chẳng hạn.
  • Primary: #1d1d1f
  • Secondary: #a5a5a5
  • Text: #1d1d1f
  • Accent: #1d1d1f
  • Light gray: #f8f8f8
  • Footer text: #1d1d1f
• Global Fonts: Ở thiết kế này chúng ta chỉ sử dụng một font chữ duy nhất là Roboto. Nếu trình duyệt không load được font này thì nó sẽ sử dụng stack font mặc định của hệ thống mà ta khai báo là phần fallback font family.
  • Primary: Default, Weight 500
  • Fallback Font Family:
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif
• Buttons: Trong giao diện này các nút bấm của chúng ta sẽ là màu đen thui với chữ trắng.
  • Text Color: #fff
  • Background: #000
  • Border radius: 100px 100px 100px 100px
  • Padding: 20px 28px 20px 28px
• Layout: Phần này chúng ta sẽ thiết lập chiều rộng nội dung là 1584px, và các container sẽ có khoảng đệm bên trái là 40px, khoảng đệm bên phải là 40px.
  • Content Width: 1584px
  • Container Padding: 0 40px 0 40px

Thiết kế Header

Bây giờ chúng ta sẽ thực hiện làm một header đơn giản như mẫu, không bao gồm nút đổi chế độ đọc tối và sáng như mẫu gốc đâu nhé, nếu muốn bạn có thể tự chèn thông qua plugin Nocturne Dark Mode – Elementor Dark Mode Toggle for WordPress.

Để tạo header, bạn truy cập vào Templates => Theme Builder, sau đó chọn phần Header.

Ở đây chúng ta bỏ qua phần chọn template của Elementor nhé vì đang cần thiết kế đúng ý tưởng. Theo như ý tưởng thiết kế thì phần header này chúng ta sẽ có một container với direction là xếp theo chiều ngang, trong đó sẽ bao gồm 3 cột để hiển thị logo (20%), menu ở giữa (60%) và một thanh chức năng bên tay phải (20%).

Ở cột đầu tiên ta sẽ chèn một widget là Site Logo hoặc Site Title, ở đây mình sẽ dùng Site Title vì không có logo. Nếu chèn title mà muốn nó hiển thị ra giữa hàng thì thiết lập Justify Content là Center nhé.

Ở cột giữa thì chèn widget là WordPress Menu, có thể truy cập vào trang /wp-admin/nav-menus.php để tạo menu trước khi thực hiện nhé. Trong phần Styles của menu thì cho weight của chữ lên 500 là hợp lý.

Và cột cuối cùng thì bạn có thể chèn một widget là Button để hiển thị một cái nút bấm.

Cuối cùng là thêm padding vào container chính cho 25px và 25px ở dưới để nó có khoảng đệm trên và dưới hợp lý hơn.

Khi chọn publish lần đầu, bạn sẽ cần đặt condition cho nó là Entire site.

Thiết kế Footer

Để thực hiện thiết kế cho footer trên toàn trang, bạn truy cập vào Templates => Theme Builder và chọn site part là Footer và ấn nút Add New để thêm mới, cũng bỏ qua thao tác sử dụng template mẫu.

Ở footer theo ý tưởng thiết kế thì ta sẽ có 3 container phân chia như hình dưới. Cũng khá đơn giản để thực hiện.

Container đầu tiên bạn thiết lập màu nền là #f8f8f8, chia 2 cột mỗi cột 50%, cột bên trái chèn widget Heading, Text Editor (font size 20px với màu chữ #5A5656) và Button, chỉnh Justify Content là Center. Cột bên phải là chỉ chèn tấm ảnh.

Cột thứ 2 sẽ có màu nền là #f1f1f2, cũng chia thành 2 cột (mỗi cột 35%). Cột bên trái sẽ bao gồm các widget Site Title, Text Editor, Social Icons. Cột bên phải sẽ là WordPress Menu nhưng thiết lập chế độ hiển thị Vertical, thông số Align thiết lập là End. Ở thiết lập container chính của phần này bạn thiết lập justify Content là Space Between, và padding là 50px 0 50px 0 nhé.

Ở container cuối cùng, bạn tạo ra một container và thiết lập màu nền cho nó là #f1f1f2, sau đó bạn chèn thêm một container bên trong và thiết lập cho nó padding 50px 0 50px 0, ở phần Styles bạn chọn Border Type là Solid, và chỉ điền 1px vào phần Top để nó tạo cái hiệu ứng viền ở trên, màu viền bạn cho là #DDDDDD.

Sau đó bạn chèn một widet Text Editor vào đó, cho màu chữ thành màu Secondary. Kết quả cuối cùng ta có footer như hình bên dưới, cũng tạm ổn đó nhỉ.

Thiết kế trang chủ

Trong trang chủ ở thiết kế mẫu ta sẽ có các phần hiển thị bao gồm:

• Phần slide ảnh chuyển động ngược chiều kèm tiêu đề bên trái.
• Phần hiển thị bài viết trong một danh mục nhưng hiển thị theo chiều ngang.
• Phần hiển thị bài viết mới nhất chia thành 2 cột.

Trong đó riêng phần slide ảnh thì chúng ta sẽ chèn một chút mã Javascript vào để nó có hiệu ứng chạy ngược chiều nhau.

Để bắt đầu tạo trang chủ, bạn vào trang quản trị và vào Pages => Add New Page để tạo một trang mới, bạn đặt tên là trang chủ, chọn Template là Elementor Full Width. Sau đó chọn Edit with Elementor để sửa.

Thiết kế phần tiêu đề có slide ảnh

Phần này bạn tạo một container, vào Styles chọn Border rồi thiết lập Border Type là Solid, cho 1px ở Bottom với màu #DDDDDD.

Cột đầu tiên bạn thiết lập Justify Content là Center, chèn widget Heading (font size 55px, độ đậm 700), Text Editor (chỉnh size chữ lên 20px, độ đậm 500), và chèn một cái widget Button ở dưới.

Ở cột thứ 2 bạn chèn thêm một container bên trong và thiết lập Direction nó là Row rồi chuyển qua tab Advanced đặt CSS ID của nó là heroImg_slide_vertical. Tiếp tục chèn thêm 2 cột bên trong nữa, và đặt CSS Class cho mỗi cột là heroImg_column, và đặt padding là 0 hết nhé. Nếu bạn tạo đúng thì sẽ có cấu trúc như bên dưới.

Bây giờ bạn chèn ảnh vào 2 cột này với widget Image, bạn nên chèn các ảnh có kích cỡ theo chiều dọc, ví dụ như tấm ảnh này. Ở mỗi tấm ảnh bạn có thể cho nó border radius là 20px.

Tới đây bạn nên bật chức năng Structure lên để hiển thị công cụ điều hướng cho thuận tiện làm việc nhé.

Bây giờ bạn chọn container chứa hai cột (trước đó đặt CSS ID là heroImg_slide_vertical), chọn Advanced => Custom CSS và chèn đoạn sau vào:

@keyframes vertical-scroll-down {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes vertical-scroll-up {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}
        
selector {
    overflow: hidden;
    height: 100vh;
}

Tiếp tục chọn cột chứa hình ảnh đầu tiên, chọn Advanced => Custom CSS và chèn vào:

selector {
animation: vertical-scroll-down 20s linear infinite;
}

Tiếp tục chọncootj chứa hình ảnh thứ 2 và cũng vào Advanced => Custom CSS và chèn vào:

selector {
animation: vertical-scroll-up 20s linear infinite;
}

Với các bước trên ta đã có hiệu ứng chuyển động rồi.

Tuy nhiên ta không thể cố định thời gian cuộn ở 20s, vì nếu xem website ở các trình duyệt nhỏ hơn việc chuyển động như vậy sẽ không xem được ảnh rõ ràng. Vì vậy ta sẽ cho tốc độ chuyển động dựa theo chiều cao của cột. Bạn cài plugin Insert Scripts In Header and Footer, sau đó vào Settings => Insert Scripts In Header and Footer và chèn đoạn mã dưới đây vào mục Footer Scripts, nếu bạn muốn chuyển động nhanh hơn thì có thể điều chỉnh giá trị thời gian của đoạn const duration = (maxHeight / containerHeight) * 20, thay 20 xuống thấp hơn:

<script>
    const heroContainer = document.querySelector('#heroImg_slide_vertical');
const heroColumns = document.querySelectorAll('.heroImg_column');

function adjustHeroScrollSpeed() {
    const containerHeight = heroContainer.clientHeight;
    let maxHeight = 0;
    heroColumns.forEach(column => {
        const columnHeight = column.scrollHeight;
        if (columnHeight > maxHeight) {
            maxHeight = columnHeight;
        }
    });

    // Tính toán thời gian cuộn dựa trên chiều cao lớn nhất
    const duration = (maxHeight / containerHeight) * 20; // Thời gian cuộn đồng nhất cho cả hai cột

    // Áp dụng thời gian cuộn giống nhau cho cả hai cột
    heroColumns.forEach(column => {
        column.style.animationDuration = `${duration}s`;
    });
}

window.addEventListener('resize', adjustHeroScrollSpeed);
adjustHeroScrollSpeed(); // Initial adjustment on load
<
/script>

Thiết kế slide hiển thị bài viết

Theo như mẫu thiết kế ở trang chủ, thì ta sẽ có các phần hiển thị bài viết trong một category nào đó được hiển thị với dạng slide như ảnh bên dưới. Ở giao diện mẫu họ có chèn 2 phần này vào trang chủ, nên bây giờ chúng ta sẽ đi thiết kế phần hiển thị bài viết dạng slide như này rồi nhân đôi lên là được.

Trong một thành phần này, chúng ta sẽ có một widget Heading để hiển thị tên category, còn slide hiển thị bên dưới chúng ta sẽ sử dụng widget tên Loop Carousel.

Bây giờ ta tạo một container để bao quát cả thành phần này, đặt margin 50 0 50 0, padding 50 0 50 0, sau đó chèn widget:
Heading: thẻ h2, font-weight 700, size giữ nguyên, có thể chèn link tới một category tương ứng ở phần Link trong widget heading này.

Loop Carousel: Khi chèn xong, bạn chọn Choose template type là Posts, và bắt đầu ấn nút Create template để tạo một template hiển thị cho slide này. Nó hỏi lưu lại các thay đổi trên thiết kế của trang chủ thì ấn save để lưu lại nhé.

Bây giờ chúng ta sẽ tiến hành thiết kế template hiển thị cho slide, theo mẫu thiết kế thì trên các bài viết hiển thị ra slide nó sẽ bao gồm ảnh đại diện của bài viết, tên category, tên bài viết và thông tin ngày đăng bài viết đó.

Vậy thì bây giờ chúng ta sẽ tiến hành chèn các widget tương ứng vào khung thiết kế template là được, cụ thể là bao gồm các widget theo thứ tự như Featured Image (chỉnh size ảnh hiển thị phù hợp là 454×541, chọn qua mục Styles chọn border radius là 4 4 4 4), Post Info (xoá hết và tạo một item hiển thị Term và chọn taxonomy là Categories), Post Title (thẻ h3, font-weight 700, ở phần Link các bạn ấn vào nút Dynamic Tag và chọn Post URL để tiêu đề có link dẫn tới trang bài viết đó), Post Info (xoá hết giữ lại Date, bỏ link, thêm chữ Đăng ngày vào Before, vào Styles để đổi màu chữ về màu Secondary, đặt font-weight là 500, có thể vào phần Advanced để thêm margin top là 35px để nó hiển thị tụt xuống dưới như demo).

Để phần hiển thị category bài viết ở phần này giống demo hơn là có màu nền, viền bo tròn thì bạn nhấp vào widget hiển thị tên category, vào phần Styles thiết lập màu chữ cho Text là #616162, font-size 14px, letter spacing là 0,5 px, font weight 500, line height 17px, qua phần Advanced bạn chọn Align Self là Start, padding là 6 12 6 12, vào mục Border chỉnh border radius là 4 4 4 4.

Sau khi điều chỉnh template hiển thị ở Loop Carousel thì sơ bộ chúng ta đã có kết quả như bên dưới.

Bạn bấm Save & Back để quay lại giao diện thiết kế trang chủ, bây giờ bạn sẽ thấy một số bài viết đã hiển thị ra rồi. Bài nào không có ảnh thì sẽ không hiển thị.

Bây giờ mặc định ở widget này nó sẽ hiển thị toàn bộ bài viết ra (số lượng thiết lập ở mục Layout => Number of slide), nhưng theo thiết kế thì ta sẽ chỉ muốn các bài viết trong một category nào đó hiển thị ra ở đây, thì sẽ cần điều chỉnh lại Query trong widget Loop Carousel này.

Thông tin thêm: Thuật ngữ Query trong WordPress đang nói đến một chức năng gửi truy vấn vào cơ sở dữ liệu để lấy dữ liệu bài viết hiển thị ra bên ngoài, mỗi công việc lấy dữ liệu sẽ được gọi là một query. Để tuỳ chỉnh dữ liệu trả về thì ta sẽ cần phải điều chỉnh tham số trong query. Với Elementor ta có thể thực hiện thay đổi tham số query trong một số widget liên quan đến lấy dữ liệu bài viết. Cũng xin nói thêm là “bài viết” ở đây mình chỉ đang gọi chung chung, thực tế query áp dụng với mọi “post type” và “taxonomy” mà hai khái niệm này nếu bạn học lập trình trong WordPress thì sẽ cần nghiên cứu thêm.

Để điều chỉnh query trong Loop Carousel, bạn nhấp vào phần tuỳ chỉnh Query trong widget. Giả sử bạn cần hiển thị bài viết trong một category nào đó thì sẽ thêm mục Term vào include by, sau đó ở phần Term bên dưới sẽ nhập tên category cần lấy bài viết ra. Bạn có thể vào trang quản trị, vào Posts => Categories và tạo thử một category, sau đó thiết lập lưu vài bài viết vào category này để thử nghiệm nhé.

Và vào mục Pagination đưa về None để nó không hiển thị mấy dấu chấm phân trang ở dưới slide.

Bạn chuyển qua tab Advanced của Container

Kết quả sau khi hoàn thành làm phần slide hiển thị bài viết.

Bây giờ bạn có thể lưu cả phần này lại thành một template bằng cách ấn chuột phải vào container tổng, chọn Save as Template để sau này muốn sử dụng lại mà không cần thiết kế lại hay copy.

Mình thấy theo mẫu thiết kế trên trang chủ là hiển thị slide này 4 lần, bạn có thể tuỳ ý tái sử dụng lại bao nhiêu lần tuỳ thích, và khi dùng thì đổi lại tên category ở widget Heading, và điều chỉnh lại query trong widget Loop Carousel thôi nhé.

Thiết kế phần hiển thị bài viết mới nhất chia cột

Dựa trên mẫu thiết kế, thì trang chủ sẽ có thêm một phần hiển thị bài viết mới nhất được chia thành 2 cột, ở dưới có nút Load more để tải thêm bài viết. Cảm ơn Elementor, chúng ta hoàn toàn có thể dễ dàng làm được phần này thông qua widget Loop Grid, nó cũng đi kèm cái nút tải thêm bài viết.

Để là phần này, dĩ nhiên rồi ta cũng sẽ tạo một container để bao bọc toàn bộ chức năng này, đặt margin là 50 0 50 0, padding cũng 50 0 50 0.

Kế tiếp là tạo một widget Heading để hiển thị chữ “Latest Posts”, cũng cho font weight thành 700 nhé.

Và chèn thêm một widget Loop Grid để hiển thị các bài viết mới nhất, bạn thiết lập tuỳ chọn Column là 2 để nó sẽ chia lưới hiển thị các bài viết với 2 cột. Chúng ta cũng ấn nút Create template để tạo template hiển thị những bài viết ra đây.

Phần template thì bạn lưu ý là mỗi bài viết được tải ra, nó sẽ có 2 cột, cột trái hiển thị Featured Image, cột phải là hiển thị các thông tin của bài viết đó với các block Post Info và Post Title.

Vậy nên khi tạo template, bạn phải chèn một container bao quát bên trong với Direction là row, và chèn thêm 2 container tương ứng với 2 cột mỗi cột 50% chiều rộng. Container chia cột bạn nên thiết lập padding về là 0.

Cấu trúc nó sẽ như ảnh bên dưới.

Bây giờ ta sẽ chèn widget Featured Image vào cột bên phải, kích thước ảnh là 322×181, qua phần Style chỉnh Border Radius về 4 4 4 4.

Cột bên phải ta sẽ chèn các widget bao gồm Post Info (hiển thị category), Post Title và Post Info (hiển thị ngày đăng). Phần này nếu muốn nhanh bạn vào sửa lại template của Loop Carousel ta đã làm ở phần trên và copy nguyên phần hiển thị thông tin của nó. vàolà được, đỡ mất công sửa lại thông số. Video thao tác copy ở bên dưới.

Để hiển thị nút Load More thì bạn sửa widget Grid Loop, chọn mục Pagination và sử dụng loại Load on Click. Sau đó chuyển qua mục Styles thiết lập lại màu nút Pagination theo ý muốn.

Kết quả hoàn thiện sau khi hoàn tất.

Và đây cũng là lúc ta kết thúc phần thiết kế trang chủ.

Thiết lập page Trang chủ làm homepage

Chúng ta đã hoàn tất thiết kế trang chủ nhưng khi truy cập vào website thì trang này sẽ chưa hiển thị ra mặc định. Bạn cần thiết lập trang này làm homepage tại Settings => Reading, chọn a static page và đưa Homepage lấy từ trang đã thiết kế.

Phần tiếp theo

Do bài này hơi dài và có nhiều video, hình ảnh nên mình kết thúc phần 1 tại đây, ở phần tiếp theo chúng ta sẽ hoàn thiện thiết kế của trang đọc bài viết chi tiết và các trang lưu trữ (khi xem category hoặc tag).