Tùy chỉnh WooCommerce: Thực hành tốt nhất

Linh Dinh March 8, 2024 No Comments

Điều tốt nhất về WordPress và WooCommerce là mã và nội dung có thể được thay đổi cho phù hợp — chỉnh sửa và tùy chỉnh trang web của bạn hoàn toàn.

Tính linh hoạt là một trong những lợi ích lớn nhất khi sử dụng WooCommerce để bán hàng trực tuyến. Các plugin, tiện ích mở rộng và chủ đề có thể được sử dụng để đáp ứng yêu cầu, sau đó được điều chỉnh và mã hóa để tùy chỉnh giao diện và chức năng của trang web của bạn.

Tuy nhiên, có một số best practices cần tuân theo khi thực hiện những thay đổi trang web, và không phải lúc nào cũng rõ ràng về cách thực hiện những thay đổi này.

Tại sao cần các thực hành tốt nhất?

Nhiều người dùng tùy chỉnh chủ đề của họ từ giao diện mặc định, thay đổi màu liên kết và cũng là bố cục và cảm giác. Hầu hết mọi người đều dấn thẳng vào và sửa đổi mã, đây là cách dễ dàng nhất để thực hiện. Nhưng điều này để lại vấn đề về việc cập nhật trong tương lai, vì tất cả các sửa đổi đều bị mất khi các tệp bị ghi đè bằng một phiên bản mới.

Nội dung liên quan:  Cách cập nhật WooCommerce

Những gì chúng tôi muốn chỉ cho bạn trong hướng dẫn này là những cách tốt nhất để tùy chỉnh chủ đề của bạn, để việc cập nhật là dễ dàng nhất có thể, và bạn có quyền kiểm soát những tùy chỉnh.

Có hai cách để tùy chỉnh:

  • Plugin — những thay đổi nhỏ
  • Child theme — những thay đổi lớn

Sử dụng một plugin

Nếu bạn chỉ dự định thực hiện những thay đổi nhỏ về bảng định dạng hoặc CSS, thì lựa chọn tốt nhất là sử dụng một plugin cho phép bạn thêm phong cách tùy chỉnh.

Jetpack cho những thay đổi CSS hoặc Sass

Khuyến nghị của chúng tôi là sử dụng Jetpack cho những thay đổi liên quan đến CSS hoặc Sass .

Cài đặt Jetpack. Một khi đã hoàn tất, đi đến your website > Dashboard > Jetpack > Settings và kích hoạt Custom CSS . Custom CSS trong Jetpack

Tiếp theo, bạn có thể đến Appearance > Edit CSS . Tại đây, bạn sẽ có thể thêm tất cả các phong cách CSS tùy chỉnh của bạn.

Example

Hãy xem qua một ví dụ dễ dàng khi chúng ta sử dụng Chrome Dev Tools để tìm màu của liên kết điều hướng trong chủ đề Storefront. Chúng tôi kiểm tra phần tử như sau: right click on the element > inspect , và nó sẽ cho chúng ta biết các phong cách cho phần tử nav được gọi là gì.
Chrome Dev Tools Inspect

Chúng ta thấy trong hình chụp màn hình ở trên rằng phong cách cho màu liên kết trong điều hướng:
Styles to visible in Chrome Dev Tools

.main-navigation ul li a {  color: #ffffff;}.main-navigation ul li a:hover {  color: #e6e6e6;}

Sau đó chúng tôi dán this into custom.css , chúng tôi muốn thay đổi màu thành màu đỏ, và màu khi rê chuột thành màu trắng. Chúng tôi cũng loại bỏ các phong cách khác mà chúng tôi sẽ không thay đổi nên cuối cùng nó trông như thế này:

.main-navigation ul li a {  color: red;}.main-navigation ul li a:hover {  color: white;}

Khi bạn lưu custom.css và làm mới trang của bạn, bạn sẽ nhận thấy màu liên kết điều hướng bây giờ là màu đỏ, và nếu bạn di chuyển chuột qua, nó sẽ chuyển thành màu trắng.

Nội dung liên quan:  Google Analytics for WooCommerce
Thay đổi sau khi áp dụng CSS tùy chỉnh
Thay đổi sau khi áp dụng CSS tùy chỉnh

Bạn cũng có thể thêm các phong cách mới vào bảng định dạng để bổ sung cho những cái đã có trong chủ đề. Nếu chủ đề bao giờ được cập nhật, Jetpack sẽ giữ các phong cách của bạn không bị thay thế. Chúng tôi luôn khuyến nghị sao lưu chủ đề của bạn trước khi cập nhật lên một phiên bản mới hơn, và cũng xem qua hướng dẫn nâng cấp của chúng tôi tại đây về cách thực hiện.

Code Snippets cho PHP

Plugin Code Snippets cho phép bạn thêm đoạn code vào trang web của bạn thay vì dán nó vào tệp functions.php , viết một mô tả ngắn để bạn biết nó làm gì, và kích hoạt hoặc vô hiệu hóa các đoạn code này khi cần.

codesnippets

Sử dụng một chủ đề con

Nếu bạn muốn sửa đổi bảng định dạng hoặc CSS của một chủ đề phổ biến, thì lựa chọn tốt nhất là sử dụng một chủ đề con để bảo vệ các tùy chỉnh so với các bản cập nhật tương lai.

Sử dụng một chủ đề con phí

Nhiều chủ đề phổ biến có chủ đề con có thể được cài đặt và kích hoạt để chỉnh sửa giao diện của chủ đề mẹ mà không cần chỉnh sửa mã hoặc điều chỉnh phong cách. Một chủ đề con mua sẽ không not được sử dụng cho mã tùy chỉnh nhưng là cách để thay đổi giao diện thông qua thiết kế của người khác. Ví dụ, đối với chủ đề Storefront của chúng tôi, chúng tôi có khá nhiều danh mục chủ đề con có sẵn rộng lớn .

Nội dung liên quan:  Theo dõi hàng tồn kho của bạn trên WooCommerce với Megaventory

Một chủ đề con như thế này sẽ không phải là một công cụ tốt để thêm mã tùy chỉnh, vì cùng một lý do mà bạn nên tránh thêm mã tùy chỉnh vào chủ đề mẹ; nếu có một bản cập nhật cho chủ đề con, tất cả mã tùy chỉnh của bạn sẽ bị ghi đè.

Sử dụng chủ đề con tùy chỉnh

Hoặc, bạn có thể tự tạo chủ đề con. Điều này giống như việc thêm một lớp lên trên chủ đề mẹ của bạn với mục đích duy nhất là ưu tiên cho mã tùy chỉnh của bạn và tránh mã của bạn bị hủy bỏ ở cập nhật tiếp theo của chủ đề mẹ của chúng tôi.

Bạn có thể tạo chủ đề con của mình bằng cách sử dụng hướng dẫn của chúng tôi; Thiết lập và sử dụng chủ đề con .  Thêm về cách các chủ đề con hoạt động cũng trên WordPress.org tại Chủ đề con .

Resources

Leave a Reply

Your email address will not be published.