Cách nhận danh mục sản phẩm trong WooC Commerce

Khi thiết lập cửa hàng, tôi thường chọn tùy chọn thứ ba. sản phẩm và danh mục/danh mục phụ. Điều này có nghĩa là khách truy cập vào cửa hàng của tôi có thể chọn sản phẩm ngay từ trang chủ hoặc tinh chỉnh tìm kiếm của họ bằng cách nhấp qua kho lưu trữ danh mục sản phẩm

Tuy nhiên, có một thất bại với phương pháp này. Nó hiển thị các danh mục/danh mục con cùng nhau, không có sự tách biệt giữa hai danh mục. Điều này có nghĩa là nếu hình ảnh sản phẩm của bạn có kích thước khác với hình ảnh sản phẩm, thì bố cục có thể trông hơi lộn xộn. Ngay cả khi hình ảnh của bạn có cùng kích thước, nếu một trong các dòng trong trang lưu trữ bao gồm cả danh mục và sản phẩm, thì việc không có nút 'Thêm vào giỏ hàng' cho các danh mục sẽ khiến hàng đó trông lộn xộn, vì không phải tất cả các thành phần của nó đều có

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách hiển thị danh mục trong danh sách riêng trước khi hiển thị sản phẩm

Để làm điều này, chúng tôi sẽ làm theo bốn bước

1. Xác định mã mà WooC Commerce sử dụng để xuất các danh mục và danh mục con trên các trang lưu trữ
2. Tạo một plugin cho mã của chúng tôi
3. Viết hàm để đặt danh mục hoặc danh mục con trước danh sách sản phẩm
4. Tạo kiểu cho đầu ra

Nhưng trước khi bắt đầu, bạn sẽ cần cài đặt WooC Commerce với một số sản phẩm được thêm vào cũng như danh mục sản phẩm và danh mục phụ được thiết lập

Những gì bạn cần

Để làm theo, bạn sẽ cần

• cài đặt phát triển của WordPress
• một trình soạn thảo mã
• WooC Commerce đã cài đặt và kích hoạt
• sản phẩm đã thêm—Tôi đã nhập dữ liệu sản phẩm giả đi kèm với WooC Commerce;
• một chủ đề tương thích với WooC Commerce đã được kích hoạt—Tôi đang sử dụng Storefront

Trước khi chúng ta bắt đầu. Tùy chọn mặc định

Hãy xem những gì WooC Commerce cung cấp cho chúng tôi theo mặc định

Tôi đã bắt đầu bằng cách thêm một số hình ảnh vào danh mục sản phẩm và danh mục con của mình vì dữ liệu giả của WooC Commerce không bao gồm những hình ảnh đó. Tôi chỉ đơn giản sử dụng hình ảnh của một trong các sản phẩm từ mỗi danh mục hoặc danh mục con, như bạn có thể thấy trong ảnh chụp màn hình

Bây giờ, hãy xem cách WooC Commerce hiển thị danh mục sản phẩm và sản phẩm trên các trang lưu trữ

Nếu bạn chưa có, hãy mở Tùy biến, chọn tab WooC Commerce và nhấp vào Danh mục sản phẩm.  

Trong Hiển thị trang cửa hàng, hãy chọn Hiển thị danh mục & sản phẩm và trong Hiển thị danh mục, hãy chọn Hiển thị danh mục phụ & sản phẩm

Nhấp vào Xuất bản để lưu các thay đổi của bạn và truy cập trang cửa hàng trên trang web của bạn. Của tôi trông như thế này

Vì tôi có bốn danh mục và một lưới gồm ba hình ảnh cạnh nhau nên hai sản phẩm đầu tiên được hiển thị cùng với một trong các danh mục

Tôi muốn làm cho các danh mục và danh mục phụ của mình nổi bật hơn và chỉ cần trình bày chúng tách biệt khỏi danh sách sản phẩm. Vì vậy, hãy làm điều đó

Xác định mã mà WooC Commerce sử dụng để xuất danh mục và sản phẩm trong kho lưu trữ

Bước đầu tiên là xác định cách WooC Commerce xuất các danh mục và danh mục con. Vì vậy, hãy đi sâu vào mã nguồn WooC Commerce để tìm chức năng có liên quan

Tệp mà WooC Commerce sử dụng để hiển thị các trang lưu trữ là sản phẩm lưu trữ. php nằm trong thư mục mẫu 

Trong tệp đó, bạn có thể tìm thấy mã này, mã này xuất ra các danh mục và sản phẩm

1

2

    /**

3

     * woocommerce_before_shop_loop hook

4

     *

5

     * @hooked woocommerce_result_count - 20

0

1

2

3

4

5

6

7

8

9

2

0

2

1

2

2

9

2

4

2

5

2

6

9

2

8

2

9

    /**

0

9

    /**

2

    /**

3

    /**

4

9

    /**

6

    /**

7

    /**

8

9

3

0

3

1

Vì vậy, có một hàm 

82 xuất các danh mục hoặc danh mục con, trước khi chạy vòng lặp, xuất các sản phẩm.  

Chức năng này có thể cắm được, có nghĩa là chúng tôi có thể ghi đè lên nó trong chủ đề của mình. Thật không may, điều đó không hoạt động tốt vì WooC Commerce có kiểu dáng tích hợp để xóa các mục, sẽ xuất hiện ở đầu hàng với màn hình mặc định.  

Vì vậy, thay vì điều đó, chúng tôi sẽ tắt hiển thị các danh mục và danh mục con trên các trang lưu trữ của chúng tôi để chỉ các sản phẩm được hiển thị. Sau đó, chúng ta sẽ tạo một hàm mới để xuất các danh mục hoặc danh mục con của sản phẩm và nối nó với hành động

83, đảm bảo rằng chúng ta sử dụng mức độ ưu tiên cao để nó kích hoạt sau các chức năng đã được nối với hành động đó

Ghi chú. Vì WooC Commerce thêm thông tin rõ ràng vào từng danh sách sản phẩm thứ ba nên chúng tôi không thể sử dụng hàm 

82 hoặc phiên bản đã chỉnh sửa của nó để hiển thị các danh mục. Điều này là do nó sẽ xóa danh mục hoặc sản phẩm thứ ba, thứ sáu (v.v.) được liệt kê, ngay cả khi chúng tôi sử dụng chức năng này để hiển thị các danh mục riêng biệt. Chúng tôi có thể cố gắng ghi đè lên điều đó, nhưng đơn giản hơn là viết chức năng của riêng chúng tôi

Vì vậy, hãy tạo một plugin thực hiện điều đó

Tạo Plugin

Trong thư mục wp-content/plugins của bạn, hãy tạo một thư mục mới và đặt tên riêng cho thư mục đó. Tôi đang gọi tutsplus-separate-products-categories-in-archives của tôi. Bên trong đó, tạo một tệp mới, một lần nữa với một tên duy nhất. Tôi đang sử dụng cùng một tên. tutsplus-separate-products-categories-in-archives. php

Mở tệp của bạn và thêm mã này vào nó

1

2

3

5

3

3

7

4

3

9

5

     * woocommerce_before_shop_loop hook

1

0

     * woocommerce_before_shop_loop hook

3

2

     * woocommerce_before_shop_loop hook

5

4

     * woocommerce_before_shop_loop hook

7

6

     * woocommerce_before_shop_loop hook

9

8

     * woocommerce_before_shop_loop hook

9

2

0

4

3

Bạn có thể muốn chỉnh sửa chi tiết tác giả vì đây là plugin bạn đang viết. Lưu tệp của bạn và kích hoạt plugin thông qua quản trị viên WordPress

Viết chức năng của chúng tôi

Bây giờ hãy viết hàm. Nhưng trước khi bắt đầu, hãy tắt danh sách danh mục trên màn hình quản trị. Mở Tùy biến, nhấp vào tùy chọn WooC Commerce và nhấp vào Danh mục sản phẩm. Đối với mỗi tùy chọn Hiển thị trang cửa hàng và Hiển thị danh mục mặc định, hãy chọn Hiển thị sản phẩm. Lưu các thay đổi của bạn bằng cách nhấp vào Xuất bản

Trang cửa hàng của bạn bây giờ sẽ trông giống như thế này

Trong tệp plugin của bạn, hãy thêm cái này

1

____65

2

____4

4

8

4

5

     *

1

Bây giờ, hãy thêm mã này vào bên trong hàm

1

     *

3

2

3

     *

6

4

     *

8

5

5

0

0

2

5

3

4

6

5

6

8

5

8

2

0

2

2

     * @hooked woocommerce_result_count - 20

1

2

4

     * @hooked woocommerce_result_count - 20

3

2

6

     * @hooked woocommerce_result_count - 20

5

2

8

     * @hooked woocommerce_result_count - 20

7

    /**

0

     * @hooked woocommerce_result_count - 20

9

    /**

2

01

    /**

4

03

    /**

6

05

    /**

8

07

3

0

09

10

11

12

13

4

8

Hãy xem chức năng đó làm gì

• Nó xác định đối tượng được truy vấn hiện tại và xác định id của đối tượng đó là 
  85
• Nó sử dụng
  86 để xác định các thuật ngữ với mục hiện được truy vấn là cấp độ gốc của chúng. Nếu đây là trang cửa hàng chính, nó sẽ trả về các danh mục cấp cao nhất;
• Sau đó, nó sẽ kiểm tra xem có bất kỳ thuật ngữ nào không, trước khi mở một vòng lặp for và một phần tử 
  87
• Đối với mỗi cụm từ, nó tạo một phần tử 
  88 và sau đó xuất hình ảnh danh mục bằng cách sử dụng 
  89,  theo sau là tên danh mục trong một liên kết đến kho lưu trữ của nó

Bây giờ hãy lưu tệp của bạn và làm mới trang cửa hàng chính. Của tôi trông như thế này

Các danh mục được hiển thị, nhưng chúng cần một số kiểu dáng. Hãy làm điều đó tiếp theo

Tạo kiểu cho danh sách danh mục

Để chúng tôi có thể thêm kiểu dáng, chúng tôi cần một biểu định kiểu bên trong plugin của chúng tôi, chúng tôi sẽ cần ghi vào hàng đợi

Trong thư mục plugin của bạn, hãy tạo một thư mục có tên là css và bên trong đó, hãy tạo một tệp có tên là style. css

Bây giờ, trong tệp plugin của bạn, hãy thêm phần này vào bên trên chức năng bạn đã tạo

1

16_______2

18

3

20

4

22

5

24

0

4

8

2

4

29

Điều này liệt kê chính xác biểu định kiểu bạn vừa tạo

Bây giờ hãy mở biểu định kiểu của bạn và thêm mã bên dưới. WooC Commerce sử dụng kiểu dáng ưu tiên thiết bị di động, vì vậy đó cũng là những gì chúng tôi sẽ sử dụng

1

31

2

33

3

4

8

4

5

38

0

40

2

33

4

44

6

46

8

48

2

0

4

8

2

2

2

4

53

2

6

55

2

8

4

8

    /**

0

    /**

2

60

    /**

4

    /**

6

63

    /**

8

65

3

0

67

10

69

11

09

13

73

74

75

76

77

09

79

80

4

8

Tôi đã sao chép chính xác chiều rộng và lề từ kiểu dáng được sử dụng bởi WooC Commerce

Bây giờ hãy kiểm tra lại trang cửa hàng chính của bạn. Đây là của tôi

Đây là kho lưu trữ danh mục Quần áo

Và đây là giao diện của nó trên màn hình nhỏ hơn

Tóm lược

Danh mục sản phẩm là một tính năng tuyệt vời của WooC Commerce, nhưng cách chúng được hiển thị không phải lúc nào cũng lý tưởng. Trong hướng dẫn này, bạn đã học cách tạo một phần bổ trợ xuất danh mục sản phẩm hoặc danh mục con riêng biệt với danh sách sản phẩm và sau đó bạn đã tạo kiểu cho danh sách danh mục của mình

Bạn có thể sử dụng mã này để xuất danh sách danh mục hoặc danh mục phụ ở nơi khác trên trang (ví dụ: bên dưới sản phẩm), bằng cách nối hàm với móc hành động khác trong tệp mẫu WooC Commerce

Nếu bạn hiện đang điều hành một cửa hàng mà bạn muốn mở rộng hoặc bạn đang tìm kiếm một số plugin bổ sung để nghiên cứu vì nó liên quan đến WooC Commerce, đừng ngần ngại xem những plugin nào có sẵn trên CodeCanyon

Các plugin WooC Commerce tốt nhất cho năm 2021 trên CodeCanyon

CodeCanyon cung cấp các plugin WooC Commerce WordPress linh hoạt và giàu tính năng nhất trên thị trường và sẽ thêm một khía cạnh chức năng khác vào cửa hàng trực tuyến của bạn mà người dùng đã quen thuộc

Cho dù bạn cần triển khai các trường tùy chỉnh và nội dung tải lên, hiển thị nhiều đơn vị tiền tệ hay cung cấp tư cách thành viên, các plugin WooC Commerce đa dạng có sẵn trên CodeCanyon có thể giúp bạn hoàn thành các tác vụ này.  

Ngoài tất cả các plugin WooC Commerce chất lượng cao hiện có, còn có hàng nghìn plugin WordPress chất lượng cao khác trên CodeCanyon có thể giúp cải thiện trang web của bạn. Hãy xem qua thư viện plugin phong phú và bạn sẽ tìm thấy tất cả các loại plugin, bao gồm plugin diễn đàn, phương tiện và SEO

Tận dụng thư viện khổng lồ gồm các plugin WordPress chất lượng cao trên CodeCanyon ngay bây giờ

Các plugin WooC Commerce bán chạy nhất trên CodeCanyon

Nếu bạn muốn được trợ giúp để chọn plugin WooC Commerce phù hợp với mình, hãy xem các bài đăng khác tại đây trên Envato Tuts+