Overview

The Single Product category contains 16 widgets that cover every element of a WooCommerce product page. Use them inside a Single Product template built with the Template Builder to create fully custom product page layouts.

All widgets are registered under the mpd-single-product Elementor category and dynamically pull data from the product currently being viewed.

MPD Product Title

Displays the product name/title dynamically on the single product page. The widget automatically pulls the title from the current product being viewed, so no manual input is needed.

Key Features

• Dynamically displays the real product title on the frontend
• HTML tag selector: H1, H2, H3, H4, H5, H6, div, span, or p
• Full typography controls (font family, size, weight, transform, line height)
• Text color customization
• Alignment options (left, center, right, justify)
• Margin and padding spacing controls
• Uses a preview product in the Elementor editor for live editing

MPD Product Price

Shows the product price including regular and sale prices. Supports variable product price ranges (e.g., "$10.00 – $25.00") and applies WooCommerce currency formatting automatically.

Key Features

• Displays regular price and sale price (with strikethrough for regular)
• Currency position control (before/after amount)
• Sale price formatting and badge styling
• Separate typography settings for regular and sale price
• Independent color controls for regular price, sale price, and currency symbol
• Supports variable product price ranges
• Alignment and spacing customization

MPD Product Gallery

The most complex single product widget with 973 lines of code. Renders the full product image gallery with main image display, thumbnail navigation, zoom functionality, and lightbox support.

Key Features

• Main product image display with high-resolution support
• Thumbnail gallery navigation below or beside the main image
• Zoom on hover for detailed product inspection
• Lightbox modal for full-screen image viewing
• Slider navigation with arrows for multi-image products
• Layout options: horizontal thumbnails, vertical thumbnails, or grid
• Responsive image sizing with custom aspect ratio controls
• Image border, border-radius, and shadow styling

MPD Add to Cart

Renders the full add-to-cart form with quantity selector and purchase button. Automatically adapts to the product type — simple products get a quantity input and button, variable products include variation dropdowns, grouped products show a table, and external products link to the external URL.

Key Features

• Full add-to-cart form with quantity input and purchase button
• Supports all WooCommerce product types: simple, variable, grouped, and external
• Variable products display variation dropdown selectors
• Button color, typography, size, border-radius, and icon customization
• Quantity input field styling (width, border, colors)
• AJAX add to cart support (add without page reload)
• Customizable button text and icon
• Hover state styling with smooth transitions

MPD Product Description

Renders the full product description (the long description entered in the WooCommerce product editor). Inherits all WooCommerce content formatting including paragraphs, lists, headings, and embedded media.

Key Features

• Displays the full WooCommerce product long description
• Inherits WooCommerce content formatting (HTML, shortcodes, embeds)
• Typography customization (font, size, weight, line height)
• Text color and link color controls
• Alignment options
• Content automatically updates when product description is edited

MPD Product Short Description

Displays the product excerpt (short description) from the WooCommerce product editor. This widget is commonly placed above the add to cart button to give customers a quick product summary.

Key Features

• Renders the product excerpt / short description
• Commonly used above the add to cart button in product layouts
• Typography and text color customization
• Alignment controls (left, center, right)
• Preserves HTML formatting from the product editor
• Responsive font sizing

MPD Product Meta

Displays product meta information including SKU, product categories, and product tags. Each meta item can be individually toggled on or off, and labels and separators are customizable.

Key Features

• Displays SKU, product categories, and product tags
• Toggle individual meta items on or off
• Custom separator characters between items (e.g., comma, pipe, slash)
• Label text customization (e.g., "SKU:", "Categories:", "Tags:")
• Label typography and color styling
• Value typography and link color styling
• Vertical or horizontal layout options
• Spacing controls between meta items

MPD Product Rating

Displays the product’s average star rating based on customer reviews. Shows filled and empty stars with an optional review count, giving customers an instant visual quality indicator.

Key Features

• Star rating display based on average customer review score
• Configurable star size (px or em)
• Custom colors for filled stars and empty stars
• Show or hide review count text (e.g., "(12 reviews)")
• Alignment controls (left, center, right)
• Star gap spacing adjustment
• Links to the reviews section when clicked

MPD Product Reviews

Renders the full customer reviews section including existing reviews and the review submission form. Each review shows the reviewer name, date, star rating, and comment text.

Key Features

• Displays existing customer reviews with star rating, author, and date
• Review submission form for logged-in customers
• Gravatar avatar display for reviewers
• Review text and meta typography styling
• Star rating color customization in reviews
• Form field and submit button styling
• Integrates with WooCommerce review moderation settings

MPD Product Tabs

Renders the product data tabs — typically Description, Additional Information, and Reviews. Supports multiple tab layout styles so you can match your site’s design language.

Key Features

• Default tabs: Description, Additional Information, Reviews
• Tab layout styles: horizontal tabs, vertical tabs, or accordion
• Custom tab header colors, typography, and borders
• Active tab indicator styling
• Tab content area background and padding controls
• Tab panel transition effects
• Inherits WooCommerce tab content filters for extensibility

MPD Related Products

Displays a grid of related products automatically determined by WooCommerce based on shared categories and tags. Gives customers additional product suggestions to increase engagement and cross-sells.

Key Features

• Automatic related product detection via WooCommerce algorithms
• Configurable number of products to display
• Column count control (1–6 columns)
• Toggle display elements: product image, title, price, rating, add to cart button
• Product card styling consistent with other display widgets
• Section heading text customization
• Responsive column breakpoints

MPD Upsells

Displays upsell products that are manually configured in the WooCommerce product editor under “Linked Products.” Upsells encourage customers to consider higher-value alternatives.

Key Features

• Displays products linked as upsells in WooCommerce product settings
• Configurable number of products to show
• Column layout controls similar to Related Products
• Toggle display of image, title, price, rating, and add to cart button
• Section heading text and typography customization
• Product card hover effects and styling
• Responsive column adjustments for all breakpoints

MPD Product Stock

Shows the product’s stock availability status. Displays text like “In Stock,” “Out of Stock,” or “Only 3 left in stock” depending on the product’s inventory settings in WooCommerce.

Key Features

• Automatic stock status detection from WooCommerce inventory
• Displays “In Stock,” “Out of Stock,” or “X left in stock” text
• Color coding based on stock status (e.g., green for in-stock, red for out-of-stock)
• Custom colors for each status state
• Typography controls for stock text
• Optional stock icon display
• Works with WooCommerce stock management and low-stock thresholds

MPD Product Attributes

Renders a table of product attributes including weight, dimensions, and any custom attributes defined in the WooCommerce product editor. Useful for technical products where specifications matter.

Key Features

• Displays product attributes in a structured table layout
• Shows weight, dimensions, and custom product attributes
• Table styling controls: border, background color, cell padding
• Header row typography and color customization
• Alternating row background colors (striped table option)
• Label and value column width controls
• Responsive table behavior on smaller screens

MPD Product Navigation

Adds next/previous product navigation links so customers can browse through products without returning to the shop page. Includes arrow icons, label text, and optional thumbnail previews of adjacent products.

Key Features

• Next and Previous product navigation links
• Customizable arrow icons (multiple icon choices)
• Label text customization (e.g., “Previous Product,” “Next Product”)
• Thumbnail preview of the adjacent product on hover
• Product title display alongside navigation arrows
• Typography and color controls for labels and titles
• Spacing and alignment options
• Navigation within the same category option

MPD Action Buttons

Provides Compare, Wishlist, and Quick View action buttons for the single product page. Built using the Action Buttons trait (728 lines), this widget offers extensive positioning and styling options for interactive product actions.

Key Features

• Three action buttons: Compare, Wishlist, and Quick View
• Button position options: on image center, top right, top left, or below image
• Button style: icon only or icon + text label
• Individual toggle for each button (show/hide)
• Normal and hover state color controls with smooth transitions
• Button size, spacing, and border-radius customization
• Icon selection for each button type
• Tooltip text on hover