外掛標籤
開發者團隊
原文外掛簡介
Design Beautiful WooCommerce Prices with Ease: Opus Price Builder allows you to create stunning custom price layouts using a visual drag-and-drop canvas editor. Transform how your prices look across your entire WooCommerce store without writing any code.
Opus Price Builder is designed to give shop owners complete creative control over their product price displays. Whether you want elegant typography, animated sale badges, or unique price arrangements, this plugin makes it possible through an intuitive visual interface.
Plugin home page | Demo | Docs
Main Features
🎨 Visual Canvas Editor
Konva.js-powered canvas for smooth 2D manipulation
Drag & drop elements freely on the canvas
Proportional scaling – elements maintain aspect ratio when resized
Rotation support via corner handles
Snap-to-guide alignment for precise positioning
Real-time preview of all style changes
📦 6 Built-in Element Types
Regular Price – Display the original product price
Sale Price – Display discounted price
Variable Price Range – Display min-max price range for variable products
Currency Symbol – Standalone currency indicator
Discount Badge – Show percentage or amount saved
Text – Custom text with multiline support, alignment, and width modes
🎯 Four Price Scenarios
Configure different layouts for each pricing situation:
1. Simple Price – Products without variations or sales
2. Sale Price – Products currently on sale
3. Variable Simple – Variable products at regular price
4. Variable Sale – Variable products on sale
📍 Location-Based Activation
Apply layouts to specific display locations:
* Single Product – Main product page price display
* Loop – Shop, category, archive pages and related products
* Extensible via filters for cart, checkout, and custom locations
⚡ Smart Features
Smart Layout System – Automatically generates optimal flexbox CSS from canvas positions
Responsive Settings – Configure typography, borders, and spacing for desktop/tablet/mobile
Google Fonts Integration – Access hundreds of Google Fonts
Custom CSS Support – Add your own styles
WooCommerce Price Filter Integration – Works with native WooCommerce filters
WPML/Polylang Compatible – Full multilingual support
Premium Features
Upgrade to Opus Price Builder Pro for advanced capabilities:
🤖 AI Layout Helper
Generate optimized HTML, CSS, and JavaScript using AI providers:
* OpenAI GPT-5/GPT-4.1
* Google Gemini 3 Pro
* Anthropic Claude Opus 4.5/Claude 4.5 Sonnet
🎭 Advanced Animated Presets
Split-Speed Counter – Animated counter with racing decimals effect
Slot Machine – Mechanical slot-style rolling digits
Liquid Metal – Shimmer gradient effect with gold accent
Gravity Spring – Elastic bounce animation with spring physics
Data Corruption – Cyberpunk glitch and shimmer effects
Soft Tactile – Neumorphic soft UI with counting animation
And many more…
📈 Count Up Animation
Animated number counting for price elements using CountUp.js:
* 7 easing function options
* Configurable start value and duration
* Thousand separator support
* Animate on scroll with IntersectionObserver
* Separate decimal animation with delay
🛠️ Custom HTML Templates
Override generated HTML with fully custom templates using dynamic placeholders:
* {regularPrice} – Full regular price
* {salePrice} – Full sale price
* {currencySymbol} – Currency symbol
* {discount} – Discount percentage
* And many more placeholders for each scenario
⚡ Custom JavaScript
Add custom JavaScript for advanced interactions and post-render effects.
Free vs Pro Comparison
Free Features:
✅ Visual canvas editor with drag & drop
✅ 6 built-in element types
✅ Standard preset layouts for all scenarios
✅ Full typography and styling controls
✅ Responsive settings (desktop/tablet/mobile)
✅ Custom CSS support
✅ Google Fonts integration
✅ Location-based layout activation
✅ WooCommerce price filter integration
✅ Standard animations (fade, slide, scale, pulse, glow)
Pro Features:
⭐ AI Layout Helper with multiple AI providers
⭐ Advanced animated presets (15+ unique designs)
⭐ Count Up Animation with 7 easing functions
⭐ Custom HTML Templates with placeholders
⭐ Custom JavaScript for advanced interactions
⭐ Priority support
Third-party libraries
The admin canvas editor and settings UI are built with open-source JavaScript libraries bundled into the plugin:
Konva / react-konva — 2D canvas editor for drag-and-drop layout design (MIT)
React — Admin UI framework (MIT)
Zustand — Client-side state management (MIT)
TanStack Query — REST API data fetching in the admin (MIT)
Radix UI — Accessible settings controls (MIT)
@dnd-kit — Layer tree drag-and-drop (MIT)
Tailwind CSS — Admin styling (MIT)
Motion — UI animations in the admin (MIT)
Pro add-on only:
CountUp.js — Animated number counting for price elements (MIT). Shipped in the separate Pro package (pro/assets/js/countUp.min.js), not in the free WordPress.org build.
Source code for the compiled admin bundles is in the plugin’s src/ directory.
External services
This plugin may connect to third-party services. No data is sent unless the conditions described below are met. Site visitors are never asked to opt in to these connections; only site administrators configure and trigger them.
Google Fonts (fonts.googleapis.com / fonts.gstatic.com)
Used to load web fonts selected in the layout editor so prices render with the chosen typography.
When data is sent: By default, fonts are served locally from your WordPress site and visitors do not contact Google. Visitor browsers only request fonts from Google when a site administrator explicitly enables Load fonts from Google CDN in Opus Price Builder settings (this option is off by default). In the WordPress admin, the canvas editor may request fonts from Google while you design layouts. When Load fonts locally is enabled, font files are downloaded to your server via a one-time server-side request to Google Fonts.
What is sent: When CDN loading is opted in, standard HTTP request data (such as IP address, browser user agent, and the requested font family names and weights). No personal customer or order data is transmitted.
This service is provided by Google: Google Terms of Service, Google Privacy Policy, Google Fonts FAQ (privacy).
OpenAI API (api.openai.com) — Pro, optional
Used by the AI Layout Helper (Pro) to suggest custom HTML, CSS, and JavaScript for a price layout based on your canvas design.
When data is sent: Only when a site administrator has configured an OpenAI API key, selected OpenAI as the AI provider, and explicitly clicks to generate a layout in the layout editor. Nothing is sent automatically or on the storefront.
What is sent: Your OpenAI API key (in the request authorization header), the selected model name, and a prompt containing the current layout’s price scenario, canvas element positions and style settings (JSON), and container settings (JSON). No WooCommerce customer, order, or visitor data is included.
This service is provided by OpenAI: Terms of Use, Privacy Policy.
Google Gemini API (generativelanguage.googleapis.com) — Pro, optional
Used by the AI Layout Helper (Pro) for the same purpose as OpenAI above, when Google Gemini is selected as the provider.
When data is sent: Only when a site administrator has configured a Google API key, selected Gemini as the AI provider, and explicitly triggers AI layout generation in the admin. Nothing is sent automatically or on the storefront.
What is sent: Your Google API key (in the request URL), the selected model name, and a prompt containing the current layout’s price scenario, canvas element settings (JSON), and container settings (JSON). No WooCommerce customer, order, or visitor data is included.
This service is provided by Google: Gemini API Terms of Service, Google Privacy Policy.
Anthropic API (api.anthropic.com) — Pro, optional
Used by the AI Layout Helper (Pro) for the same purpose as OpenAI above, when Anthropic Claude is selected as the provider.
When data is sent: Only when a site administrator has configured an Anthropic API key, selected Anthropic as the AI provider, and explicitly triggers AI layout generation in the admin. Nothing is sent automatically or on the storefront.
What is sent: Your Anthropic API key (in the request header), the selected model name, system instructions, and a prompt containing the current layout’s price scenario, canvas element settings (JSON), and container settings (JSON). No WooCommerce customer, order, or visitor data is included.
This service is provided by Anthropic: Consumer Terms, Privacy Policy.