1. Documentation

Product Highlights

Getting Started ↑ Back to top

  • Install and activate the extension
  • You will see an activation notice, you can choose the configure the settings (see details below) or dismiss this notice
  • Add a new product or edit an existing product
  • Under the product data section click the Highlights tab
  • Add highlights
  • Save the product
  • View the product in your store and you’ll see the highlights in product loops (categories, search results, recommended products, etc), in WooCommerce product blocks and in product pages

Example product highlight management:

Settings ↑ Back to top

You can access the settings via WooCommerce > Settings > Products > Product highlights

Display on product loops ↑ Back to top

Displays product highlights on product loops such as products in a category and search pages in addition to areas such as related products.

Display on product loops priority ↑ Back to top

Sets the priority of product highlights display in product loops, they are hooked via woocommerce_after_shop_loop_item. If empty uses 6 which is after woocommerce_template_loop_product_link_close (5).

Display on product blocks ↑ Back to top

Displays product highlights on product blocks. Note that product highlights will be displayed on all standard WooCommerce product blocks with the exception of the “All Products” block.

Display on product pages ↑ Back to top

Displays product highlights on product pages.

Display on product pages priority ↑ Back to top

Sets the priority of product highlights display in product pages, they are hooked via woocommerce_single_product_summary. If empty uses 21 which is after woocommerce_template_single_excerpt (20).

Disable styling ↑ Back to top

Disables the default styling, useful if you wish to use your own CSS.
Note: When you have disabled styling the default CSS will not be loaded.

Notes on CSS ↑ Back to top

Whether or not you have disabled the styling you can apply your own styles (if you haven’t disabled the styling you will be overriding the default styles).

To add your own CSS include your CSS in either your theme’s stylesheet or using the additional CSS section within the theme customizer.

Target the .wcph-product-highlights element.

Display ↑ Back to top

Product loops ↑ Back to top

Product highlights can be displayed within product loops (like in categories, search results, related products, etc):

Product blocks ↑ Back to top

Product highlights can be displayed within any standard WooCommerce product loops with the exception of the “All Products” block – as this block does not yet offer any extensibility for WooCommerce extensions to customize.

Product pages ↑ Back to top

Product highlights can be displayed on product pages:

Bulk Import/Export ↑ Back to top

Product highlights can be assigned in bulk using the standard WooCommerce product import/export tool, simply use the _wcph_product_highlights_highlight_ prefixed meta data.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment