Weight Based Products adds a ‘Weight Based Product’ type to your WooCommerce store. Unlike simple or variable products, a weight-based product calculates price from a per-unit rate (per kg or per lb) multiplied by the customer’s chosen weight. You configure the product once; the plugin handles all price calculation, cart line management, stock tracking, and order display automatically.
Installation
↑ Back to topTo start using a product from WooCommerce.com, you can use the “Add to store” functionality on the order confirmation page or the My subscriptions section in your account.
- Navigate to My subscriptions.
- Find the Add to store button next to the product you’re planning to install.
- Follow the instructions on the screen, and the product will be automatically added to your store.
Alternative options and more information at:
Managing WooCommerce.com subscriptions.
Usage
↑ Back to topCreate your first weight-based product in 5 minutes.
Create a New Product
↑ Back to topGo to Products → Add New. In the Product data dropdown, select Weight Based Product.
Set Price “unit and quantity” and Base Price
↑ Back to topEnter a Base Price per unit (e.g. $10.00 per kg) or if Price unit set to ( 100 g ) then the Base Price per unit will be (e.g. $10.00 per 100g ). Optionally set a sale price.
Configure Weights
↑ Back to topFixed Packs: Add package weights (e.g. 200 g, 500 g, 1 kg) with stock quantities.
Free Weight: Set min, max, and step size for the slider.
Publish & Test
↑ Back to topClick Publish and visit the product page to see the weight selector, live pricing, and Add to Cart button.
Free Weight Product
Fixed Packs Product
Cart Page
Checkout Page
Order Received Page
Order Email
Order Page
Setup and Configuration
↑ Back to topAfter installing and activating the Weight Based Products extension, you can configure the global settings on the WooCommerce > Weight Based Products settings page.
General Settings
↑ Back to topDefault units, display format, stock management, cart behaviour, and the package suggestion algorithm. Located at WooCommerce → Weight Based Products → General.
Default Units & Display
| Setting | Description |
| Default unit | Applied to new products: Kilograms (kg/g) or Pounds (lb/oz). Can be overridden per product. No automatic conversion when changed later. |
| Price display format | Per unit (e.g. $10.00/kg) or Both (per-package total + per-unit rate). Legacy “per package only” values auto-migrate to “Both”. |
| Weight decimal places | Number of decimals for weight display (0–4). Example: 3 gives “2.500 kg”. |
| Show dual units | When enabled, shows the secondary unit in parentheses (e.g. “2.5 kg (5.51 lbs)”). |
Stock Management
| Setting | Description |
| Stock tracking mode | By package quantity — default WooCommerce behaviour. By total weight — stock shown as remaining weight (e.g. “12.5 kg remaining”). |
| Low stock badge threshold | Packages at or below this number show a warning badge. Set to 0 to disable badges. |
| Low stock email alerts | Admin receives an email when package stock drops to the threshold. |
Cart & Order Display
| Setting | Description |
| Cart line format | Full breakdown (e.g. “2× 1 kg + 1× 500 g”), Weight only (e.g. “2.5 kg total”), or Compact (e.g. “3 packages (2.5 kg)”). |
| After add to cart | Use WooCommerce setting, redirect to cart, or stay on product page (reload). |
| Show breakdown in emails / order view | Include detailed weight/package breakdown in order emails and admin order view. |
Package Suggestion Algorithm
Controls how the best-combination search works when a customer enters a desired weight in Fixed Packs mode.
| Setting | Description | Default |
| Tolerance (±) | How far from the desired weight counts as “exact match” (in store unit). E.g. 0.05 = ±50 g. | 0.05 |
| Suggestion mode | Always round up (≥ desired), Always round down (≤ desired), or Closest match (either direction). | Closest match |
| Max packages in suggestion | Upper limit on total pack lines in the browser combination search. Range 1–500. | 25 |
Option Groups Settings
↑ Back to topDefine global option groups organized into categories. Enable them per product in the product editor. Located at WooCommerce → Weight Based Products → Option Groups.
Section Header (Product Page)
Configure the default title and description for the “Product Options” block on the frontend:
- Section title — e.g. “Customise Your Order”
- Section description — e.g. “Free · no extra charge”
These can be overridden per product in the Product Options tab.
Option Group Categories
Create categories to organize related option groups (e.g. “Coffee Products”, “General”). Each category has:
- Name and optional description
- Colour label (blue, green, orange, purple, red, gray) for admin visual organisation
Option Groups (Per Category)
Under each category, add option groups. Each group defines a customer-facing input field on the product page. Settings include:
- Display label — e.g. “Grind Type”, “Texture”
- Input type — Chips/button select, Dropdown, Text area (free text), Single checkbox, Radio buttons
- Choices — Each with a name and optional price (for paid groups)
- Helper text — Shown below the field on the product page
- Default scope — Manual (attach per product) or Auto-attach to all products
- Flags — Required field; Mark as FREE (show badge)
Saving Option Groups
The Option Groups builder is client-side: Save Group, Add Group, and Delete update the in-memory configuration and hidden JSON fields only. They do not write to the database by themselves.
Sides & Add-ons Settings
↑ Back to topConfigure accessories shown below the weight selector. Sides do not affect order weight. Located at WooCommerce → Weight Based Products → Sides & Add-ons.
Accessories (Side & Add-ons)
| Setting | Description |
| Enable accessories | Allow weight-based products to have accessory add-ons |
| Default section title | e.g. “Complete Your Setup” — overridable per product |
| Display position | Below weight selector, Below product options, or Directly above Add to Cart |
| Layout | List (toggle rows) or Grid (cards) |
| Show product images | Thumbnail next to each accessory |
| Max accessories per product | Limit how many accessories a product can have |
Pricing & Cart Behaviour
| Setting | Description |
| Add sides to order total | Show cumulative total (weight + sides) on the Add to Cart button |
| Sides in cart | Separate line items (chained) — individual cart rows per side; removing main removes all sides. Grouped under main product — single line showing all sides. |
| Show sides in emails | Include sides breakdown in order confirmation and admin emails |
Pricing Rules
↑ Back to topGlobal tiered pricing, role-based pricing, bulk savings badge, and sale countdown. Located at WooCommerce → Weight Based Products → Pricing Rules.
How Tiers Work
- Product-level tiers (set in the product editor) always take precedence when defined
- Global tiers here apply only when a product has tiered pricing enabled but no product-level tier table
- Weights outside any tier range use the product’s base price
Tiered / Graduated Pricing
Enable global tiered pricing to define default price brackets. Each tier has: From (weight), To (weight), and Price per unit. Click the + Add Tier button to add rows (same control style as Add Choice in Option Groups). These tiers are overridden by product-level tiers. Remember to click Save Changes after editing.
Role-Based Pricing ( Beta )
Enable role-based pricing to set different rates per WooCommerce user role (e.g. Wholesale at 20% off). Prices set here are defaults and can be overridden per product.
Bulk Purchase Incentives
Hints and badges are driven by tiered pricing tiers, not a fixed weight threshold.
| Setting | Description |
| Show bulk savings badge | Tier hints near the weight selector; savings badge in the order summary when a cheaper tier applies |
| Badge message template | For the “next tier” hint. Placeholders: {threshold}, {remaining}, {savings} |
| Sale price countdown | Countdown when the product has a sale price and sale end date |
Appearance Settings
↑ Back to topColours, borders, step numbers, section cards, quantity stepper, buttons, presets, and custom CSS. Located at WooCommerce → Weight Based Products → Appearance.
Appearance Presets
Select a preset from the dropdown, then click Apply Preset. Available themes:
- Default — Original plugin styling
- Classic — Warm earth tones with cream accents
- Modern — Sleek blue gradients
- Minimal — Clean grayscale
- Nature — Fresh green tones for organic/natural product stores
- Elegant — Rich purple accents for premium product displays
- Glass — Frosted glass effect with
backdrop-filterblur, translucent backgrounds, and soft shadows
Colors
Primary colour — Selected package borders, active chip, toggle states. Accent colour — Confirmed selection background tint.
Section Titles & Step Numbers
- Step numbers — Circular badges (1, 2, 3…) next to section titles. Toggle visibility and set badge background colour.
- Section titles — Title colour, description text colour, and title font size (px).
- Section cards — Background, border colour, border width, and card border radius.
Pack Cards (9 Granular Controls)
Hints and badges are driven by tiered pricing tiers, not a fixed weight threshold.
| Setting | Description |
| Background (Selected) | Background color of selected pack card |
| Border (Selected) | Border color of selected pack card |
| Weight Name color | Text color of the weight label on cards |
| Text (Selected) color | Text color when card is selected |
| Price color | Price text color on cards |
| Unit Price color | Per-unit price text color |
| Weight Name font size | Font size for the weight label |
| Price font size | Font size for the price |
| Unit Price font size | Font size for the per-unit price |
Buttons & Stepper
- Quantity stepper — +/− buttons: background, border, button colour, hover states
- Add to Cart button — Background, text, border, hover states. Use
{price}and{weight}placeholders in button text. - Clear button — Secondary button to reset weight selection
- Empty state text — Text when no weight is selected (e.g. “Select a Weight to Continue”)
Widget Layout
- Quick preset buttons — Show weight preset chips; style: Pills, Rectangular, or Tab strip
- Package card style — List rows or Card grid (overridable per product)
- Show price on package card
- Show low-stock badges
- Highlight selected packages
Custom CSS
Custom CSS — Injected on every page containing the weight selector widget. Override storefront styles using real selectors (e.g. .wbp-card { border-radius: 12px; }, .pkg-row { padding: 12px; }).
CSS custom properties — The plugin uses variables like --lf-wbpw-primary, --lf-wbpw-accent, etc. Override them in your theme’s CSS for easy customisation.
Advanced & Tools
↑ Back to topData import/export, sample products, reset settings, cache management, and developer options. Located at WooCommerce → Weight Based Products → Advanced / Tools.
Data & Import / Export
| Tool | Description |
| Export All WBP Data | Download a JSON backup of all weight-based product configurations. Use before importing or migrating. |
| Import from JSON | Restore products and settings from a backup exported by this plugin. Overwrites existing data — confirmation required. Accepts .json files only (max 2 MB). Imported settings are restricted to registered plugin options and run through their sanitize callbacks; product meta is sanitized with a JSON-aware helper. |
| Import from CSV | Bulk-import products with package configurations. Coming soon. |
| Create Sample Products | Generates 15 demo weight-based products covering both modes, tiered pricing, options, and accessories. Creates sample option categories, groups, and a “WBP Samples” product category. |
| Reset Plugin Settings | Restore all plugin settings to defaults (Advanced tab only). Does not affect product data. Requires confirmation. Each individual tab also has Reset Tab to Defaults in its footer. |
Performance
- Enable transient cache — Cache package combination calculations. Recommended for stores with many products.
- Clear cache — Force-clear all cached weight combination results. Use after changing packages.
Developer
Debug mode — Log weight calculation steps to the browser console. Disable in production.
Product Editor
↑ Back to topHow to configure individual weight-based products in the WooCommerce product editor. Select “Weight Based Product” from the Product data dropdown to reveal the plugin’s tabs.
General Options Tab
↑ Back to topThe main configuration tab for weight-based products. Settings include:
- Weight display unit — Store default, Kilograms (kg/g), or Pounds (lb/oz). Overrides the global default for this product.
- Ordering mode — Fixed Packs or Free Weight. Determines which fields are visible below.
- Base Price (per kg/lb) — Regular price per weight unit.
- Sale Price (per kg/lb) — Optional sale price. Sale start/end dates are also configurable for countdown timers.
- Tiered pricing toggle — Use Global tiers, or Use Product Level with a custom From/To/Price table.
Fixed Packs Settings
Visible when ordering mode is “Fixed Packs”:
- Order weight limits — Min and max order weight with unit selector (g/kg or oz/lb)
- Available weight packages — Add packages with weight, unit, and stock quantity. Packages appear as draggable “pills” that can be reordered. Admin pills show stock-tier colours (green/amber/red) based on the low-stock threshold.
- Edit package dialog — Click a pill to adjust weight, stock, and optional marketing badge (Recommended, Best Seller, or None).
- Pack list display — Sort order (store default, ascending, descending, catalog order) and Package card style (store default, list rows, card grid).
- Quick-select presets — Comma-separated values shown as chips.
- Show dual-unit display and Allow typed weight input
Free Weight Settings
Visible when ordering mode is “Free Weight”:
- Minimum weight, Maximum weight, Step size
- Quick-select presets, Show dual-unit, Allow typed input
- Total available weight and Low weight threshold for inventory tracking
Product Options Tab
↑ Back to topEnable/disable global option groups for this product. Override section title, description, and individual group labels or choices. Groups are listed by category.
Sides & Add-ons Tab
↑ Back to topAdd accessories to this product:
- Accessories (Side & Add-ons) section title — Override the global default
- + Add Accessory — Search for simple products; set override price (stored in product config and enforced server-side at cart), display label, description, max qty, and FREE badge
- Drag to reorder, X to remove
Hooks & Filters
↑ Back to topAll actions and filters provided by the plugin for customization and extension for developers.
Actions
| Hook | Description |
lf_wbpw_register_units | Pass LF_WBPW_Unit_Registry instance. Register custom LF_WBPW_Unit_Family_Interface implementations. See Custom Units. |
lf_wbpw_before_weight_options_panel | Fires before the product editor weight options panel. Use to inject custom admin UI. |
lf_wbpw_after_weight_options_panel | Fires after the product editor weight options panel. |
lf_wbpw_before_weight_input | Fires before the frontend weight selector widget is rendered. |
lf_wbpw_after_weight_input | Fires after the frontend weight selector widget is rendered. |
Filters
Product & Weight
| Filter | Description |
lf_wbpw_product_type_label | Change the product type dropdown label (default “Weight Based Product”) |
lf_wbpw_available_weights | Modify the available pack weights array before display |
lf_wbpw_min_order_weight | Override minimum order weight |
lf_wbpw_max_order_weight | Override maximum order weight |
lf_wbpw_format_weight | Modify the formatted weight display string |
lf_wbpw_display_unit | Override the resolved display unit slug (kg, lb, or extension) |
Pricing
| Filter | Description |
lf_wbpw_active_price | Override the active price per unit |
lf_wbpw_tiered_price | Override the tiered price calculation |
lf_wbpw_price_html | Modify the price HTML on the product page |
lf_wbpw_weight_options | Modify pack combination results |
Cart & Order
| Filter | Description |
lf_wbpw_add_cart_item_data | Modify cart item data when adding a weight-based product to cart |
lf_wbpw_cart_item_price | Override cart item price |
lf_wbpw_cart_price_html | Modify cart price display HTML |
lf_wbpw_cart_item_data | Modify cart item display data (meta shown below product name) |
REST & JS
| Filter | Description |
lf_wbpw_rest_weight_options_response | Modify REST weight-options endpoint response |
lf_wbpw_rest_product_response | Modify REST product endpoint response |
lf_wbpw_rest_product_weight_based_data | Modify weight_based object in WC REST product response |
lf_wbpw_rest_units_response | Modify GET /units payload |
lf_wbpw_js_unit_config | Per-family JS config array |
lf_wbpw_js_unit_configs | Map of all families’ JS configs (admin) |
Units & Meta
| Filter | Description |
lf_wbpw_meta_storage_unit | Force pack/free-weight meta suffix to kg or lb |
lf_wbpw_unit_product_select_options | Product editor “Weight display unit” dropdown options |
lf_wbpw_convert_weight_to_meta_base | Convert extension input units to stored kg/lb |
lf_wbpw_convert_weight_from_meta_base | Convert stored kg/lb back to extension display units |
lf_wbpw_effective_package_card_style | Resolved list|grid for storefront (after per-product override) |
lf_wbpw_hidden_order_itemmeta_keys | Hide internal line-item meta in admin order screen |
Troubleshooting
↑ Back to topIf you encounter any issues while using Weight Based Products, try the following steps:
Update everything
- Make sure you’re using the latest versions of WordPress, WooCommerce, Weight Based Products, and any other installed plugins or themes.
- You can check your system information by going to WooCommerce → Status, where you’ll find version details and any important notices.
Check for plugin or theme conflicts
- Temporarily deactivate all plugins except WooCommerce and Weight Based Products.
- Switch to a default WordPress theme (such as Twenty Twenty-Five or Storefront).
- If the issue is resolved, reactivate your plugins one at a time until you identify the conflicting plugin.
Questions & Support
↑ Back to topHave a question before you buy? Please fill out this pre-sales form.
Already purchased and need some assistance? Get in touch with the developer via the Help Desk and include a clear description of the issue along with your System Report at WooCommerce > System Status > Get System Report.
