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:

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)

<!-- wp:acf/product-box {"name":"acf/product-box","data":{"field_pb_image":"","field_pb_image_url":"https://example.com/image.jpg","field_pb_badge_text":"SAVE 15%","field_pb_badge_color":"#22c55e","field_pb_title":"Product Title","field_pb_title_url":"https://example.com","field_pb_rating":"4.5","field_pb_rating_count":"1,234 ratings","field_pb_features":{"row-0":{"field_pb_feature_text":"Feature one"},"row-1":{"field_pb_feature_text":"Feature two"}},"field_pb_original_price":"$99.99","field_pb_discount_percent":"-15%","field_pb_current_price":"$84.99","field_pb_price_note":"Free shipping","field_pb_description":"Short product description.","field_pb_buttons":{"row-0":{"field_pb_cta_text":"Buy Now","field_pb_cta_url":"https://example.com","field_pb_cta_style":"primary","field_pb_cta_icon":"none","field_pb_cta_class":"","field_pb_cta_rel":"nofollow noopener sponsored"}}},"mode":"preview"} /-->

No Image variation

<!-- wp:acf/product-box {"name":"acf/product-box","className":"is-style-no-image","data":{"field_pb_badge_text":"SAVE 15%","field_pb_badge_color":"#22c55e","field_pb_title":"Product Title","field_pb_title_url":"https://example.com","field_pb_rating":"4.5","field_pb_rating_count":"1,234 ratings","field_pb_features":{"row-0":{"field_pb_feature_text":"Feature one"},"row-1":{"field_pb_feature_text":"Feature two"}},"field_pb_original_price":"$99.99","field_pb_discount_percent":"-15%","field_pb_current_price":"$84.99","field_pb_price_note":"Free shipping","field_pb_description":"Short product description.","field_pb_buttons":{"row-0":{"field_pb_cta_text":"Buy Now","field_pb_cta_url":"https://example.com","field_pb_cta_style":"primary","field_pb_cta_icon":"none","field_pb_cta_class":"","field_pb_cta_rel":"nofollow noopener sponsored"}}},"mode":"preview"} /-->

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

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.

"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": "nofollow noopener"
  }
}

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:

Path 2: Rendered ACF HTML Input

Extract fields from rendered .acf-product-box markup:

Path 3: URL Input

1. Fetch the page using curl or WebFetch
2. 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
3. Build the block with extracted data
4. 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

1. Output the block comment markup in a code fence, ready to paste into WordPress
2. Then copy the raw block markup (without code fences) to clipboard using pbcopy with a heredoc
3. Improve product titles: make them concise and descriptive (remove ASIN, excessive keywords)
4. Improve feature text: clean up HTML entities, fix capitalization, make scannable
5. If discount exists, calculate badge text as "SAVE X%" with field_pb_badge_color: "#22c55e"
6. For free products, use badge text "FREE" with field_pb_badge_color: "#22c55e"
7. Use is-style-no-image when no image is available or explicitly requested
8. field_pb_image should be empty string "" when using field_pb_image_url directly
9. 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><span class="star star--full">★</span><span class="star star--full">★</span>
      </div>
      <ul class="acf-product-box__features">
        <li>100% Free Download</li>
        <li>Covers arithmetic, geometry, the Kuttaka method, Chakravala algorithm...</li>
      </ul>
      <div class="acf-product-box__pricing">
        <span class="acf-product-box__original-price">$9.99</span>
        <span class="acf-product-box__discount">-100%</span>
        <span class="acf-product-box__current-price">FREE</span>
      </div>
      <div class="acf-product-box__buttons">
        <a href="https://yoursite.com/product/bhaskaracharyas-lilavati/" class="acf-product-box__btn md-icon-download" rel="bookmark">Download</a>
      </div>
    </div>
  </div>
</div>

Output:

<!-- wp:acf/product-box {"name":"acf/product-box","data":{"field_pb_image":"","field_pb_image_url":"https://cdn.yoursite.com/wp-content/uploads/2026/02/bhaskaracharyas-lilavati-page2.png","field_pb_badge_text":"FREE","field_pb_badge_color":"#22c55e","field_pb_title":"Bhaskaracharya's Lilavati: Ancient Indian Mathematics","field_pb_title_url":"https://yoursite.com/product/bhaskaracharyas-lilavati/","field_pb_rating":"5","field_pb_rating_count":"17 ratings","field_pb_features":{"row-0":{"field_pb_feature_text":"100% Free Download "},"row-1":{"field_pb_feature_text":"Explore the mathematical genius of 12th-century India through Bhaskaracharya's Lilavati. Covers arithmetic, geometry, the Kuttaka method, Chakravala algorithm, and famous problems like the Peacock and the Snake. Includes historical context and comparisons with Greek and Chinese mathematics."}},"field_pb_original_price":"$9.99","field_pb_discount_percent":"-100%","field_pb_current_price":"FREE","field_pb_price_note":"Buy once, own forever.","field_pb_description":"Available in PDF format for download.","field_pb_buttons":{"row-0":{"field_pb_cta_text":"Download for free","field_pb_cta_url":"https://yoursite.com/product/bhaskaracharyas-lilavati/","field_pb_cta_style":"primary","field_pb_cta_icon":"none","field_pb_cta_class":"md-icon-download","field_pb_cta_rel":"bookmark"}}},"mode":"preview"} /-->