Thêm Lớp phủ Sản phẩm WooCommerce

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
Chúng tôi sẽ thêm hai lớp phủ trong hướng dẫn, cả hai đều là tùy chọn. Vì vậy, bạn có thể áp dụng chỉ một lớp phủ, cả hai hoặc không áp dụng. WooCommerce đã mang một cờ nội bộ để đánh dấu một sản phẩm là “nổi bật”. Vì vậy, chúng tôi sẽ thêm một trường tùy chỉnh mới cho phép bạn thêm một chút văn bản tùy chỉnh ở góc, như “Mới” hoặc “Giảm giá”.

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)
Trong khu vực quản trị trang web của bạn, chuyển đến Trường tùy chỉnh> Nhóm trường và nhấp vào “Thêm mới”. Đặt tên cho nhóm trường mới, chẳng hạn như “Thuộc tính lớp phủ sản phẩm”.

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)
Bạn có thể để trống các tùy chọn khác hoặc ở các giá trị mặc định của chú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
Vậy là xong - các trường "văn bản" rất dễ thêm vào 🙂

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:
  1. Móc WooCommerce để đưa một số HTML vào thẻ sản phẩm.
  2. 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ó).
Chúng tôi sẽ nối action woocommerce_before_shop_loop_item_title để đưa vào HTML của chúng tôi ngay trước hình ảnh / tiêu đề. Có rất nhiều hook khác mà bạn có thể sử dụng để đưa các bit HTML tùy chỉnh vào các phần tử trang WooCommerce… nhưng chúng tôi không cần bất kỳ hook nào trong số đó cho mô-đun nhỏ của mình.

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! 😎