Liên kết trang ACF lấy tiêu đề ✅ Đầy đủ
Thủ Thuật về Liên kết trang ACF lấy tiêu đề Mới Nhất
Dương Anh Sơn đang tìm kiếm từ khóa Liên kết trang ACF lấy tiêu đề được Update vào lúc : 2022-12-26 10:15:16 . Với phương châm chia sẻ Bí quyết Hướng dẫn trong nội dung bài viết một cách Chi Tiết Mới Nhất. Nếu sau khi Read tài liệu vẫn ko hiểu thì hoàn toàn có thể lại Comment ở cuối bài để Admin lý giải và hướng dẫn lại nha.Sau nhiều giờ nỗ lực tìm ra nó, ở đầu cuối tôi đã tìm ra cách thêm một loại bài đăng tùy chỉnh hoạt động và sinh hoạt giải trí. WAHOO
Nội dung chính Show- Bước 1. Cài đặt plugin Trường tùy chỉnh nâng cao (ACF)Bước 2. Thêm một nhóm trường tùy chỉnh3. Tạo một trường tùy chỉnh4. Chỉnh sửa một sản phẩm5. Hiển thị trường tùy chỉnh của chúng tôi trên trang sản phẩmSử dụng những hiệu suất cao của chủ đề con. tập tin phpHoặc, sử dụng plugin Đoạn mãTạo hiệu suất cao tùy chỉnhThêm trường tùy chỉnh dưới hình ảnh sản phẩmNhưng nếu tôi đang sử dụng thư viện sản phẩm thì sao?Định vị những trường tùy chỉnh ở cuối trang sản phẩmHiển thị trường tùy chỉnh trên shop/catalogThưởng. Sử dụng ACF để tạo huy hiệu tùy chỉnhPhần kết luận
Tuy nhiên, tôi không thể vô hiệu những. p-meta từ loại bài đăng tùy chỉnh. Hoặc ít nhất là không thông qua Global CSS. Tôi đang sử dụng đĩa đơn. Công ty. mẫu php trong chủ đề con của tôi
Tôi đã thử mọi biến thể của. Độc thân,. công ty đơn lẻ,. Độc thân. Công ty,. công ty duy nhất,. Công ty
Một yêu cầu khá phổ biến đối với những trang web WooC Commerce là cần gồm có những trường đầu vào tương hỗ update trên trang sản phẩm duy nhất và xuất chúng trên giao diện người tiêu dùng. Tôi sẽ lý giải cách thực hiện việc này bằng plugin Trường tùy chỉnh nâng cao tuyệt vời (phiên bản miễn phí)
Sẽ có một chút ít mã hóa liên quan nhưng đừng lo ngại, tất cả đều rất đơn giản. Và có thêm sự hài lòng lúc biết rằng giờ đây bạn hoàn toàn có thể mở rộng WooC Commerce một cách mạnh mẽ và tự tin
Tôi sẽ lý giải một số trong những trường hợp sử dụng rất khác nhau với những ví dụ cho từng trường hợp. Tôi sẽ sử dụng chủ đề Shoptimizer WooC Commerce của chúng tôi nhưng những đoạn mã sẽ hoạt động và sinh hoạt giải trí với mọi chủ đề WooC Commerce
Bắt đầu nào
Bước 1. Cài đặt plugin Trường tùy chỉnh nâng cao (ACF)
Đầu tiên, tải xuống và kích hoạt phiên bản miễn phí của plugin Trường tùy chỉnh nâng cao. Bạn hoàn toàn có thể làm điều này trong phần Plugins của WordPress nếu bạn tìm kiếm nó. Sau khi hoàn tất, hãy vào khu vực Trường tùy chỉnh mới trong bảng điều khiển WordPress của bạn để thiết lập một trường
Bước 2. Thêm một nhóm trường tùy chỉnh
Trong khu vực Trường tùy chỉnh, nhấp vào nút Thêm mới để tạo nhóm trường mới. Đây là nơi mà mọi thứ trở nên thú vị
Chúng tôi sẽ đặt tên cho nhóm trường này là Sản phẩm Đơn lẻ (nó hoàn toàn có thể là bất kỳ thứ gì). Chúng tôi cũng tiếp tục thay đổi quy tắc Vị trí để hiển thị điều này khi loại bài đăng tương đương với Sản phẩm. Lưu nó ở quá trình này
3. Tạo một trường tùy chỉnh
Vì vậy, điều này thiết lập cấu trúc của chúng tôi. Tiếp theo, tất cả chúng ta sẽ cần thực sự gồm có một trường. Vì vậy, hãy nhấp vào nút Thêm trường
Đối với ví dụ này, giả sử chúng tôi là một shop sách trực tuyến và muốn gồm có trường Tác giả mới mà chúng tôi muốn hiển thị phía trên tiêu đề trên trang sản phẩm. Hãy nhớ rằng, đây chỉ là minh chứng cho những gì bạn hoàn toàn có thể làm. Bạn hoàn toàn có thể thay đổi nó từ tác giả thành bất kể thứ gì bạn thích
Bạn hoàn toàn có thể thấy chúng tôi hiện đã tạo trường Tác giả. Tên trường chỉ đơn giản là tác giả - điều này rất quan trọng vì chúng tôi sẽ sớm sử dụng tên này. Loại trường cũng chỉ là một kiểu nhập Văn bản đơn giản. Bạn hoàn toàn có thể gồm có những hướng dẫn nếu bạn thích
4. Chỉnh sửa một sản phẩm
Bây giờ, trường tác giả đã được tạo, hãy sửa đổi sản phẩm. Trong trình sửa đổi, bạn sẽ thấy kiểu nhập văn bản Tác giả mới của chúng tôi. Thành công. Đây là một khởi đầu tốt
Bạn hoàn toàn có thể thêm một số trong những nội dung vào trường và lưu sản phẩm của tớ nhưng trường văn bản mới này sẽ không được xuất trên trang web của bạn
Chúng ta sẽ xem xét điều đó tiếp theo. Bạn đã sẵn sàng để xem một số trong những mã đơn giản chưa?
5. Hiển thị trường tùy chỉnh của chúng tôi trên trang sản phẩm
Vì vậy, trước khi tất cả chúng ta khởi đầu viết mã, hãy nói một chút ít về vị trí đặt mã này. Bạn phải luôn đặt mã tùy chỉnh ở một trong hai nơi
Sử dụng những hiệu suất cao của chủ đề con. tập tin php
Chúng tôi đã sẵn sàng sẵn sàng một chủ đề con cho Shoptimizer, bạn hoàn toàn có thể tải xuống và setup
Chủ đề con được tải lên tương tự như bất kỳ chủ đề nào – trong Giao diện > Chủ đề > Thêm mới. Bạn hoàn toàn có thể thêm mã tùy chỉnh trong những hiệu suất cao. php của chủ đề con. Một cách nhanh gọn để thực hiện việc này là trong chính WordPress, trong Trình sửa đổi chủ đề. Giao diện> Trình sửa đổi chủ đề
Đảm nói rằng chủ đề con của bạn được chọn và bạn không vô tình sửa đổi chủ đề gốc
Hoặc, sử dụng plugin Đoạn mã
Một plugin bạn nói? . Chúng tôi tự sử dụng nó trên CommerceGurus. Đó là một nơi tuyệt vời để đặt những đoạn mã tùy chỉnh mà bạn hoàn toàn có thể kích hoạt và hủy kích hoạt bất kể lúc nào bạn muốn mà không còn bất kỳ rủi ro nào khi bạn vô tình làm hỏng shop của tớ
Tạo hiệu suất cao tùy chỉnh
Để xuất trường Tác giả mới của chúng tôi trên trang sản phẩm duy nhất, bạn hoàn toàn có thể sử dụng đoạn mã sau
PHP1
2
3
4
5
6
7
8
add_action( 'woocommerce_single_product_summary', 'shoptimizer_custom_author_field', 3 );
function shoptimizer_custom_author_field() ?>
if(get_field( if(get_field('author')) ?>
div class="cg-author"> the_field('author'); ?>/div>
}
Nó khá đơn giản. Hãy xem từng dòng một
PHP1
add_action( 'woocommerce_single_product_summary', 'shoptimizer_custom_author_field', 3 );
Chúng tôi đã tạo một hiệu suất cao mới gọi là shoptimizer_custom_author_field (bạn hoàn toàn có thể đặt tên cho nó là gì rồi cũng khá được) và đang nối nó vào phần woocommerce_single_product_summary của trang sản phẩm duy nhất ở vị trí 3
Chúng tôi đã lấy tiêu đề hook woocommerce_single_product_summary này ở đâu?
Có một hướng dẫn trực quan tuyệt vời từ Business Bloomer đến Single Product hooks hiển thị tất cả những hook bạn hoàn toàn có thể sử dụng và vị trí hiện tại của chúng. Ngoài ra, bạn hoàn toàn có thể đọc thêm về WooC Commerce Hooks trong hướng dẫn của chúng tôi
Đây là những vị trí móc WooC Commerce tiêu chuẩn được sử dụng cho tiêu đề, xếp hạng, giá và văn bản ra mắt. Lưu ý những số sau mỗi số, chúng chỉ định thứ tự của những phần tử
PHP1
2
3
4
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
Vì vậy, tiêu đề hiển thị đầu tiên, sau đó là xếp hạng, sau đó là giá, sau đó là văn bản trích đoạn
Vì tiêu đề của WooC Commerce nằm ở vị trí 5 nên tôi đã đặt hiệu suất cao tùy chỉnh cho tác giả của chúng tôi ở vị trí 3, vì vậy nó sẽ xuất hiện trước tiêu đề
Nếu chúng tôi muốn văn bản tác giả của chúng tôi xuất hiện sau tiêu đề? . Tất cả sẽ hoạt động và sinh hoạt giải trí
Hãy xem phần còn sót lại của mã
PHP1
2
3
4
5
6
function shoptimizer_custom_author_field() ?>
if(get_field( if(get_field('author')) ?>
div class="cg-author"> the_field('author'); ?>/div>
}
Phần còn sót lại của hiệu suất cao là một kiểm tra đơn giản để xem liệu một trường mang tên là tác giả có tồn tại hay là không. Hãy nhớ rằng, chúng tôi đã đặt tên này trước đó
Nếu nó tìm thấy trường, nó sẽ xuất ra nó được bao bọc trong một div mà bạn hoàn toàn có thể tạo kiểu bằng CSS tùy chỉnh nếu muốn
Kết quả trông in như ảnh chụp màn hình hiển thị phía dưới. tiếng hoan hô
Thêm trường tùy chỉnh dưới hình ảnh sản phẩm
Hãy gồm có một trường tùy chỉnh khác, lần này phía dưới hình ảnh sản phẩm. Chúng tôi sẽ sử dụng nó để đánh giá những trích dẫn thường được in ở mặt sau của bìa sách
Vì vậy, hãy quay lại khu vực Trường tùy chỉnh và tạo một trường mới mà chúng tôi sẽ gọi là Báo giá. Tên trường là một dấu ngoặc kép chữ thường
Sự khác lạ đó đó là tôi đã thay đổi Loại trường thành trình soạn thảo WYSIWYG. Điều này sẽ gồm có toàn bộ trình soạn thảo văn bản WordPress để được cho phép tôi định dạng mẫu mã nội dung
Bây giờ, khi tôi sửa đổi một sản phẩm, tôi sẽ thấy trường mới này, cạnh bên mục nhập văn bản tác giả đã tạo trước đó của tôi
Hãy thêm một số trong những nội dung vào trường này và lưu nó. Một lần nữa, sẽ không hiển thị, chúng tôi sẽ cần tạo một hiệu suất cao tùy chỉnh để làm như vậy
Mã tùy chỉnh để hiển thị điều này rất giống với những gì chúng tôi đã sử dụng cho văn bản tác giả. Chúng ta hoàn toàn có thể sử dụng như sau
PHP1
2
3
4
5
6
7
8
add_action( 'woocommerce_product_thumbnails', 'shoptimizer_custom_quotes_field', 30 );
function shoptimizer_custom_quotes_field() ?>
if(get_field( if(get_field('quotes')) ?>
div class="cg-quotes"> the_field('quotes'); ?>/div>
}
Như bạn hoàn toàn có thể thấy, chúng tôi đã thay đổi tài liệu tham khảo từ tác giả sang trích dẫn xuyên suốt
Ngoài ra, sự khác lạ rõ ràng nhất khác là loại đầu tiên
PHP1
add_action( 'woocommerce_product_thumbnails', 'shoptimizer_custom_quotes_field', 30 );
Chúng tôi muốn đặt trường tùy chỉnh mới này phía dưới hình ảnh hoặc thư viện sản phẩm hiện có. Một lần nữa, Hướng dẫn móc trực quan cho một sản phẩm rất hữu ích
Chúng ta hoàn toàn có thể thấy trong hướng dẫn rằng đây là hành vi hiện có hiển thị hình thu nhỏ của cục sưu tập hình ảnh sản phẩm
PHP1
add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
Nó được gọi là woocommerce_show_product_thumbnails. Và nó được nối vào khu vực woocommerce_products_thumbnails
Vì vậy, chúng tôi sẽ sử dụng cùng khu vực woocommerce_products_thumbnails này để hiển thị hook tùy chỉnh của riêng mình – tuy nhiên với mức độ ưu tiên là 30 – để nó hiển thị phía dưới
Cuối cùng, chúng tôi sẽ thêm một vài dòng CSS tùy chỉnh, nhắm tiềm năng tên lớp cg-quotes mà chúng tôi đã đặt tên là div của tớ. Nó hoàn toàn có thể được đưa vào khu vực Giao diện> Tùy chỉnh> CSS tương hỗ update để thuận tiện
CSS1
2
3
4
5
6
7
div. sản phẩm. trích dẫn cg
padding-top. 20px;
chỉnh sửa văn bản. trung tâm;
div. sản phẩm. cg-quotes p
lề dưới. 5px;
Hãy nhìn vào kết quả
Thành công. Chúng tôi hoàn toàn có thể thấy trường làm giá mới của tớ được hiển thị phía dưới thư viện sản phẩm. CSS tùy chỉnh của chúng tôi đã căn giữa phần này và thắt chặt lề Một trong những đoạn văn
Nhưng nếu tôi đang sử dụng thư viện sản phẩm thì sao?
Mặc dù kỹ thuật trên hoạt động và sinh hoạt giải trí tốt nếu bạn chỉ có một hình ảnh sản phẩm, nhưng nó sẽ không hoạt động và sinh hoạt giải trí nếu bạn đang sử dụng thư viện WooC Commerce tiêu chuẩn. Trong một sự giám sát kỳ lạ, thư viện WooC Commerce không sử dụng vùng móc wooc Commerce_product_thumbnails. Thực sự không còn bất kỳ phương pháp nào để đưa nội dung vào thư viện, trừ khi bạn ghi đè lên hình ảnh sản phẩm. mẫu php
Nhưng mà. Nếu bạn đủ thông minh để sử dụng Shoptimizer và thư viện sản phẩm tuyệt vời của riêng chúng tôi, như một phần của CommerceKit, chúng tôi đã gồm có những hook mà bạn hoàn toàn có thể sử dụng
Nó mang tên là commercekit_after_gallery và vâng, bạn cũng hoàn toàn có thể sử dụng commercekit_before_gallery
Định vị những trường tùy chỉnh ở cuối trang sản phẩm
Điều tiếp theo tôi muốn làm phức tạp hơn một chút ít. Tôi muốn thêm tiểu sử tác giả vào cuối trang sản phẩm. Đó là sau những tab
Tiểu sử sẽ gồm có
- Tên tác giả (chúng tôi đã có nó)Đôi nét về tác giảẢnh hồ sơ
May mắn thay, sự phối hợp của chúng tôi về Trường tùy chỉnh nâng cao, hiệu suất cao tùy chỉnh và một chút ít CSS giúp đạt được điều này khá thuận tiện và đơn giản
Vì vậy, hãy quay lại phần Trường tùy chỉnh của bạn và thêm hai trường mới
Đầu tiên, chúng tôi sẽ gọi Tiểu sử và sẽ là một vùng văn bản. Cái thứ hai chúng tôi sẽ gọi là Ảnh hồ sơ. Nó trông như vậy này
Chúng tôi đang sử dụng trường hình ảnh cho việc này và bạn cần đảm nói rằng ID hình ảnh được chọn cạnh bên tiêu đề 'Định dạng trả về'
Bây giờ, khi chúng tôi sửa đổi một sản phẩm, chúng tôi sẽ thấy hai trường mới này và hoàn toàn có thể gồm có nội dung tiểu sử của chúng tôi trong đó
Chúng tôi đã có trường Tên tác giả từ trước đó, vì vậy đó là mọi thứ chúng tôi cần để hiển thị phần tiểu sử
Hàm tùy chỉnh mà tất cả chúng ta cần phức tạp hơn một chút ít vì tất cả chúng ta sẽ phối hợp tất cả những trường này cũng như một số trong những div gói để cấu trúc bố cục
PHP1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
add_action( 'woocommerce_product_after_tabs', 'shoptimizer_custom_biography', 10 );
function shoptimizer_custom_biography() ?>
div class="cg-bio->
div class="cg-bio->
h2>Giới thiệu về của author/h2>
div class="cg-bio->
$bio_image = get_field('profile_photo');
$size = 'full';
if( $bio_image )
echo ';
echo wp_get_attachment_image( $bio_image, $size );
echo '';
?>
div class="cg-bio->
if(get_field( if(get_field('author')) ?>
h3>?php the_field('author'); ?>/h3>
?> ?>
if(get_field( if(get_field('biography')) ?>
p>?php the_field('biography'); ?>/p>
?> } ?>
/div>!--/cg-bio-text-->
/div>!--/cg-bio-inner -->
/div>!--/cg-bio-wrapper -->
/div>!--/cg-bio-container -->
}
Dòng đầu tiên tất nhiên là móc của chúng tôi. Một lần nữa, tham khảo hướng dẫn Visual hooks là vấn đề tốt nhất nên làm vì tất cả chúng ta hoàn toàn có thể thấy rằng tất cả chúng ta nên sử dụng hành vi woocommerce_product_data_tabs để đặt nội dung của tớ sau những tab
Ngoài một số trong những div gói, mã mới duy nhất khác được sử dụng để hiển thị ảnh hồ sơ tiểu sử của chúng tôi
Chúng tôi sẽ cần thêm một số trong những CSS tùy chỉnh để trình bày điều này một cách ngăn nắp và chúng tôi hoàn toàn có thể sử dụng sức mạnh mẽ và tự tin của CSS flexbox để làm điều này thay vì sử dụng float. Nó sẽ đi vào Giao diện > Tùy chỉnh > CSS tương hỗ update hoặc kiểu. css của chủ đề con của chúng tôi
CSS1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.cg-bio-container
chiều rộng tối đa. 1200px;
phần đệm. 15px;
lề. 0 tự động;
.cg-bio-wrapper h2
cỡ chữ. 22px;
lề dưới. 15px;
màu. #888;
độ dày của phông chữ. thông thường;
.cg-bio-inner
hiển thị. linh hoạt;
đường viền. 1px rắn #eee;
phần đệm. 25px;
.cg-bio-image
chiều rộng tối đa. 90px;
lề phải. 20px;
.cg-bio-image img
bán kính đường viền. 50%;
.cg-bio-text h3
lề dưới. 5px;
.cg-bio-text p:last-child
lề dưới. 0;
Tùy thuộc vào chủ đề của bạn, bạn hoàn toàn có thể cần điều chỉnh điều này một chút ít nhưng kỳ vọng nó sẽ hoạt động và sinh hoạt giải trí với hầu hết. Sau bao nỗ lực đây là thành quả
Chúng tôi có một phần tiểu sử tác giả rất hay sau những tab trên trang sản phẩm của chúng tôi. Một tính năng tuyệt vời cho một hiệu sách trực tuyến
Hiển thị trường tùy chỉnh trên shop/catalog
Vì vậy, chúng tôi đã thêm thành công những trường vào trang sản phẩm duy nhất. Làm cách nào để chúng tôi đưa một trong những trường này vào trang Cửa hàng trong 'thẻ' sản phẩm. Giả sử rằng chúng tôi muốn gồm có trường Tác giả mới phía dưới tiêu đề sản phẩm
Nếu chúng tôi đã có sẵn hiệu suất cao hiện tại của tớ
PHP1
2
3
4
5
6
7
8
add_action( 'woocommerce_single_product_summary', 'shoptimizer_custom_author_field', 7 );
function shoptimizer_custom_author_field() ?>
if(get_field( if(get_field('author')) ?>
div class="cg-author"> the_field('author'); ?>/div>
}
Sau đó, tất cả chúng ta chỉ việc gồm có một dòng tương hỗ update cho điều này. Chúng tôi sẽ cần thêm một add_action để đưa điều này vào trang Cửa hàng
Điều này giờ đây trở thành
PHP1
2
3
4
5
6
7
8
9
add_action( 'woocommerce_single_product_summary', 'shoptimizer_custom_author_field', 7 );
add_action( 'woocommerce_shop_loop_item_title', 'shoptimizer_custom_author_field', 15 );
function shoptimizer_custom_author_field() ?>
if(get_field( if(get_field('author')) ?>
div class="cg-author"> the_field('author'); ?>/div>
}
Bạn sẽ thấy một hành vi mới trên dòng thứ hai
Chúng tôi đang áp dụng cùng một mã để hiển thị trường nhưng ở một vị trí mới là woocommerce_shop_loop_item_title
WooC Commerce có nhiều móc hơn để điều chỉnh vị trí của những phần tử trên trang shop. Một lần nữa, Business Bloomer có một hướng dẫn hook trực quan tuyệt vời khác cho trang Cửa hàng mà bạn hoàn toàn có thể tham khảo
Nhìn vào đó, bạn sẽ hoàn toàn có thể thấy rằng trên một 'thẻ' sản phẩm, vị trí tiêu đề thông thường là thế này
PHP1
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
Vì vậy, hành vi mới của chúng tôi sử dụng cùng một hook woocommerce_shop_loop_item_title nhưng sẽ được đặt sau nó, ở vị trí 15
Để thêm một chút ít mẫu mã tương hỗ update, tôi cũng thêm một vài dòng CSS tùy chỉnh. Điều này hoàn toàn có thể đi vào. Giao diện> Tùy chỉnh> CSS tương hỗ update
CSS1
2
3
4
5
li. sản phẩm. cg-tác giả
cỡ chữ. 13px;
vị trí. tương đối;
xóa. cả hai;
Bây giờ, khi bạn xem trang Cửa hàng hoặc Danh mục của tớ, bạn sẽ thấy trường ACF của tớ được hiển thị trong thẻ sản phẩm như vậy
Thưởng. Sử dụng ACF để tạo huy hiệu tùy chỉnh
Dựa trên những gì tất cả chúng ta đã thấy cho tới nay, giờ đây không thật khó để áp dụng huy hiệu sản phẩm tùy chỉnh cho sản phẩm
Nó hoàn toàn có thể đơn giản như thêm nhãn Mới vào một số trong những món đồ hoặc văn bản, ví dụ như Nổi bật, Được đánh giá cao ví dụ điển hình
Để làm điều này tôi sẽ có nhu yếu các điều sau đây
- Trường ACF huy hiệu tùy chỉnh mới sẽ xuất hiện khi tôi sửa đổi sản phẩmMóc tùy chỉnh để hiển thị huy hiệu này trên những trang danh mụcMột cái móc khác để hiển thị nó trên những trang sản phẩm đơn lẻMột số CSS để làm cho mọi thứ trông đẹp mắt
Vì vậy, tôi sẽ khởi đầu bằng phương pháp thêm trường ACF của tớ mang tên là Huy hiệu tùy chỉnh. Loại trường là Trường văn bản đơn giản
Bây giờ, khi tôi sửa đổi một sản phẩm, tôi sẽ thấy trường mới này. Vì vậy, hãy thêm một số trong những văn bản ví dụ vào phần này trong một trong những sản phẩm của bạn để bạn có một ví dụ hoạt động và sinh hoạt giải trí. Tôi đã thêm nhãn Bán chạy nhất. trong ví dụ của tôi
Tiếp theo, tôi sẽ cần thêm hiệu suất cao tùy chỉnh của tớ để hiển thị trường này ở hai vị trí rất khác nhau. Danh mục và trang sản phẩm duy nhất
PHP1
2
3
4
5
6
7
8
9
add_action( 'woocommerce_product_thumbnails', 'shoptimizer_custom_badge', 20 );
add_action( 'woocommerce_before_shop_loop_item_title', 'shoptimizer_custom_badge', 6 );
function shoptimizer_custom_badge() ?>
if(get_field( if(get_field('custom_badge')) ?>
div class="cg-huy hiệu">span> the_field('custom_badge'); ?>/span>/div>
}
Bạn hoàn toàn có thể thấy rằng hiệu suất cao shoptimizer_custom_badge của tôi đang được thêm vào hai vị trí
Cuối cùng, chúng tôi sẽ cần một số trong những CSS tùy chỉnh để làm cho nó trông đẹp mắt. Điều này hoàn toàn có thể đi vào. Giao diện> Tùy chỉnh> CSS tương hỗ update
CSS1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.cg-badge span
nền. #c97351;
màu. #fff;
cỡ chữ. 12px;
độ dày của phông chữ. 600;
phần đệm. 4px 8px;
bán kính đường viền. 3px;
li. sản phẩm. woocommerce-loop-product__link
vị trí. tương đối;
/* Mục lục */
li. sản phẩm. cg-huy hiệu
vị trí. tuyệt đối;
đáy. 10px;
chỉ mục z. 2;
chiều rộng. 100%;
li. sản phẩm. nhãn sản phẩm
chỉ mục z. 2;
/* Một sản phẩm */
.single-product .cg-badge
vị trí. tuyệt đối;
đầu. 10px;
trái. 10px;
Bây giờ, hãy xem kết quả. Trang sản phẩm trông như vậy này
CSS đã đảm nói rằng nó được đặt ở trên cùng của hình ảnh nổi bật. Bây giờ, hãy nhìn vào trang khuôn khổ vì bạn sẽ thấy rằng nó cũng xuất hiện ở đó
CSS của tôi đã đặt nó ở dưới cùng của hình ảnh, căn giữa. Tôi cảm thấy đây là nơi tốt nhất cho nó, vì phần trên cùng hoàn toàn có thể gồm có nhãn giảm giá, hình tượng list yêu thích và văn bản hoàn toàn có thể Hết hàng
Phần kết luận
Chúng tôi đã thấy rằng Trường tùy chỉnh nâng cao là một phương pháp tuyệt vời để mở rộng WooC Commerce và thêm những trường tương hỗ update. Plugin này kết phù phù hợp với một số trong những Móc WooC Commerce đơn giản hoàn toàn có thể định vị những trường tùy chỉnh mới của bạn ở hầu hết mọi nơi
Tôi đã sử dụng một ví dụ về hiệu sách trực tuyến, tất nhiên bạn hoàn toàn có thể thêm bất kỳ loại nội dung tùy chỉnh nào bằng những kỹ thuật này
Bây giờ tôi muốn nghe từ bạn
Ví dụ về trường tùy chỉnh nào trong số những ví dụ này hữu ích nhất?
Bạn có mẹo hay nào về cách bạn đang sử dụng những trường tùy chỉnh trên shop của riêng mình không?
Hãy cho tôi biết bằng phương pháp để lại phản hồi phía dưới ngay giờ đây
Cập nhật. Tôi đã thêm một ví dụ về việc sử dụng ACF trên những trang khuôn khổ sản phẩm trong một nội dung bài viết tương hỗ mới cho chủ đề WooC Commerce của Shoptimizer của chúng tôi
Tải thêm tài liệu liên quan đến nội dung bài viết Liên kết trang ACF lấy tiêu đề programming