EnglishDeutschελληνικάEspañolहिंदीHrvatskiBahasa IndonesiaPусскийукраїнська моваTiếng ViệtWhat You"ll Be CreatingWooCommerce cung cấp cho bạn một vài lựa chọn như những gì bạn có thể hiển thị trên các trang lưu trữ của bạn:sản phẩm danh mục (trên trang bán hàng chính) hoặc danh mục phụ (trên những trang danh mục) sản phẩm và danh mục Khi tôi thiết lập một cửa hàng, tôi thường dùng lựa chọn t" /> EnglishDeutschελληνικάEspañolहिंदीHrvatskiBahasa IndonesiaPусскийукраїнська моваTiếng ViệtWhat You"ll Be CreatingWooCommerce cung cấp cho bạn một vài lựa chọn như những gì bạn có thể hiển thị trên các trang lưu trữ của bạn:sản phẩm danh mục (trên trang bán hàng chính) hoặc danh mục phụ (trên những trang danh mục) sản phẩm và danh mục Khi tôi thiết lập một cửa hàng, tôi thường dùng lựa chọn t" />

Tạo danh mục sản phẩm trong wordpress

Difficulty:IntermediateLength:LongLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishDeutschελληνικάEspañolहिंदीHrvatskiBahasa IndonesiaPусскийукраїнська моваTiếng Việt
*
What You"ll Be Creating

WooCommerce cung ứng cho mình một vài ba lựa chọn như những gì chúng ta có thể hiện trên những trang tàng trữ của bạn:

sản phẩm danh mục (bên trên trang bán sản phẩm chính) hoặc hạng mục phụ (trên gần như trang danh mục) sản phẩm với hạng mục

Khi tôi cấu hình thiết lập một shop, tôi thường được sử dụng chọn lọc sản phẩm công nghệ 3: sản phẩm cùng danh mục/danh mục sản phẩm công nghệ cấp. có nghĩa là khách hàng xem shop của tôi rất có thể lựa chọn sản phẩm tức thì Home hoặc điều chỉnh lựa chọn search kiếm thông qua danh mục tàng trữ (archive) thành phầm.

Bạn đang xem: Tạo danh mục sản phẩm trong wordpress

Tuy nhiên, gồm một vụ việc với cách tiếp cận này: nó đồng thời hiển danh mục/danh mục phụ, không tồn tại sự bóc tách biệt duy trì nhì loại. Điều này có nghĩa là nếu như hình ảnh thành phầm của bạn có rất nhiều size khác nhau, thì bố cục tổng quan vẫn trngơi nghỉ đề xuất lộn xộn. Thậm chí ví như hình ảnh của khách hàng thuộc size, trường hợp một trong số chiếc của trang archive có cả danh mục với sản phẩm, thì sự thiếu vắng nút "Add lớn Cart" của hạng mục khiến cho loại đó trông thiếu thốn gọn gàng, không như những sản phẩm bao gồm những thành phần gồm cùng kích thước hệt nhau.

Trong bài lý giải này, tôi vẫn chỉ bạn làm sao nhằm hiển thị hạng mục thành danh sách tách bóc biệt trước khi hiển thị sản phẩm.

Để tiến hành vấn đề này, bọn họ sẽ theo 4 bước:

Xác định nguyenminhchau.com của WooCommerce thực hiện nhằm xuất hạng mục cùng danh mục phú trên những trang archive. Tạo một plugin đến nguyenminhchau.com của bọn họ. Viết một hàm để lấy danh mục hoặc danh mục phụ lên trước khi liệt kê thành phầm. Trang trí mang đến kết quả.

Nhưng trước lúc bước đầu, bạn sẽ đề xuất một phiên bản thiết lập WooCommerce cùng với vài sản phẩm được phân phối, với danh mục sản phẩm và danh mục phú được bổ sung cập nhật.

Điều các bạn sẽ cần

Để theo dõi, bạn sẽ cần:

Một phần tùy chỉnh trở nên tân tiến cho WordPress. Một trình biên tập nguyenminhchau.com. WooCommerce đã được thiết đặt cùng kích hoạt.

Trước Khi chúng ta bắt đầu: Các tuỳ chọn khoác định

Hãy coi WooCommerce gồm gì cho chúng ta dịp thuở đầu làm sao.

Tôi ban đầu bổ sung cập nhật vài ba hình hình họa cho các danh mục thành phầm với danh mục phú, bởi vì tài liệu ảo của WooCommerce ko bao gồm chúng. Tôi chỉ sử dụng một hình hình ảnh dễ dàng của những thành phầm cho mỗi danh mục hoặc danh mục phú, chúng ta có thể quan sát vào hình ảnh chụp màn hình:

*

Giờ hãy nhìn coi bí quyết WooCommerce hiển thị danh mục thành phầm cùng sản phẩm trong những trang archive sầu.

Nếu bạn không triển khai, hãy mang đến WooCommerce > Settings, lựa chọn tab Products, và tiếp đến lựa chọn tuỳ lựa chọn Display. Cho mỗi tuỳ lựa chọn của Shop Page DisplayDefault Category Display, lựa chọn Show both:

*

Chọn nút ít Save sầu changes để lưu phần đa tùy chỉnh thiết lập mới và trở về trang bán sản phẩm của bạn. Của tôi trông nạm này:

*

Vì tôi tất cả cha một số loại thành phầm với hình ảnh những dạnh mục của tớ bao gồm thuộc size với hình ảnh sản phẩm của mình, bố cục có vẻ như tương đối gọn gàng. Nhưng nghỉ ngơi đấy là một trong số phần tàng trữ hạng mục thành phầm.

*

Bởi do danh mục này còn có 2 hạng mục phú, thành phầm thứ nhất được hiển thị kề bên chúng, ngơi nghỉ dạng grid có 3 mục theo chiều rộng lớn. Tôi ao ước những hạng mục với hạng mục phụ của chính mình khá nổi bật rộng, cùng được hiển thị tách biệt khỏi list liệt kê sản phẩm. Vậy hãy làm cho điều ấy.

Xác định nguyenminhchau.com WooCommerce Sử Dụng để Xuất Danh Mục cùng Sản Phẩm trong Archives

Cách đầu tiên là khẳng định xem WooCommerce xuất danh mục với hạng mục phú thế nào. Vì vậy hãy xét kỹ phần mã mối cung cấp của WooCommerce nhằm tyên ra các hàm tất cả liên quan.

File nhưng mà WooCommerce thực hiện nhằm hiển thị trang archive sầu là archive-sản phẩm.php, nó phía bên trong tlỗi mục templates.

Trong tệp tin này, bạn có thể thấy đoạn nguyenminhchau.com này, nó xuất danh mục và thành phầm ra.

Xem thêm: Khóa Học Thiết Kế Web Tphcm Dành Cho Người Không Chuyên It 2019

Vậy có một hàm woocommerce_product_subcategories() xuất ra hầu như danh mục với hạng mục phú trước khi vấn đề chạy vòng lặp xuất những thành phầm được thực hiện.

Hàm này là plugginable, tức là bạn có thể override nó vào theme bắt đầu của ta. Thật rủi ro là điều này ko công dụng Lúc WooCommerce sẽ bao gồm style dựng sẵn mang đến Việc xoá các thành tựu, nó vẫn xuất hiện ngơi nghỉ ngay lập tức đầu từng mặt hàng cùng với hiển thị mặc định.

Vậy rứa chính vì vậy, chúng ta đang tắt tính năng hiển thị hạng mục cùng hạng mục prúc trên trang archive sầu, nhằm chỉ mang lại sản phẩm được hiển thị. Sau kia bọn họ sẽ khởi tạo một hàm new, nó đã xuất các hạng mục và danh mục phụ của thành phầm, và chạy hook vào hành động woocommerce_before_shop_loop, chắc rằng họ ưu tiên cao độ vì thế nó được Điện thoại tư vấn sau những hàm được hook vào vào hành động này.

Lưu ý: Bởi vị WooCommerce bổ sung cập nhật clear vào hầu như thành phầm máy bố trong phần liệt kê, nên chúng tôi không thể sử dụng hàm woocommerce_product_subcategories() hoặc một phiên bản vẫn điều chỉnh của nó để hiển thị các danh mục. Vấn đề này xảy ra bởi nó đang xoá đi danh mục thiết bị 3, đồ vật 6 cùng cứ đọng vắt hoặc thành phầm được liệt kê, thậm chí lúc họ dùng hàm này để hiển thị những hạng mục riêng biệt. Chúng ta có thể override nó, tuy thế dễ dàng và đơn giản rộng là chỉ cần viết hàm của riêng chúng ta.

Vậy hãy sinh sản một plugin để làm điều đó.

Tạo plugin.

Trong tlỗi mục wp-content/plugins, chế tạo ra một folder bắt đầu cùng cho nó một cái tên độc đáo. Tôi goi tên plugin của mình là nguyenminhchau.com-separate-products-categories-in-archives. Bên trong những số ấy, sản xuất một tệp tin mới, cũng khắc tên độc nhất vô nhị nhé. Tôi thực hiện thuộc tên: nguyenminhchau.com-separate-products-categories-in-archives.php.

Mnghỉ ngơi tệp tin của khách hàng và bổ sung cập nhật đoạn nguyenminhchau.com sau:

Có lẽ bạn muốn sửa đổi công bố của author vị đây là plugin vị bạn tạo thành. Lưu file của công ty lại với kích hoạt plugin trải qua trang quản trị của WordPress.

Viết hàm của bọn chúng ta

Bây giờ đồng hồ hãy viết hàm đó làm sao. Nhưng trước lúc ban đầu, hãy tắt phần liệt kê hạng mục trong screen quản ngại trị. Đi mang đến WooCommerce > Settings, lựa chọn tab Products, cùng lựa chọn tuỳ chọn Display. Cho từng tuỳ lựa chọn Shop Page Display với Default Category Display, chọn Show products. Lưu thay đổi của người sử dụng.

Trang bán sản phẩm của chúng ta tiếng trông cố gắng này:

*

Trong tệp tin plugin của doanh nghiệp, té sung:

function nguyenminhchau.com_product_subcategories( $args = array() ) }add_action( "woocommerce_before_shop_loop", "nguyenminhchau.com_product_subcategories", 50 );Giờ thêm đoạn nguyenminhchau.com này vào vào hàm:

$parentid = get_queried_object_id(); $args = array("parent" => $parentid);$terms = get_terms( "product_cat", $args );if ( $terms ) emang đến "";foreach ( $terms as $term ) emang đến "";echo "";Hãy xem qua hạm này làm cho gì:

Nó xác minh đối tượng người tiêu dùng được truy tìm vấn hiện thời cùng có mang id của chính nó mang đến đổi mới số $parentid. Nó áp dụng hàm get_terms() nhằm khẳng định các điều kiện với phần lớn nhà cửa đang được truy hỏi vấn như là những thành công thời thượng của chính nó. Nếu đó là trang bán sản phẩm chủ yếu, thì nó đã trả về danh mục cấp lớn số 1, giả dụ nó là trang tàng trữ, nó sẽ trả về đa số danh mục phụ. Sau đó nó bình chọn xem tất cả bất kể ĐK làm sao mãi mãi, trước khih chạy vòng lặp foreach với một yếu tắc ul. Cho từng điều kiện, nó tạo thành một nhân tố li, với tiếp nối xuất ra ảnh mang lại hạng mục áp dụng hàm woocommerce_subcatgeory_thumbnail(), sau đó là tên của danh mục vào một links trỏ mang đến archive sầu của nó.

Giờ lưu tệp tin của người sử dụng lại và mua lại trang bán sản phẩm thiết yếu. Của tôi trông cố kỉnh này đây:

*

Danh mục được hiển thị, nhưng lại bọn chúng cần được tô điểm. Tiếp theo hãy thực hiện điều này:

Trang trí đến danh sách liệt kê danh mục

Để bạn cũng có thể bổ sung cập nhật tô điểm, họ yêu cầu một stylesheet phía bên trong plugin, nó vẫn cần phải enqueue.

Trong thỏng mục plugin, chế tạo một thư mục thương hiệu css, với bên phía trong đó, sinh sản một tệp tin tên gọi style.css

Giờ vào tệp tin plugin của doanh nghiệp, bổ sung phần này ngay phía trên hàm các bạn đã chế tạo ra:

function nguyenminhchau.com_product_cats_css() /* register the stylesheet */ wp_register_style( "nguyenminhchau.com_product_cats_css", plugins_url( "css/style.css", __FILE__ ) ); /* enqueue the stylsheet */ wp_enqueue_style( "nguyenminhchau.com_product_cats_css" ); add_action( "wp_enqueue_scripts", "nguyenminhchau.com_product_cats_css" );Nó enqueue đúng cùng với stylesheet các bạn vừa bắt đầu tạo.

Xem thêm: Cách Sửa Lỗi Your Connection Is Not Private ” Trong Chrome, Sửa Lỗi Ssl Your Connection Is Not Private

Giờ mngơi nghỉ stylesheet ra với bổ sung cập nhật đoạn nguyenminhchau.com sau: WooCommerce theo phong thái mobile-first (ưu tiên mang đến máy di động), chính vì như vậy bọn họ cũng trở nên làm cho như thế.

ul.product-cats li list-style: none;margin-left: 0;margin-bottom: 4.236em;text-align: center;position: relative;ul.product-cats li img margin: 0 auto;

Chuyên mục: Lỗi Kỹ Thuật