Note: This product is no longer sold on WooCommerce.com. Active subscriptions will receive support from its vendor. This document is left available to you for help with configuration and troubleshooting, but is no longer updated.
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 topYou can access the settings via WooCommerce > Settings > Products > Product highlights
Display on product loops
↑ Back to topDisplays 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 topSets 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 topDisplays 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 topDisplays product highlights on product pages.
Display on product pages priority
↑ Back to topSets 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 topDisables 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 topWhether 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 topProduct loops
↑ Back to topProduct highlights can be displayed within product loops (like in categories, search results, related products, etc):
Product blocks
↑ Back to topProduct 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 topProduct highlights can be displayed on product pages:
Bulk Import/Export
↑ Back to topProduct highlights can be assigned in bulk using the standard WooCommerce product import/export tool, simply use the _wcph_product_highlights_highlight_ prefixed meta data.