Tiêu đề cho Bộ sưu tập ảnh WooCommerce

Tổng quan

Tiêu đề cho Bộ sưu tập ảnh WooCommerce thêm tiêu đề vào bộ sưu tập ảnh trên các trang sản phẩm đơn của WooCommerce.

Tiêu đề và chú thích của hình ảnh đang được hiển thị sẽ được hiển thị dưới hình ảnh, cả trên trang và trong chế độ xem hộp sáng mở rộng.

Cài đặt

Cài đặt tiện ích mở rộng bằng cách đi đến phần Plugins của Quản trị WordPress của bạn, nhấp vào nút Add New cạnh tiêu đề, nhấp vào nút Upload Plugin cạnh tiêu đề của trang tiếp theo, chọn tệp ZIP mà bạn đã tải xuống sau khi mua Tiêu đề cho Bộ sưu tập ảnh WooCommerce, và nhấp nút Install Now .

Khi tiện ích mở rộng được cài đặt, bạn sẽ có tùy chọn kích hoạt nó. Nó phải được kích hoạt để hoạt động. Nếu bạn chọn không kích hoạt nó ngay bây giờ, bạn có thể làm sau này bằng cách đi đến Plugins trong Quản trị WordPress của bạn và nhấp vào liên kết Activate dưới Tiêu đề cho Bộ sưu tập ảnh WooCommerce.

Cấu hình

Không cần cấu hình, hoặc có thể. Nếu plugin được kích hoạt, tiêu đề sẽ được hiển thị, nếu không thì không có tiêu đề nào được hiển thị.

Phong cách

Không có kiểu dáng nào được đính kèm ngoài một quy tắc CSS để làm cho tiêu đề hình ảnh có thể nhìn thấy trong Lightbox, (nếu không, nó sẽ là màu đen trên nền đen), nhưng có rất nhiều khả năng nó sẽ trông tốt mà không cần gì đặc biệt. Nếu nó không nhìn như bạn muốn, bạn có thể thêm các kiểu dáng vào bảng kiểu của chủ đề của bạn hoặc vào tính năng CSS tùy chỉnh của WordPress, (đi đến Appearance > Customize > Additional CSS trong Quản trị WordPress).

Cấu trúc dữ liệu cho các tiêu đề trông như thế này:

<div class="gcw-caption"><h5>Tiêu đề image goes here</h5><p>Ghi chú hình ảnh ở đây</p></div>

Nếu tiêu đề hoặc chú thích trống thì toàn bộ h5 hoặc p sẽ bị bỏ lỡ.

Bạn có thể nhắm vào các chú thích lightbox trên trang riêng biệt bằng cách sử dụng bộ chọn CSS .woocommerce-product-gallery .gcw-caption dành cho bộ sưu tập trên trang và .pswp .gcw-caption dành cho lightbox.

Template

Cấp độ: Nhà phát triển

Các nhà phát triển có thể tùy chỉnh các mẫu chú thích. Để làm như vậy, hãy chép các tệp sau đây vào chủ đề của bạn:

• templates/product-gallery-caption.php to chủ đề-của-bạn/gallery-captions-for-woocommerce/product-gallery-captions.php
• templates/product-gallery-caption-frontend.php to ` chủ đề-của-bạn/gallery-captions-for-woocommerce/product-gallery-captions-frontend.php

Bạn sau đó có thể sửa đổi HTML của các mẫu theo cách bạn muốn, nhưng hãy đảm bảo rằng tiêu đề được đóng trong một phần tử có lớp gcw-caption , nếu không thì các tiêu đề có thể không hoạt động đúng trên sản phẩm biến đổi.

product-gallery-caption.php được sử dụng cho hầu hết các tiêu đề.

product-gallery-caption-frontend.php được sử dụng để cập nhật tiêu đề khi một biến thể mới được chọn cho Sản phẩm biến thể . Nó sử dụng cú pháp mẫu của WordPress wp.template() templating syntax .

Các câu hỏi thường gặp

Cách cấu hình tiêu đề thế nào?

Cấu hình duy nhất là bật hoặc tắt tiêu đề. Điều này có thể được thực hiện bằng cách kích hoạt hoặc tắt kích hoạt tiện ích mở rộng trên trang Plugins của quản trị WordPress.

Làm sao để thiết lập tiêu đề?

Tiêu đề là tiêu đề và chú thích của hình ảnh. Bạn có thể chỉnh sửa chúng trong mục “Media” của quản trị WordPress, hoặc khi cập nhật bộ sưu tập ảnh cho sản phẩm của bạn.

Cách chỉ hiển thị tiêu đề trên hình ảnh chính? / Cách chỉ hiển thị tiêu đề trên hình ảnh nhỏ?

Cấp độ: Nhà Phát triển đơn giản.

Bộ sưu tập mặc định của WooCommerce chỉ hiển thị tiêu đề trên hình ảnh chính, (xem ảnh chụp màn hình ở trên đối với câu hỏi “Làm thế nào để thiết lập tiêu đề?”), nhưng một số chủ đề hiển thị tiêu đề cho cả hình ảnh chính và hình ảnh nhỏ. Nếu đây là trường hợp, và nếu bạn muốn ẩn tiêu đề cho hình ảnh chính hoặc hình ảnh thu nhỏ, cách tốt nhất là sử dụng CSS.

Bạn sẽ cần phải tìm hiểu CSS selector để chỉ cần tiêu đề của hình ảnh nhỏ, sau đó bạn có thể sử dụng đó để nhắm mục tiêu tiêu đề. Ví dụ sử dụng chủ đề Storefront, nếu tiêu đề được thêm vào dưới hình ảnh thu nhỏ, chúng ta có thể nhắm mục tiêu chúng như thế này:

.flex-control-thumbs .gcw-caption {display:none; /* ẩn tiêu đề trong hình ảnh nhỏ */}

Chủ đề của tôi không hiển thị tiêu đề trên hình ảnh nhỏ, nhưng tôi muốn tiêu đề trên hình ảnh nhỏ, làm thế nào để thêm chúng?

Cấp độ: Nhà phát triển.

Bạn có thể kích hoạt hỗ trợ thử nghiệm cho tiêu đề trên hình ảnh nhỏ bằng bộ lọc gcw_show_thumbnail_captions . Thêm dòng sau đây vào functions.php của chủ đề của bạn sẽ mở tiêu đề trên hình ảnh nhỏ:

add_filter( 'gcw_show_thumbnail_captions', '__return_true' );

Cách làm cho một phần của tiêu đề in đậm hoặc in nghiêng, hoặc thêm liên kết vào tiêu đề?

Cấp độ: Nhà phát triển đơn giản.

Tiêu đề cho Bộ sưu tập ảnh WooCommerce hỗ trợ một số HTML trong tiêu đề, vì vậy bao lấy văn bản trong <strong> , <b> , <em> , hoặc <i> tags should make your text bold or italic, depending on your theme’s styles. Similarly, you can use an <a> tag to create a link. All tags allowed by the WordPress
wp_kses() ‘data’ context is allowed, but some may do unexpected things to your layout.

Troubleshooting

Image captions may be hidden when different variations are selected

If product image magnification is on WooCommerce doesn’t seem to update the height of the element that contains the images when swapping to a new variation image, so if the new image is taller than the old one some of the content below the image, (and part of the new image itself), may be hidden.

Until this is fixed in WooCommerce the best option is to keep images the same height, or at least the same aspect ratio, (so all square, or all 4:3).

Incompatible Themes

Some themes use a completely custom gallery on the Product page. When this happens it may be impossible to add captions. We have confirmed that it is impossible to add captions to the following themes:

• Stockie (last verified late 2020)

If captions don’t display for you please contact support and we will investigate the problem.