# Static Product Widget

> Static (non-WooCommerce) product card — image, title, price, description, add-to-cart button. Renders without requiring WooCommerce. Reuses Post Block CSS for layout.

**Class file:** `includes/Elements/Static_Product.php` (1,801 lines)
**Slug:** `static-product` (widget id `eael-static-product`)
**Public docs:** <https://essential-addons.com/elementor/docs/static-product/>
**Pro-shared:** Pro-only. Reuses Lite's post-block CSS.

## Overview

Product card widget without WooCommerce dependency. User manually enters product image, title, price, description, button URL — no product database lookup. Useful when displaying products from an external system, affiliate links, or service offerings. Layout reuses Post Block's CSS (overlay + default block layouts).

## Pro vs Lite

Pro-only. Independent of WC.

## File Map

| File | Role |
| --- | --- |
| `includes/Elements/Static_Product.php` | Widget class (1,801 lines) |
| `src/css/view/static-product.scss` → `assets/front-end/css/view/static-product.min.css` | Card styling |
| `EAEL_PRO_PLUGIN_PATH/assets/front-end/css/view/post-block.min.css` | **Reused** from Post Block |
| `EAEL_PRO_PLUGIN_PATH/assets/front-end/css/view/post-block-overlay.min.css` | **Reused** overlay styling |
| `config.php` entry `'static-product'` | post-block CSS + post-block-overlay CSS + Pro CSS |

## Architecture

- **Composes Lite's `Helper`** (line 13).
- **Two layout presets** (`one`, `two`) — `eael_static_product_layout` (line 89). Each layout has different image / content positioning.
- **Reuses Post Block CSS** — `post-block.min.css` and `post-block-overlay.min.css` referenced from `config.php`. Visual styles shared with the dynamic Post Block widget. Modifying Post Block CSS affects both widgets.
- **No JS** — pure server-rendered card.
- **Per-element show/hide** — image, heading, description, details button, add-to-cart button each have show toggle.
- **1,801 lines** — extensive per-region style controls.

## Render Output

```html
<div class="eael-static-product eael-static-product-layout-{one|two}">
  [?] <div class="eael-static-product-image">
    <img src="{image}" alt="{title}" />
  </div>
  <div class="eael-static-product-content">
    [?] <h3 class="eael-static-product-heading">{heading}</h3>
    [?] <span class="eael-static-product-price">{price}</span>
    [?] <p class="eael-static-product-description">{description}</p>
    <div class="eael-static-product-buttons">
      [?] <a class="eael-product-details-btn" href="{details_url}">View Details</a>
      [?] <a class="eael-product-cart-btn" href="{cart_url}">Add to Cart</a>
    </div>
  </div>
</div>
```

## Controls Reference

| Control id | Tab → Section | Type | Purpose |
| --- | --- | --- | --- |
| `eael_static_product_layout` | Content → Layout | CHOOSE | `one` / `two` |
| `eael_static_product_image` | Content → Image | MEDIA | Product image |
| `eael_static_product_heading` | Content → Content | TEXT | Product name |
| `eael_static_product_description` | Content → Content | TEXTAREA | Description |
| `eael_static_product_show_details_btn` | Content → Buttons | SWITCHER | Show details button |
| `eael_static_product_show_add_to_cart_button` | Content → Buttons | SWITCHER | Show add-to-cart button |
| Per-button text / URL / target / nofollow | Content → Buttons | various | CTA config |
| Per-region styling | Style → ... | various | Image / heading / description / button styling |

## Conditional Dependencies

```text
layout = 'one' → details_btn forced visible
layout = 'two' → add_to_cart_button hidden (per the condition at line 110)
show_details_btn = 'yes' → details button + styling visible
show_add_to_cart_button = 'yes' → add-to-cart button + styling visible
```

## JavaScript Lifecycle

N/A — pure CSS widget.

## Hooks & Filters

Standard widget render. No Pro-emitted hooks.

## Common Issues

| Symptom | Cause | Fix |
| --- | --- | --- |
| Layout style differs from expected | Post Block CSS overrides | Inspect cascade — Pro's static-product.min.css must specify `!important` where conflict matters, OR be loaded after post-block.min.css |
| Image too large | No image-size constraint | Add image-size control or CSS max-width |
| Buttons not aligned | Layout `two` hides add-to-cart by control gating | Switch to layout `one` to expose both buttons |
| Add-to-cart goes to checkout | Default URL not set | Configure button URL explicitly |

## Known Limitations

- **CSS coupling to Post Block** — refactors in Post Block affect Static Product visually. Documented as design choice but flag risk
- **Layout `two` hides add-to-cart** — control gating means user can't enable add-to-cart in layout 2; verify if intentional
- **No structured data (schema.org Product)** — SEO miss for product widgets
- **No multi-product Repeater** — one widget = one product
- **1,801 lines** — control bloat
- **No WC integration mode** — purely static; users can't auto-sync from WC catalogue

## Cross-References

- Sibling: [`post-block.md`](post-block.md) (CSS shared)
- WC counterpart: [`woo-product-slider.md`](woo-product-slider.md) (dynamic product display)
- Shared patterns: [`_patterns.md`](_patterns.md)
