Skip to main content

Elementor Page Builder

The Dealers Site uses Elementor Pro as its primary visual page builder. All page layouts — including the homepage, product catalog, account pages, and landing pages — are built using Elementor.


Elementor Version

  • Elementor (free) + Elementor Pro — both installed as plugins in wp-content/plugins/elementor/ and wp-content/plugins/elementor-pro/

Custom Theme + Elementor Integration

The Suma Elementor theme (inc/class-elementor.php and inc/class-elementor-widgets.php) registers the theme with Elementor:

  • Registers Elementor locations (header, footer, single product, archive) so Elementor Pro templates can fully replace WordPress theme templates
  • Disables conflicting Swiper.js and dialog scripts to prevent conflicts with the theme's asset management
  • Registers all custom Elementor widgets (see below)

Custom Elementor Widgets

All custom widgets are defined in inc/widgets/ and extend \Elementor\Widget_Base:

WidgetDescription
price-tickerLive precious-metals spot price ticker (gold/silver)
cart-viewCompact mini-cart display
dashboard-account-labelDisplays the logged-in dealer's company name / account label
dashboard-avatarUser avatar widget for the account dashboard
order-viewRecent order summary widget
wc-ordersFull WooCommerce orders list widget
wc-popular-productsPopular/featured products display
wc-products-taggedProducts filtered by WooCommerce tag
site-logo-footerSite logo for footer placement
site-logo-mobileMobile-optimised logo
site-logo-stickySticky header logo widget
suma-breadcrumbsCustom breadcrumb widget
toggle-triggerToggle/accordion trigger widget

Visibility Logic

The Visibility Logic for Elementor plugin (visibility-logic-elementor) is installed, allowing individual Elementor sections and elements to be shown/hidden based on:

  • User login state
  • User role
  • WooCommerce customer status
  • Custom conditions

This is used extensively to show dealer-specific content only to authenticated dealers with the correct pricing catalog assigned.


Editing Pages

To edit a page with Elementor:

  1. Log in to /wp-admin.
  2. Go to Pages (or Products) → find the page → click Edit with Elementor.
  3. Make changes in the visual editor.
  4. Click Update to publish.
tip

Use the Elementor → Templates library to manage reusable section templates, headers, and footers.