| name | product-box-converter |
| description | Convert clipboard content to ACF Product Box blocks. Use when the user pastes AAWP HTML, a product URL, or raw product details and wants an ACF product-box block. Also use when the user mentions "product box," "convert to product box," "AAWP to ACF," or "product block." |
| user_invocable | true |
| argument | The clipboard content (AAWP HTML, product URL, or product details) to convert |
ACF Product Box Converter
Convert any product source (AAWP HTML, URL, or raw details) into a WordPress ACF Product Box block.
Input Detection
Determine the input type and follow the corresponding path:
| Input Type | Signal | Action |
|---|
| AAWP HTML | Contains .aawp-product classes | Extract fields from HTML structure |
| Rendered ACF HTML | Contains .acf-product-box classes | Extract fields from rendered output |
| URL | Starts with http / plain URL | Fetch page, extract product data |
| Raw details | Product name, price, features as text | Map directly to fields |
ACF Product Box Block Format
CRITICAL: All field keys use the field_ prefix. Repeaters use nested row-N objects, NOT flat indexed keys.
Default (with image)
No Image variation
Key difference: "className":"is-style-no-image" in block attributes. Image fields (field_pb_image, field_pb_image_url) are omitted entirely.
When to use no-image variation:
- No product image available from the source
- User explicitly requests no image
- Product is a digital download, service, or non-physical item where a generic image adds no value
Field Reference
All field keys use the field_ prefix. Repeater fields use nested row-N objects.
Core Fields
| Field | Type | Required | Description |
|---|
field_pb_image | string | No | WordPress attachment ID (empty string if none) |
field_pb_image_url | string | No | Direct image URL (used when no attachment ID) |
field_pb_badge_text | string | No | Badge label (e.g., "SAVE 15%", "FREE", "BEST SELLER") |
field_pb_badge_color | string | No | Badge hex color (e.g., "#22c55e") |
field_pb_title | string | Yes | Product name |
field_pb_title_url | string | Yes | Link to product page |
field_pb_rating | string | No | Rating value (e.g., "4.5", "5") |
field_pb_rating_count | string | No | Rating count text (e.g., "1,234 ratings") |
field_pb_original_price | string | No | Original/list price with currency symbol |
field_pb_discount_percent | string | No | Discount text (e.g., "-15%", "-100%") |
field_pb_current_price | string | No | Current/sale price with currency symbol (or "FREE") |
field_pb_price_note | string | No | Price note (e.g., "Free shipping", "Buy once, own forever.") |
field_pb_description | string | No | Short product description below pricing |
Features (Repeater)
Nested object with row-N keys. Each row contains field_pb_feature_text.
"field_pb_features": {
"row-0": {"field_pb_feature_text": "First feature"},
"row-1": {"field_pb_feature_text": "Second feature"},
"row-2": {"field_pb_feature_text": "Third feature"}
}
Buttons (Repeater)
Nested object with row-N keys. Each row contains button subfields.
| Subfield | Type | Description |
|---|
field_pb_cta_text | string | Button label text |
field_pb_cta_url | string | Button link URL |
field_pb_cta_style | string | primary, secondary, or amazon |
field_pb_cta_icon | string | none, cart, external, or download |
field_pb_cta_class | string | CSS class for icon (e.g., md-icon-download, md-icon-external) |
field_pb_cta_rel | string | Link rel attribute (e.g., nofollow noopener sponsored, bookmark) |
"field_pb_buttons": {
"row-0": {
"field_pb_cta_text": "Buy on Amazon",
"field_pb_cta_url": "https://amazon.com/dp/...",
"field_pb_cta_style": "amazon",
"field_pb_cta_icon": "cart",
"field_pb_cta_class": "",
"field_pb_cta_rel": "nofollow noopener sponsored"
},
"row-1": {
"field_pb_cta_text": "Visit Website",
"field_pb_cta_url": "https://example.com",
"field_pb_cta_style": "primary",
"field_pb_cta_icon": "none",
"field_pb_cta_class": "md-icon-external",
"field_pb_cta_rel"
Icon vs Class: field_pb_cta_icon controls the built-in icon rendering. field_pb_cta_class adds a CSS class to the button <a> tag for custom icon styling (e.g., MD theme icon classes like md-icon-download, md-icon-external). When using a custom class icon, set field_pb_cta_icon to "none".
Conversion Paths
Path 1: AAWP HTML Input
Extract fields from AAWP markup using these CSS selectors:
| ACF Field | AAWP Source |
|---|
field_pb_badge_text | .aawp-product__ribbon text |
field_pb_title | .aawp-md-title link text |
field_pb_title_url | .aawp-md-title link href |
field_pb_image_url | .aawp-product__image src |
field_pb_features | Each <li> from .aawp-product__description → row-N |
field_pb_original_price | .aawp-product__price--old |
field_pb_discount_percent | .aawp-product__price--saved |
field_pb_current_price | .aawp-product__price--current |
field_pb_buttons | Each button from .aawp-md-actions → row-N |
Path 2: Rendered ACF HTML Input
Extract fields from rendered .acf-product-box markup:
| ACF Field | Rendered HTML Source |
|---|
field_pb_image_url | .acf-product-box__image img src |
field_pb_title | .acf-product-box__title a text |
field_pb_title_url | .acf-product-box__title a href |
field_pb_rating | Count of .star--full elements |
field_pb_features | Each <li> from .acf-product-box__features → row-N |
field_pb_original_price | .acf-product-box__original-price |
field_pb_discount_percent | .acf-product-box__discount |
field_pb_current_price | .acf-product-box__current-price |
field_pb_buttons | Each .acf-product-box__btn → row-N with text, href, rel, class |
Path 3: URL Input
- Fetch the page using
curl or WebFetch
- Extract product data from the page:
- Title from
<title> or <h1> (clean up, remove clutter)
- Best image from og:image or main product image
- Price from structured data or price elements
- Features from product description/bullets
- Build the block with extracted data
- All buttons get
field_pb_cta_rel: "nofollow noopener sponsored"
Amazon products - add dual buttons:
- Amazon.com: URL format
https://www.amazon.com/dp/ASIN/?tag=gtorg0f-20, style "amazon", icon "cart"
- Amazon.in: URL format
https://www.amazon.in/s?k=Product+Name+Keywords&tag=gaurtiwa-21, style "primary", class "md-icon-external"
External (non-Amazon) products - no affiliate tags, use best image from page
Path 4: Raw Details Input
Map the provided text directly to fields. Ask for missing required fields (title, URL) if not provided.
Output Rules
- Output the block comment markup in a code fence, ready to paste into WordPress
- Then copy the raw block markup (without code fences) to clipboard using
pbcopy with a heredoc
- Improve product titles: make them concise and descriptive (remove ASIN, excessive keywords)
- Improve feature text: clean up HTML entities, fix capitalization, make scannable
- If discount exists, calculate badge text as "SAVE X%" with
field_pb_badge_color: "#22c55e"
- For free products, use badge text "FREE" with
field_pb_badge_color: "#22c55e"
- Use
is-style-no-image when no image is available or explicitly requested
field_pb_image should be empty string "" when using field_pb_image_url directly- Always include all button subfields (
field_pb_cta_text, field_pb_cta_url, field_pb_cta_style, field_pb_cta_icon, field_pb_cta_class, field_pb_cta_rel)
Common Button Patterns
Amazon.com Buy Button
{
"field_pb_cta_text": "Check Price on Amazon",
"field_pb_cta_url": "https://www.amazon.com/dp/ASIN/?tag=gtorg0f-20",
"field_pb_cta_style": "amazon",
"field_pb_cta_icon": "cart",
"field_pb_cta_class": "",
"field_pb_cta_rel": "nofollow noopener sponsored"
}
Amazon.in Button
{
"field_pb_cta_text": "Check on Amazon.in",
"field_pb_cta_url": "https://www.amazon.in/s?k=Product+Name+Keywords&tag=gaurtiwa-21",
"field_pb_cta_style": "primary",
"field_pb_cta_icon": "none",
"field_pb_cta_class": "md-icon-external",
"field_pb_cta_rel": "nofollow noopener sponsored"
}
Amazon URL formats:
- Amazon.com:
https://www.amazon.com/dp/ASIN/?tag=gtorg0f-20 (use ASIN)
- Amazon.in:
https://www.amazon.in/s?k=Product+Name+Keywords&tag=gaurtiwa-21 (use title search, unless ASIN given)
Download Button (free product)
{
"field_pb_cta_text": "Download for free",
"field_pb_cta_url": "https://yoursite.com/product/...",
"field_pb_cta_style": "primary",
"field_pb_cta_icon": "none",
"field_pb_cta_class": "md-icon-download",
"field_pb_cta_rel": "bookmark"
}
External Link Button (non-Amazon, no affiliate tags)
{
"field_pb_cta_text": "Visit Website",
"field_pb_cta_url": "https://example.com",
"field_pb_cta_style": "primary",
"field_pb_cta_icon": "none",
"field_pb_cta_class": "md-icon-external",
"field_pb_cta_rel": "nofollow noopener"
}
Affiliate Link Button (yoursite.com/go/)
{
"field_pb_cta_text": "Try Free",
"field_pb_cta_url": "https://yoursite.com/go/product-slug/",
"field_pb_cta_style": "primary",
"field_pb_cta_icon": "none",
"field_pb_cta_class": "md-icon-external",
"field_pb_cta_rel": "nofollow noopener sponsored"
}
Full Example: Rendered ACF HTML to Block
Input (rendered HTML):
<div class="acf-product-box align wp-block-acf-product-box">
<div class="acf-product-box__layout">
<div class="acf-product-box__image">
<img src="https://cdn.yoursite.com/wp-content/uploads/2026/02/bhaskaracharyas-lilavati-page2.png" alt="Bhaskaracharya's Lilavati">
</div>
<div class="acf-product-box__content">
<h3 class="acf-product-box__title">
<a href="https://yoursite.com/product/bhaskaracharyas-lilavati/">Bhaskaracharya's Lilavati: Ancient Indian Mathematics</a>
</h3>
<div class="acf-product-box__rating">
<span class="star star--full">★</span><span class="star star--full">★</span><span class="star star--full">★</span>★★
100% Free Download
Covers arithmetic, geometry, the Kuttaka method, Chakravala algorithm...
$9.99
-100%
FREE
Download
Output:
