README

Magento 2 Custom Options Styling Extension for Hyva and Luma (Panth Custom Options)

Replace Magento's plain default product options with a clean, accessible UI. Panth Custom Options reskins every option type: text inputs, textareas, file upload zones, dropdowns, card-style radios, card-style checkboxes, and HTML5 date pickers. Colors, radii, and fonts are all CSS variables so your theme controls the look.

Product page: kishansavaliya.com/magento-2-custom-options.html

Quick Answer

What is Panth Custom Options? It is a Magento 2 extension that replaces the default rendering of product custom options with a modern, styled UI, covering every input type Magento supports.

What does it add to my store?

• Styled text inputs and textareas with focus rings, placeholder text, and character-count hints.
• Drag-and-drop file upload zones that show the filename and a remove button.
• Card-style radio buttons and checkboxes with price-delta badges instead of tiny native controls.
• Polished dropdowns with a chevron icon, hover, and focus states.
• Native HTML5 date, time, and datetime pickers with no external JS date library.
• CSS variable theming so every color, radius, and font follows your brand from one override.

Which themes are supported? Both Hyva (Alpine.js, no jQuery) and Luma. The right template is loaded automatically based on the active theme.

What does it need? Magento 2.4.4 to 2.4.8, PHP 8.1 to 8.4, and the free mage2kishan/module-core package.

🚀 Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours for custom modules, Hyva themes, performance work, M1 to M2 migrations, and Adobe Commerce Cloud.

Visit our website: kishansavaliya.com  |  Get a quote: kishansavaliya.com/get-quote

Table of Contents

• Who Is It For
• Key Features
• Supported Input Types
• Compatibility
• Installation
• Configuration
• Theming with CSS Variables
• How It Works
• FAQ
• Support
• About Panth Infotech
• Quick Links

Who Is It For

• Stores that sell personalized products such as engravings, monograms, gift messages, or custom prints, where the options form is front and center on the product page.
• Hyva storefronts that want option templates built with Alpine.js and Tailwind, with no jQuery or RequireJS pulled back in.
• Merchants who care about conversion and want file upload, date, and radio/checkbox options to look as polished as the rest of the page.
• Stores with multi-store setups that need different visual themes per store view without changing code.
• Developers who want a drop-in option UI they can brand with a few CSS variable overrides in their theme.

Key Features

Modern, Accessible UI

• Styled text inputs and textareas with focus rings, placeholder text, and character-count hints.
• Drag-and-drop file upload zones that display the filename, file-type hints, and a remove button.
• Custom-styled dropdowns with a chevron icon, hover states, and visible focus rings.
• Card-style radio buttons with price-delta badges replacing tiny native radio controls.
• Card-style checkboxes with price-delta badges for multi-select options.
• Native HTML5 date, time, and datetime-local pickers with no external JS date libraries.
• Accessible by default with proper label associations, ARIA attributes, keyboard navigation, and visible focus states.

CSS Variable Theming

• Every visual token is a CSS custom property: color, border, focus color, price color, radius, and font.
• Override once in your theme and all option inputs across all products follow your brand.
• Per store view scope so different store views can have different colors or disable styling independently.

Hyva and Luma Support

• Hyva templates use Alpine.js and Tailwind utility classes with zero external JS.
• Luma templates apply lightweight CSS on top of Magento's native option templates.
• Auto theme detection through Panth\Core\Helper\Theme, no manual switching needed.
• Works with simple, configurable, virtual, and downloadable products that have custom options.

Admin Control

• Single master toggle at Stores > Configuration > Panth Extensions > Custom Options.
• Fallback-safe: when disabled, Magento's native templates render with zero overhead from this module.

Performance and Quality

• Zero external JS dependencies: Hyva uses Alpine.js (already bundled with the theme), Luma uses vanilla CSS.
• No database schema changes: the module only replaces templates, it does not touch product data.
• Tax-aware price display: dynamic option prices update correctly for incl-tax, excl-tax, and both display modes.
• Mobile responsive: all option types adapt to small screens.
• MEQP-style code: constructor DI only, no ObjectManager.

Supported Input Types

Every Magento custom option input type is styled by this module:

Compatibility

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-custom-options
bin/magento module:enable Panth_Core Panth_CustomOptions
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

1. Download the latest release from Packagist or from the product page.
2. Extract it to app/code/Panth/CustomOptions/ in your Magento install.
3. Make sure Panth_Core is installed too (required dependency).
4. Run the commands above starting from bin/magento module:enable.

Verify Installation

bin/magento module:status Panth_CustomOptions
# Expected: Module is enabled

After install, open any product page that has custom options. The styled UI replaces the default rendering automatically. You can also confirm the toggle is on at:

Admin -> Stores -> Configuration -> Panth Extensions -> Custom Options

Configuration

Go to Stores -> Configuration -> Panth Extensions -> Custom Options.

Visual customization happens through CSS variables in your theme, not through admin settings.

Theming with CSS Variables

All visual tokens are CSS custom properties. Override any of them in your theme's CSS:

Example override

/* app/design/frontend/YourVendor/yourtheme/web/css/overrides.css */
:root {
    --custom-options-primary: #7c3aed;
    --custom-options-border-focus: #7c3aed;
    --custom-options-radius: 4px;
}

How It Works

1. The module uses Magento's layout override system to replace the templates that render product custom options.
2. On Hyva, it ships Alpine.js-powered templates under view/frontend/templates/product/view/options/ that emit Tailwind utility classes.
3. On Luma, a lightweight CSS file is appended that reskins Magento's native option templates.
4. Panth\Core\Helper\Theme detects which theme is active per store view and loads the right layout handle.
5. All price-delta calculations continue to use Magento's standard price-option and priceBox behavior. No pricing logic is changed.
6. No database schema is modified and no product data is touched. Disabling the module instantly restores default rendering.

FAQ

Does this module change how Magento calculates custom option prices?

No. All price-delta logic continues to run through Magento's standard priceBox and price-option JS components. The module only replaces the visual templates.

Will it work with my existing custom options?

Yes. All your existing custom options set up under Admin > Catalog > Products > Customizable Options automatically render with the new UI. No migration or re-configuration is needed.

Does it work on Hyva themes?

Yes. Panth Custom Options ships native Alpine.js templates for Hyva, with no jQuery or RequireJS. The module reads the active theme through Panth_Core and serves the Hyva template automatically.

Does it support file upload validation?

Yes. Magento's native file type and size validation continues to work, with better visual feedback: the filename is shown, file-type hints are displayed, and a remove button lets shoppers clear their selection.

Can I disable styling on a specific product?

The master toggle is global. For per-product control you can use Magento's standard layout update XML on a single product page to override the template.

Does it support Hyva child themes?

Yes. The module follows Hyva's theme parent chain, so any Hyva child theme automatically inherits the styled templates.

Does it work on configurable products that have custom options?

Yes. Custom options on the parent configurable product render with the new UI. Configurable variant selection (swatches, dropdowns) is Magento-native and unaffected.

Does it work on multi-store setups?

Yes. Settings respect Magento's standard scope order (default, website, store view). Different store views can have different CSS variable overrides or disable the styling independently.

Does Panth Custom Options need Panth Core?

Yes. mage2kishan/module-core is a free, required dependency that Composer installs for you automatically.

Support

Response time: 1-2 business days.

💼 Need Custom Magento Development?

Looking for custom Magento module development, Hyva theme work, store migrations, or performance tuning? Get a free quote in 24 hours:

About Panth Infotech

Built and maintained by Kishan Savaliya (kishansavaliya.com), a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience.

Panth Infotech is a Magento 2 development agency that builds high quality, security focused extensions and themes for both Hyva and Luma storefronts. The extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management, with each module built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on our Magento extensions page or on Packagist.

Quick Links

Ready to give shoppers a better product options experience?

SEO Keywords: magento 2 custom options, magento 2 custom options extension, magento 2 product options styling, magento 2 styled custom options, hyva custom options, hyva product options, luma custom options, magento 2 file upload custom option, magento 2 drag and drop file upload, magento 2 date picker custom option, magento 2 radio button card style, magento 2 checkbox card style, magento 2 custom option ui, magento 2 product options module, magento 2 css custom properties options, magento 2 accessible product options, alpine js custom options hyva, magento 2 custom option theming, magento 2 engraving option, magento 2 monogram option, magento 2 gift message option, magento 2 customizable options, magento 2.4.8 custom options, php 8.4 magento custom options, mage2kishan custom-options, panth custom options, panth infotech, hire magento developer, top rated plus upwork, kishan savaliya magento, custom magento development