Title: Opus Price Builder Author: EvelynWaugh Published: August 12, 2026 Last modified: August 12, 2026 --- Search plugins ![](https://ps.w.org/opus-price-builder/assets/banner-772x250.png?rev=3643988) ![](https://ps.w.org/opus-price-builder/assets/icon-256x256.png?rev=3643988) # Opus Price Builder By [EvelynWaugh](https://profiles.wordpress.org/wsjrcatarri/) [Download](https://downloads.wordpress.org/plugin/opus-price-builder.1.0.0.zip) * [Details](https://wordpress.org/plugins/opus-price-builder/#description) * [Reviews](https://wordpress.org/plugins/opus-price-builder/#reviews) * [Installation](https://wordpress.org/plugins/opus-price-builder/#installation) * [Development](https://wordpress.org/plugins/opus-price-builder/#developers) [Support](https://wordpress.org/support/plugin/opus-price-builder/) ## Description **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](https://price-builder-opus.evelynwaugh.com.ua/) | [Demo](https://price-builder-opus.evelynwaugh.com.ua/demo/) | [Docs](https://price-builder-opus.evelynwaugh.com.ua/documentation/) ### 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](https://konvajs.org/)** / **[react-konva](https://github.com/konvajs/react-konva)**— 2D canvas editor for drag-and-drop layout design (MIT) * **[React](https://react.dev/)** — Admin UI framework (MIT) * **[Zustand](https://github.com/pmndrs/zustand)** — Client-side state management( MIT) * **[TanStack Query](https://tanstack.com/query)** — REST API data fetching in the admin (MIT) * **[Radix UI](https://www.radix-ui.com/)** — Accessible settings controls (MIT) * **[@dnd-kit](https://dndkit.com/)** — Layer tree drag-and-drop (MIT) * **[Tailwind CSS](https://tailwindcss.com/)** — Admin styling (MIT) * **[Motion](https://motion.dev/)** — UI animations in the admin (MIT) **Pro add-on only:** * **[CountUp.js](https://github.com/inorganik/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](https://developers.google.com/terms), [Google Privacy Policy](https://policies.google.com/privacy), [Google Fonts FAQ (privacy)](https://developers.google.com/fonts/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users). #### 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](https://openai.com/policies/terms-of-use/), [Privacy Policy](https://openai.com/policies/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](https://ai.google.dev/gemini-api/terms), [Google Privacy Policy](https://policies.google.com/privacy). #### 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](https://www.anthropic.com/legal/consumer-terms), [Privacy Policy](https://www.anthropic.com/legal/privacy). ## Screenshots [⌊Simple Price Scenario⌉⌊Simple Price Scenario⌉[ Simple Price Scenario [⌊Sale Price Scenario⌉⌊Sale Price Scenario⌉[ Sale Price Scenario [⌊Variable Simple Price Scenario⌉⌊Variable Simple Price Scenario⌉[ Variable Simple Price Scenario [⌊Variable Sale Price Scenario⌉⌊Variable Sale Price Scenario⌉[ Variable Sale Price Scenario [⌊Visual Canvas Editor - Drag and drop elements to design your price layout⌉⌊Visual Canvas Editor - Drag and drop elements to design your price layout⌉[ Visual Canvas Editor – Drag and drop elements to design your price layout [⌊Element Properties Panel - Configure typography, colors, animations, and more⌉⌊ Element Properties Panel - Configure typography, colors, animations, and more⌉[ Element Properties Panel – Configure typography, colors, animations, and more [⌊Responsive Settings - Configure for desktop, tablet, and mobile⌉⌊Responsive Settings- Configure for desktop, tablet, and mobile⌉[ Responsive Settings – Configure for desktop, tablet, and mobile [⌊AI Layout Helper - Generate code for layout and see your designs in real-time⌉⌊ AI Layout Helper - Generate code for layout and see your designs in real-time⌉[ AI Layout Helper – Generate code for layout and see your designs in real-time [⌊Percentage Badge - Canvas element⌉⌊Percentage Badge - Canvas element⌉[ Percentage Badge – Canvas element ## Installation **Installing via WordPress** 1. Login to the WordPress Administrator Panel. 2. Go to Plugins > Add New > Upload. 3. Click Choose file button and select the zip folder of Opus Price Builder plugin and press Install now button. 4. Click Activate button. **Installing via FTP** 1. Login to your hosting space via an FTP software, e.g. FileZilla. 2. Unzip the downloaded Opus Price Builder plugin folder without making any changes to the folder. 3. Upload the plugin into the following location wp-content>wp-plugins. 4. Login to the WordPress Administrator Panel. 5. Activate Opus Price Builder by going to Plugins and pressing Activate button. **Getting Started** 1. Navigate to Opus Price Builder in your WordPress admin menu. 2. Click “Add Layout” to create a new price layout. 3. Choose a price scenario (Simple, Sale, Variable Simple, or Variable Sale). 4. Use the visual canvas editor to design your price layout. 5. Save and activate the layout for your desired locations. ## FAQ ### How do I use this plugin? After installation, navigate to Opus Price Builder in your WordPress admin. Create a new layout by clicking “Add Layout”, select a price scenario, and use the drag- and-drop canvas editor to design your price display. Save the layout and activate it for your desired store locations. ### What are the different price scenarios? * **Simple Price** – For products without variations or sales * **Sale Price** – For products currently on sale * **Variable Simple** – For variable products at regular price * **Variable Sale** – For variable products on sale ### Can I use different layouts for different pages? Yes! Each layout can be activated for specific display locations like Single Product pages or Shop/Archive pages. You can have different designs for each location. ### Does this work with page builders? Yes, Opus Price Builder works with any page builder including Elementor, WPBakery, Gutenberg, and Divi. The layouts are applied via WooCommerce hooks, so they work wherever WooCommerce displays prices. ### Is it compatible with WPML/Polylang? Yes, Opus Price Builder is fully compatible with WPML and Polylang for multilingual websites. ### Can I customize the animations? Yes! Each element supports animation settings including duration, delay, and type. Pro version includes Count Up animation with customizable easing functions. ### How do I add Google Fonts? Google Fonts are available in the typography settings when designing layouts. By default, fonts are served locally from your server (no visitor requests to Google). Go to **Opus Price Builder Settings**, keep **Load fonts locally** enabled, and click **Update Fonts** to download fonts used in your layouts. To load fonts from Google’s CDN instead, explicitly enable **Load fonts from Google CDN** in settings( disabled by default). ### Can developers extend the plugin? Yes! Opus Price Builder provides several filters and actions for developers: * ` oppb_available_locations` – Add custom price locations * `oppb_use_layout` – Control when PBO layouts are used * `oppb_render_mode` – Switch between SSR and web component rendering * Custom element renderers can be registered via the Renderer Registry ### How to uninstall the plugin? Simply deactivate and delete the plugin. All plugin data and database tables will be removed upon uninstallation. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Opus Price Builder” is open source software. The following people have contributed to this plugin. Contributors * [ EvelynWaugh ](https://profiles.wordpress.org/wsjrcatarri/) “Opus Price Builder” has been translated into 2 locales. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/opus-price-builder/contributors) for their contributions. [Translate “Opus Price Builder” into your language.](https://translate.wordpress.org/projects/wp-plugins/opus-price-builder) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/opus-price-builder/), check out the [SVN repository](https://plugins.svn.wordpress.org/opus-price-builder/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/opus-price-builder/) by [RSS](https://plugins.trac.wordpress.org/log/opus-price-builder/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.0 * Initial release * Visual canvas editor with Konva.js * 6 element types: Regular Price, Sale Price, Variable Price Range, Currency Symbol, Discount Badge, Text * 4 price scenarios: Simple, Sale, Variable Simple, Variable Sale * Location-based layout activation * Responsive settings for desktop/tablet/mobile * Google Fonts integration * Custom CSS support * Standard animations: fade, slide, scale, pulse, glow * Pro: AI Layout Helper with OpenAI, Gemini, and Anthropic support * Pro: Advanced animated presets * Pro: Count Up animation with CountUp.js * Pro: Custom HTML templates and JavaScript ## Meta * Version **1.0.0** * Last updated **15 hours ago** * Active installations **Fewer than 10** * WordPress version ** 6.0 or higher ** * Tested up to **7.0.4** * PHP version ** 8.1 or higher ** * Languages * [Czech](https://cs.wordpress.org/plugins/opus-price-builder/), [English (US)](https://wordpress.org/plugins/opus-price-builder/), and [Russian](https://ru.wordpress.org/plugins/opus-price-builder/). * [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/opus-price-builder) * Tags * [visual editor](https://wordpress.org/plugins/tags/visual-editor/)[woocommerce](https://wordpress.org/plugins/tags/woocommerce/) [woocommerce-price](https://wordpress.org/plugins/tags/woocommerce-price/) * [Advanced View](https://wordpress.org/plugins/opus-price-builder/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/opus-price-builder/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/opus-price-builder/reviews/) ## Contributors * [ EvelynWaugh ](https://profiles.wordpress.org/wsjrcatarri/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/opus-price-builder/)