Dprime Product Hook v1.3.0 WooCommerce

Pick one WooCommerce product, drop the shortcode anywhere, get a hero card with image, price, and discount badge.

Installation Selecting a product Shortcode What gets output Styling FAQ Override classes

Installation

Install and activate WooCommerce.
Install and activate Dprime Product Hook.
Go to Dprime > Product Hook and select a product.
Drop [dprime_hero_product] anywhere on your site.

Selecting a product

The Select Product tab has a search field. Type the product name and click the product to select it. The card preview below shows the product as it will appear in the shortcode output. Selecting a different product and saving updates every shortcode instance on the site immediately.

Shortcode

Uses the globally selected product:

[dprime_hero_product]

Override with a specific product ID:

[dprime_hero_product product_id="42"]

Find the product ID in the WooCommerce product edit URL: post.php?post=42&action=edit.

What gets output

Product image at large size, wrapped in a link to the product page
Product name, linked to the product page
Current price
Regular price (with strike-through) when the product is on sale
Discount percentage badge when there is a saving

For variable products, the lowest variation price is shown. The featured image is used.

Styling

The plugin ships no frontend CSS. Style these classes from your theme or a custom stylesheet in Breakdance:

Class	Element
`.hero-product`	Outer wrapper
`.hero-product-card`	The card itself
`.hero-product-image`	Image link wrapper
`.hero-product-name`	Product name heading
`.hero-product-price`	Price wrapper
`.hero-old-price`	Regular price (strike-through)
`.hero-new-price`	Current price
`.hero-discount`	Discount percentage badge

FAQ

Can I show a different product on different pages?

Yes. Add product_id="42" to the shortcode on that page. The global selection is the default; the attribute overrides it for that instance only.

Does this work with variable products?

Yes. The lowest variation price is displayed. If the product is on sale, the discount badge appears based on the difference between the regular price and the current price.

Override classes (admin UI)

.dp-ph-page            { /* outer page wrapper */ }
.dp-ph-product-card    { /* selected product preview */ }
.dp-ph-product-picker  { /* product search picker */ }