How to Sell Products By Weight in WooCommerce (Price per kg)

Are you looking to sell products by weight in WooCommerce? There you go. We have created a Step-by-Step Guide on How to Sell Products by Weight in WooCommerce.

WooCommerce lets you add products’ dimensions, weights, and sizes. There are many scenarios when you would like to sell products by their quantity, such as when selling fruits, vegetables, dry fruits, nuts, etc. 

In this tutorial, I’ll show you how to sell products by weight in WooCommerce. To get the desired results, I’ll use the WooCommerce Product Table Plugin to show variations quickly in a table and the WooCommerce Variation Swatches Plugin to create product variations.

I’ll show you each step in detail with the help of images to help you understand the process better. So, continue reading to check out how to sell products by weight in WooCommerce. 

How to Sell Products By Weight in WooCommerce? 

We will add weight options as variations in our WooCommerce store to sell products by weight. 

For instance, if you are selling sweets or, let’s say, dry fruits, you can create and add multiple weight variations, such as 500g, 1Kg, 1.5Kg, 2Kg, and more in WooCommerce. After adding these as variations, we will show them in a table to let customers choose easily. 

If a customer wants to buy 1.5Kg Almonds, they can add 500 grams variation and 1Kg variation to their Shopping Cart. 

Follow the steps to sell WooCommerce products by weight. 

Method 1: Sell Products by Weight Using AovUp Product Addons

The first method to sell products by weight is using the AovUp Product Add-Ons & Extra Options plugin. It’ll allow you to add any product field in just a few simple steps. 

I’ll create predefined packs and allow customers to purchase a custom quantity in Kgs. 

Note: Make sure to download and install the AovUp Product Add-Ons & Extra Options plugin to follow along with this tutorial. 

The following is the step-by-step process to achieve the final goal. 

1. Navigate to Product Add-Ons

Note: I assume you already have added a simple product to your store. If not, add a simple product before following this tutorial. I have set its product price to 0, as I’ll create pricing later in this article using the plugin. 

To sell products by weight, navigate to AovUp > Product add-ons from your WordPress dashboard.

2. Create an Option Set

Next, we need to add an option set to all or specific products we want to charge per Kg. Click the ‘Create Option Set’ button in the middle of the page to add an option set. 

2.1. Add the Option Set Name

After clicking it, you will see a new interface with different settings. In the ‘Option set name’ field, add the name. It could be anything you want, but you may want to keep it as descriptive as possible. 

It’ll help you if you are working with different option sets. 

2.2. Select the Product

The next thing you need to do is select the products to which you want to display this option set. You have three different options:

• Add an option to all products. 
• Add an option to specific products or categories. 
• Add an option to a specific product type.

You can select any of them depending on your goals. However, I only want to add this option set to a specific product.

1. I’ll select the ‘Add an option/custom field to specific products or categories’ option by clicking its image. 

2. Once you select it, two new fields will appear below it, from which you can choose the products and categories. I have selected a product from the ‘Show in Products’ dropdown. 

Moreover, you can also exclude some specific products from the all-product selection. It is entirely up to you. 

3. Create Predefined Weight Packs

It is an optional step and entirely depends on your requirements. You can create predefined packs and allow customers to purchase them and quickly improve their experience. 

This plugin gives you various options to fulfill your requirements and allows customers to personalize their products. The following is the list of fields or options you can add using this plugin. 

• Heading
• Text 
• Separator
• Checkbox
• Radio buttons
• Input text
• Textarea
• Color Swatch
• Number
• Select
• Label or image
• Product
• Date
• File Upload
• Color picker

You can use any field you want to create the predefined weights, but I’ll use the Label or Image field. 

To add a field to this set, click the ‘Add New Option’ button at the bottom of the page, and select the field you want to add. I’ll add a Label or Image field to create predefined weight packs. 

3.1. Add the Field Title

Once you select the field, a new popup will side-in from the right side of your screen. From that popup, you can configure the styling and other options of the field. 

These will be the same for most fields; you can add any field by following this tutorial. 

First, add the field title in the ‘Title’ field. It’ll be displayed on the front end. If you want, you can also add the field description as well. 

3.2. Select this Option by Default

After that, you need to check the ‘Selected by default’ checkbox for this option. I want this option to be selected by default. 

3.3. Add the Field Label

Next, add the label in the ‘Label’ field. I’ll add the weight of the predefined pack I want customers to purchase. For example, 1 kg or any other weight you want to create.

3.4. Set the Custom Field Price

To set the price for the addon/custom field, you will get three options:

• Product price doesn’t change – set option as free
• Product price increase – set option price
• Product price decrease – set discount

You can select the one that best matches your requirements, but I have selected the ‘Product price increase – set option price’ option from the price dropdown. 

After selecting it, You can set a regular or sales price for the option. I’ll add the regular price in the ‘Regular’ field. 

Note: You also get an option to set a fixed price or percentage of the base price for this custom field/add-on. I have added a fixed amount. 

3.5. Add More Custom Fields

You can add multiple label or image fields in this option set. To add more label fields, scroll to the bottom and click the ‘Add a new image or label’ button.

To configure it, you can follow the same steps as mentioned above. I have added two more predefined packs and set their pricing accordingly. 

4. Configure the Option Display & Style

You can also customize the display & style of the field. Click the ‘Display & Style’ tab within the popup. You’ll get several different styling options. 

I’ll not go into the details, you can explore them yourself. 

After making the required adjustments, don’t forget to click the ‘Save’ button within the popup to save the settings. 

5. Add a Weight Field

After creating some predefined packs, you can create a field allowing customers to add custom weight and purchase it. For that, we’ll use a number field. 

To add one more field to this set, click the ‘Add New Option’ button at the bottom of the page, and select the field you want to add. I’ll add a Number field. 

5.1. Add the Field Label

A new popup will slide in from the right side of your screen. From that popup, you can configure the styling and other options of the field. 

After the title, add the field label in the ‘Label’ field. You can also add a tooltip and description.

6. Set the Product Price Per KG

Next, we need to set the price per kg. It’ll get multiplied by the value the user will add in the field. To set the price for the number field, you will get four options:

• Product price doesn’t change – set option as free
• Product price increase – set option price
• Product price decrease – set discount
• Value multiplied by product price

As we want to sell products by weight, select the ‘Product price increase – set option price’ option from the ‘Price’ dropdown. 

6.1. Set the Per Kg Price

Once selected, you can add the regular price in the designated field. You also need to choose the ‘Price multiplied by the value’ option from the option cost dropdown. 

Selecting this option will multiply the value with the option’s cost. For example, I have set the per kg price as 10 so if a customer wants to purchase 5 kg and adds this value in the field, the total price will become 10×5=50. 

Finally, don’t forget to click the save button at the bottom right corner of the popup to save the settings. 

7. Final Results

Let’s see the final results. 

I visited the product page, and as you can see in the screenshot below, predefined packs and custom weight fields were being displayed. 

One of the predefined packs was selected by default. I could also add a custom weight and complete the purchase. 

Method 2: Using Product Variation

To install the WooCommerce Variation Swatches Plugin & WooCommerce Product Table Plugin, you must install the Woosuite Core plugin and activate your Woosuite license key. We have created a Quick Start Guide to walk you through the installation process. 

1. Create Or Edit A New Product

I’m starting this from scratch, so it will be easier for you to understand. But, you can also edit an existing product if you want. 

In WordPress Admin Dashboard: Products > Add New > Click on it.

1. Give a Name to Your Product

In the ‘Add Product Name’ field, enter the name of the product you want to show on the front-end. 

2. Add A Short Description for the Product

In the ‘Product Short Description’ field, write a short description of the product you want to show on the Product page. 

3. Change ‘Product Type’ to ‘Variable Product’

We will create variations for the product in the upcoming steps. To create variations, we will need to change the ‘Product Data’ to ‘Variable Product’ from ‘Simple Product.’

To create ‘Product Attributes’ in WooCommerce, search for the ‘Attributes’ option in the ‘Products’ submenu. 

4. Upload a Product Image

Look for the ‘Product Image’ section in the right sidebar of your product edit page. Click on the box to add an image to your new product. 

5. Click on the ‘Publish’ or ‘Update’ button. 

Click on the ‘Publish’ or ‘Update’ button to publish the product. 

2. Create Product Attributes For Your WooCommerce Store

To create ‘Product Attributes’ in WooCommerce, search for the ‘Attributes’ option in the ‘Products’ submenu. 

1. Add ‘Weight’ in the Name Field

We will create the Weight attribute in this tutorial. So, we will add ‘Weight’ in the name field. This will show on the front end. 

2. Select ‘Type’ to ‘Label’

From the given options, select ‘Type’ to ‘Label.’ This determines how this attribute’s values are displayed. 

3. Click on the ‘Add Attribute’ Button

Click on the ‘Add Attribute’ button to save and publish the new product attribute. 

4. Add Items to Your New Attribute

You will see all the attributes you created on the same Attributes page. You can see the same in the given image. 

5. Configure the Attribute

Click on the ‘Configure Items’ button to edit the attribute and add value to it. 

Read Also: How To Add Color Swatches in WooCommerce.

6. Create Product Sizes

Follow the steps to Create Weight Variations.

6.a. Give A Name to Your Product Sizes

In the ‘Name’ field, Add weights like ‘500 Grams,’ ‘1 Kilogram,’ etc. This will appear on the front end. 

6.b. Repeat the Same Steps to Create More Product Weight Attributes

Repeat the same steps to create more product weight variations. 

3. Add Weighted Product Variations For the Selected Product

Follow the given steps to create weighted product variations. 

1. Edit the Product to Create Weighted Product Variations

Head over to your ‘Products’ section, and edit the product you created or edited at the beginning. 

In the WordPress Admin Dashboard: Products > Choose the Product > Edit > Click on it.

2. Import Attributes to the Product

Look for the ‘Attributes’ option in the Product Data section. And, click on it. 

Choose Weight from the dropdown, and click on the Add button.

Click on the ‘Select All’ button. 

Tick the ‘Used For Variations’ button.

Then, click on the ‘Save Attributes’ button. 

4. Create Variations from Product Attributes

Jump to the ‘Variations’ settings in the Product Data section. 

From the dropdown, select Create Variations from All Attributes, and click on Go.

5. Add Information to Weight Variation

In the steps, we will add information to all our product variations, such as adding price, image, stock, etc. 

1. Add Variation Image

Click on the ‘Image’ icon and select the variation image from your image library. 

2. Set Price to Your Variation 

You should add the price for the variation to the ‘Regular Price’ field. 

3. Add Available Stock for the Variation

Tick the ‘Managed Stock’ button to enable the ‘Stock Quantity’ option. 

In the ‘Stock Quantity field,’ mention the stock available for this particular variation. This will be visible on the front end. 

4. Add Weight to Variations

Look for the Weight(kg) option, and add your variation weight there.  

5. Repeat the Same Steps for All Variations

Now, repeat the same step mentioned above for all variations you created. After doing this, click on the Update button to save all the changes. 

6. Navigate to Product Table Plugin’s General Setting

Look for the Woosuite option in the right sidebar of your WordPress toolbar. Then, click on the ‘Product Table’ option.

Navigate to the Woosuite Submenu > Click on the Product Table in the WordPress Admin Dashboard.

After clicking on the ‘Product Table,’ it will redirect you to the ‘General Settings.’ 

Read Also: How To Display Variations on the Shop Page for WooCommerce?

7. Click on the ‘Add New Table’ Button

Woosuite: Product Table > General Settings > click on the Add New Table button. 

After clicking on the ‘Add New Table’ button, it will redirect you to a new page with an additional settings section on it. 

8. Navigate to Order Form Display Setting

Click on the ‘Order Form Display’ dropdown arrow to access the settings.

9. Create Weight Variations Table

Follow the mentioned steps to create a variation table. 

1. Give An Internal Campaign Name

Enter an internal campaign name for your new variations table in the ‘Title’ field. This is for internal purposes only. 

2. Navigate to Order Form Information Settings

Head over to the ‘Order Form Information’ settings. 

3. Add Columns to the Product Table

Now, you need to add columns to your WooCommerce variations Table. You can add columns to the table according to your preferences. 

To add a particular column in the product table, you have to drag the required columns from the ‘Available Columns’ box to the ‘Current Selected Columns’ box. 

Video: https://drive.google.com/file/d/1A7zAczMJf8BeSvb3M2fsj-aFRdJdXisa/view?usp=sharing

You can also edit the Columns’ name, width, and class by clicking on the ‘Pencil’ icon. Click on the Pencil icon. There you will see three options. 

1. Name: You can change the name from this option. 

2. Width: By default, this will be set to Auto. You can add the preferred width in the Width field. 

3. Class: This field is here to let you customize the particular field with the help of CSS. You can enter your CSS code in this field. 

For my WooCommerce variations table, I will add these columns – SKU, weight, thumbnail/image, stock, price, and add-to-cart button. 

We will also add more columns like checkboxes and other options through other settings. So, keep following the steps.

4. Enables Checkboxes and Add to Cart Button

To enable the Checkboxes and Add to Cart feature, head over to the ‘Bulk Add to Cart’ setting. 

Select the ‘Add to Cart Button Display’ option to ‘Button and Checkbox.’ 

5. Show Quantities in the Table

Turn on the ‘Quantities’ option to let buyers change the quantity before adding the products to the cart. 

6. Show Variations On the Product Table

Select the ‘Variation Setting’ to ‘Separate Rows in A Table.’  

7. Click on the Save Changes button

Now, it’s time to save the changes and publish the product table. 

To save the changes, click on the ‘Save Changes’ button present at the top-right corner of your WordPress dashboard.

Also Read: A Definitive Guide On WooCommerce Product List View

8. Select the Variation Table

Head to Product Table’s General settings, and look for ‘Enable Variation Table.’

From the dropdown, select your recently created variation table. 

9. Hide ‘Search Bar’ From the Table

Edit your variation table from the Product Table’s ‘General settings’. 

Head over to the ‘Order Form Control’ settings, and search for the ‘Search Box.’ 

Select ‘Hidden’ from the dropdown. 

10. Disable Product Totals to Show on the Product Table

Look for the ‘Product Totals’ option, and select ‘Hidden’ from the dropdown. 

11. Disable Headings

Go to the ‘Order Form Design’ settings to remove headings from your weight variation table. 

Search for the ‘Disable Heading’ option, and toggle it on. 

Final Results

We have now figured out how to sell products by weight in WooCommerce. We made all the settings correctly. We will now check whether everything is working fine or not. 

I’m currently on the Product Page, and you can see the weight variations table in the product description. Here are the final results we got with the help of the Product Table Plugin and WooCommerce Variation Swatches Plugin. 

Conclusion

We finally checked out how to sell products By Weight in WooCommerce. I hope you understood the steps properly and implemented them on your WooCommerce store. If you face any issues while selling products by weight, leave a comment or contact customer support.

Ready to sell products by weight in WooCommerce?
Install the WooCommerce Product Table plugin & WooCommerce Variation Swatches Plugin today.