Skip to main content

Custom Elementor Widgets

The Suma Elementor theme registers custom Elementor widgets in inc/widgets/. Each widget is a PHP class that extends \Elementor\Widget_Base and a corresponding TypeScript/JavaScript component.

Widget List​

Price Ticker (price-ticker/)​

Displays a live precious-metals spot price ticker. Shows current gold and silver prices with an up/down indicator.

  • Fetches data from GET /suma/v1/spot-prices via client-side AJAX
  • Updates on a configurable interval

Cart View (cart-view/)​

A compact mini-cart widget showing item count and cart total. Intended for use in the sticky header or navigation bar.

The totals table groups line items by metal and non-metal buckets. Current grouped rows include:

  • Silver
  • Gold
  • Platinum
  • Non-Metal (when present)

Each metal row shows premium, total ounces, and line total.

Dashboard Account Label (dashboard-account-label/)​

Displays the logged-in dealer's company name and account type in the My Account dashboard header.

Dashboard Avatar (dashboard-avatar/)​

User avatar/profile image widget for the My Account dashboard.

Order View (order-view/)​

Interactive trade/order widget used for dealer quoting and ordering workflows.

For metal products, the cart totals section provides grouped summary rows for:

  • Silver
  • Gold
  • Platinum
  • Non-Metal (when present)

Each row displays premium, total ounces, and line total.

WC Orders (wc-orders/)​

Full order history widget with pagination and status filtering. Used on the My Account orders page.

Displays WooCommerce products sorted by sales count.

WC Products Tagged (wc-products-tagged/)​

Renders a grid of WooCommerce products filtered by one or more WooCommerce tags. Used for featured collections.

Site Logo Widgets​

  • site-logo-footer/ — Logo for footer placement
  • site-logo-mobile/ — Optimised logo for mobile breakpoints
  • site-logo-sticky/ — Smaller logo shown in the sticky header after scrolling

Suma Breadcrumbs (suma-breadcrumbs/)​

Custom breadcrumb trail widget with Elementor style controls.

Toggle Trigger (toggle-trigger/)​

A button/link that triggers a content toggle or accordion. Works in conjunction with CSS classes set by Elementor.

App-Level Widgets (Elementor Sections)​

Located in inc/apps/, these are more complex interactive components embedded as Elementor widgets:

AppDescription
wc-analytics-product-filtersFilter bar for WooCommerce analytics views
wc-blackout-dates-fieldProduct meta field for blackout delivery dates
wc-business-hours-fieldBusiness hours meta field for dealer profiles
wc-cart-limits-by-day-fieldPer-day cart limit configuration field
wc-pricing-catalog-fieldAssigns a pricing catalog to a product
wc-product-field-logicConditional field display logic for product forms
wc-stock-history-lookupAdmin widget to look up historical stock levels
wc-volume-pricing-fieldVolume/tiered pricing entry field for products

Adding a New Widget​

  1. Create a new directory in inc/widgets/ with your widget name.
  2. Create a PHP class that extends \Elementor\Widget_Base.
  3. Register the widget in inc/class-elementor-widgets.php within the elementor/widgets/register hook.
  4. Add any TypeScript/SCSS in the widget directory and import them in the theme's build entry points.
  5. Run npm run dev to compile.