Thêm lớp phủ sản phẩm WooCommerce như huy hiệu và hình dán. Tuyệt vời cho Sản phẩm mới và để quảng cáo các sản phẩm nổi bật và bán chạy. Tìm hiểu cách sử dụng Trường tùy chỉnh nâng cao và một chút PHP để thêm một số cải tiến thú vị vào trang WooCommerce của bạn.
Thêm nhãn dán “Mới”, “Giảm giá” hoặc “Nổi bật” vào bất kỳ sản phẩm nào của bạn.
Để làm theo hướng dẫn này, bạn cần đảm bảo trang web WordPress của mình đang sử dụng chủ đề con tùy chỉnh. Bạn cũng sẽ cần cài đặt các trình cắm sau.
- WooCommerce, rõ ràng là
- Trường tùy chỉnh nâng cao
Thêm trường tùy chỉnh của chúng tôi
Chúng tôi thực sự sẽ thêm hai trường tùy chỉnh cho các sản phẩm WooCommerce của chúng tôi:- Lớp phủ sản phẩm có được bật không? (đúng hay sai)
- Văn bản lớp phủ sản phẩm (chuỗi)
Nhấp vào Thêm trường để tạo trường tùy chỉnh đầu tiên. Rất nhiều tùy chọn sẽ hiển thị, nhưng nó không đáng sợ như vẻ ngoài - chúng ta chỉ cần thiết lập một vài thông tin quan trọng.
- Nhãn: Lớp phủ Sản phẩm có được Bật không?
- Tên: is_product_overlay_enabled (tên này sẽ được tạo tự động cho bạn)
- Loại: Lựa chọn Đúng / Sai
- Giao diện người dùng cách điệu: Có (không thực sự bắt buộc, nhưng làm cho nó đẹp hơn khi sử dụng)
Nhấp vào Thêm trường một lần nữa để tạo trường thứ hai và đặt các thuộc tính này…
- Nhãn: Văn bản lớp phủ sản phẩm
- Tên: product_overlay_text
- Loại: Văn bản
Nơi Chỉnh sửa Giá trị Trường Tùy chỉnh của chúng tôi
Bây giờ chúng ta đã xác định các trường tùy chỉnh, chúng ta cần đi đến hộp Vị trí và cho ACF biết nơi chúng ta muốn hiển thị các trường này trong back-end. Vì các trường này chỉ liên quan đến sản phẩm (tức là chúng không liên quan đến bài đăng, trang, người dùng hoặc nội dung khác), chúng ta nên đặt như sau:Đó là nhóm lĩnh vực của chúng tôi đã được sắp xếp. Cuộn trở lại đầu và nhấp vào nút Xuất bản để hoàn tất mọi thứ. Kiểm tra điều này ngay bây giờ bằng cách đi tới Sản phẩm> Tất cả Sản phẩm trong khu vực quản trị, chọn một sản phẩm sau đó cuộn xuống và tìm nhóm trường mới.
Để bắt đầu mọi thứ, hãy chọn một sản phẩm bạn sẽ sử dụng để thử nghiệm, đặt “Đã bật lớp phủ sản phẩm” thành “Có” và đặt một số văn bản vào trường “Văn bản lớp phủ sản phẩm”, chẳng hạn như “Mới” - giữ văn bản ngắn gọn .
Đặt sản phẩm thử nghiệm của bạn thành Sản phẩm nổi bật - trong hộp Xuất bản, chỉnh sửa Chế độ hiển thị danh mục và đánh dấu vào hộp Sản phẩm nổi bật.
Tạo Lớp phủ Sản phẩm
Để thực sự thêm lớp phủ sản phẩm WooCommerce, chúng ta cần thực hiện hai việc:- Móc WooCommerce để đưa một số HTML vào thẻ sản phẩm.
- Thêm một chút CSS để làm cho nó hiển thị HTML mới trên hình ảnh sản phẩm (thay vì đằng sau nó).
Hãy viết một số mã
Trong chủ đề con tùy chỉnh của bạn, hãy tạo một tệp mới có tên là functions-product-overlays.php và dán phần sau vào đó./**
* FILE: functions-product-overlays.php
* REF: https://wp-tutorials.tech/refine-wordpress/add-woocommerce-product-overlays/
*
* Add WooCommerce Product Overlays (WPO), text & HTML, to product cards.
* Add this to your functions.php file:
*
* const WPO_IS_ENABLED = true;
* require_once 'functions-product-overlays.php';
*/
// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
function wpo_before_shop_loop_item_title() {
if (defined('WPO_IS_ENABLED') && (WPO_IS_ENABLED === false)) {
// Disabled by configuration.
} elseif (is_single()) {
// If we're looking at a single product, don't show the overlay labels.
} else {
$post_id = get_the_ID();
// Is this a featured product?
$terms = wp_get_post_terms(
$post_id,
'product_visibility',
array('fields' => 'names')
);
$is_featured = in_array('featured', $terms);
// Get our custom overlay properties.
$custom_overlay_text = get_post_meta($post_id, 'product_overlay_text', true);
$is_custom_overlay_visible = boolval(get_post_meta(
$post_id,
'is_product_overlay_enabled',
true
));
// Featured product star.
if ($is_featured) {
echo '<div class="prod-overlay prod-overlay-feat">';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '</div>'; // .prod-overlay
}
// Custom overlay text.
if ($is_custom_overlay_visible && !empty($custom_overlay_text)) {
echo '<div class="prod-overlay prod-overlay-text">';
printf(
'<span class="prod-overlay-label">%s</span>',
esc_html($custom_overlay_text)
);
echo '</div>'; // .prod-overlay
}
}
}
add_action(
'woocommerce_before_shop_loop_item_title',
'wpo_before_shop_loop_item_title',
9
);
Sau đó, bao gồm mã mới bằng cách thêm mã sau vào tệp functions.php của chủ đề con tùy chỉnh của bạn :
// WooCommerce Product Overlays const WPO_IS_ENABLED = true; require_once 'functions-product-overlays.php';Đó là cốt lõi của dự án và bạn sẽ có thể thấy nó thực sự hoạt động ngay bây giờ. Hãy thử truy cập trang chính của cửa hàng và bạn sẽ thấy sản phẩm thử nghiệm của mình có một số dòng phụ được chèn ở đó trước hình ảnh / tiêu đề.
Ngôi sao được cung cấp bởi Font Awesome, sử dụng HTML sau:
<i class="fa fa-star" aria-hidden="true"></i>
Nếu bạn thấy một ký tự vui nhộn ở đây (thay vì dấu sao) thì bạn cần thêm Font Awesome vào trang web của mình. Bạn chỉ có thể sử dụng một plugin để thực hiện việc này nếu bạn muốn, mặc dù hầu hết các chủ đề đều cung cấp Font Awesome nên có thể nó sẽ “hoạt động”.
Thêm một số kiểu
Bước cuối cùng của hướng dẫn này là thêm một số kiểu dáng vào các lớp phủ của chúng tôi. Đối với điều này, chúng tôi chỉ cần thêm một số bit vào tệp style.css của chủ đề con tùy chỉnh của bạn. Điều quan trọng cần lưu ý ở đây là chúng tôi đã đặt ngôi sao sản phẩm nổi bật bên trong một <div> với các lớp “prod-overlay prod-overlay-feat” và văn bản lớp phủ sử dụng “văn bản lớp phủ sản phẩm”. . Điều này cho phép chúng tôi đưa các kiểu chung vào định nghĩa lớp lớp phủ.Bởi vì hai phần tử <div> này được hiển thị trước tiêu đề, nếu chúng tôi cố gắng định vị tuyệt đối các phần tử sẽ hiển thị phía sau tiêu đề (bị che khuất bởi tiêu đề), vì vậy chúng tôi cần đặt thuộc tính z-index (dương) thành đảm bảo rằng chúng được hiển thị phía trên tiêu đề. Chúng tôi cũng sẽ dựa nhiều vào việc sử dụng tham chiếu vị trí tuyệt đối, vì vậy chúng tôi có thể đặt ngôi sao màu vàng nổi bật ở trên cùng bên phải của thẻ và văn bản lớp phủ ở trên cùng bên trái.
Chỉnh sửa tệp style.css của chủ đề con tùy chỉnh của bạn và dán thông tin sau vào đó để giúp bạn bắt đầu.
/*
* WooCommerce Product Overlays.
*/
.prod-overlay {
position: absolute;
z-index: 10;
text-align: center;
top: -0.5em;
}
.prod-overlay-feat {
right: -0.5em;
width: 1.5em;
height: 1.5em;
font-size: 300%;
color: yellow;
text-shadow: 0 0 0.0125em black, 0 0 0.0125em black;
}
.prod-overlay-text {
left: -0.5em;
width: 3.5em;
height: 3.5em;
background-color: rgba( 255, 0, 255, 0.75 );
border-radius: 50%;
text-overflow: visible;
white-space: nowrap;
}
.prod-overlay-label {
position: absolute;
left: 50%;
top: 50%;
color: white;
font-size: 200%;
font-weight: bold;
transform: translate(-50%,-50%) rotate(-25deg);
text-shadow: 0 0 0.125em black, 0 0 0.125em black;
}
Lưu tệp và quay lại trang cửa hàng của bạn. Thực hiện bắt buộc tải lại, bỏ qua bộ nhớ cache để bạn nhận được tệp style.css được cập nhật và kiểm tra sự khác biệt.
Tôi đã thêm một đường viền màu xám nhẹ vào phiên bản được tạo kiểu để kiểm tra xem các lớp phủ có nhô ra các cạnh một cách độc đáo hay không. Tôi thấy điều này phá vỡ trang sản phẩm một chút để nó không chỉ toàn những hình chữ nhật nhàm chán mà tất cả đều giống nhau. Tuy nhiên, đừng nhô ra các cạnh quá nhiều, nếu không nó sẽ trông rất ngu ngốc trên thiết bị di động ở chế độ dọc.
thông tin Hãy thử thiết kế cho Điện thoại di động trước . Nếu bố cục và kiểu hoạt động tốt trên thiết bị di động, thì chúng có thể cũng sẽ hoạt động tốt trên máy tính để bàn / máy tính xách tay. Khó hơn để lấy các kiểu máy tính để bàn và sửa đổi chúng để hoạt động trên thiết bị di động sau đó.
Kết thúc nó
Đó là đủ để cung cấp cho bạn một số ý tưởng cho các dự án của bạn.Chúng tôi đã giữ cho mã PHP nhỏ và có mục đích - nó thực hiện những gì nó có nghĩa là phải làm, mà không cần làm quá nhiều. Điều này giúp bạn dễ dàng sửa đổi khi quay lại thời điểm của một năm. Nó cũng không ràng buộc quá sâu vào dự án của bạn, vì vậy bạn có thể bỏ PHP và CSS vào các dự án WordPress / WooCommerce khác trong tương lai.
CSS ở đây là đủ để bạn bắt đầu, nhưng hãy chơi với nó. Nếu bạn không chắc chắn những gì một trong các dòng, hãy bình luận nó ra, hãy làm mới trình duyệt của bạn (bỏ qua bộ nhớ cache) và xem những thay đổi nào.
Có thể thử tạo một số lớp phủ bổ sung bằng cách thêm nhiều trường tùy chỉnh hơn trong ACF.
Để biết một số ý tưởng về những gì bạn có thể làm khác với mô-đun lớp phủ sản phẩm WooCommerce mới của mình, hãy xem trang web Active Hands Gripping Aids.
Hãy làm sống động các dự án của bạn một cách thú vị bằng cách thêm nhiều lớp phủ sản phẩm WooCommerce tùy chỉnh sáng bóng! 