Admin Dashboard

The centralized hub for managing your WooCommerce store templates, settings, and widgets — all from a modern React-based interface inside WordPress.

Overview

The Magical Shop Builder dashboard provides a centralized hub for managing your WooCommerce store templates, settings, and widgets. It's accessed via the Magical Shop Builder menu in the WordPress admin sidebar.

The dashboard is a modern React-based single-page application that renders inside the WordPress admin area. It is registered at menu position 58, placing it conveniently below the WooCommerce menu item.

Menu Structure

The Magical Shop Builder admin menu contains several sub-pages, all handled as hash routes within the React SPA:

Dashboard Statistics

The main dashboard page displays three real-time stat cards at the top, giving you a quick overview of your store at a glance:

Quick Start

Below the stat cards, the dashboard displays a Quick Start section with three action buttons to help you get started quickly:

Template Types

Next to Quick Start, the Template Types card lists the available template types you can create, each with a short description:

A View All Templates link at the bottom takes you to the full Templates management page.

Resources

The Resources card provides quick links to external support and community resources:

• Documentation — Opens the official Magical Shop Builder documentation site
• Get Support — Links to the WPThemeSpace support page for help and assistance
• Leave a Review — Opens the WordPress.org review page to leave feedback

Upgrade to Pro Card

When the Pro version is not active, the dashboard also displays an Upgrade to Pro card highlighting key Pro features:

• Advanced template conditions
• Sticky add to cart
• Wishlist & Compare
• Quick View popup
• Priority support

An Upgrade Now button links to the Pro purchase page. This card is automatically hidden when Pro is active.

Templates Management

The Templates page (#/templates) provides a table/grid view of all your created templates. This is where you manage the lifecycle of each template.

Each template card or row displays the following information:

You can filter the template list by type using the filter dropdown at the top of the page. This is especially useful when you have many templates across different page types.

Widget Management

The Widgets page (#/widgets) gives you granular control over which Elementor widgets are loaded by the plugin. Each widget can be individually toggled on or off using simple toggle switches.

Why Disable Widgets?

Disabling widgets you don't use improves your site's performance by preventing unnecessary CSS and JavaScript assets from being loaded on your pages. If you only use a handful of the 63 available widgets, disabling the rest can noticeably reduce page load times.

How It Works

• Widgets are organized by category (e.g., Product Display, Single Product, Cart, Checkout, etc.)
• Each widget has a toggle switch — on means the widget is registered and available in Elementor; off means it is completely skipped
• A summary counter shows the number of enabled widgets vs. the total available
• Changes are saved via the Save Changes button — newly added widgets are enabled by default for free users

Technical Details

For developers and advanced users: the admin dashboard React app receives configuration data via a localized JavaScript object called mpdAdmin. This object is injected into the page using wp_localize_script() and contains the following properties:

The strings property contains all translatable UI labels used by the React interface, enabling full internationalization (i18n) support through WordPress translation functions.

Accessing in JavaScript

You can access the localized data in your browser console or in custom scripts:

// Check if Pro is active
if (window.mpdAdmin.isPro) {
    console.log('Pro version is active');
}

// Get the REST API URL
const apiUrl = window.mpdAdmin.apiUrl;

// Get the nonce for authenticated requests
const nonce = window.mpdAdmin.nonce;