Fabric to sell online

If you run a fabric store you’re used to customers coming in, choosing a bolt, and requesting a measurement. Moving this interaction to the online world is a challenge. How do you handle pricing products that are sold by a variable measurement?  In today’s “How To” we’ll share a solution for selling fabric with WooCommerce!

WooCommerce is a great way to sell online and handles products with fixed ($25 for 1 unit), variable fixed ($25 for small, $45 for large), or on sale pricing (was $25, now $15) out of the box. One thing it doesn’t natively have a way to price a product, if the price is dependent on the measurement of the product needed. This limitation poses a problem when products are sold by the yard and not by a set unit price.

Pricing Fabric By the Yard

For this example, my requirement is that my yellow floral print fabric is sold by the half yard. A customer can purchase in quantities of 1 yard, 3 yards, or 4.5 yards. The base price is $4 per yard. As a store owner, I want customers to be able to preview the fabric they want, enter in the number of yards they need and see a calculated price before they add the item to their cart.

How to Sell Fabric with WooCommerce

This is where the WooCommerce Measurement and Price Calculator comes in!
With this premium plugin, the store owner can define the unit price of a product then let the customer enter the measurements on the product page.

After purchasing and installing the plugin, you can create a WooCommerce product. In the WordPress admin hover over Products and click on Add Product. Enter the title and description of your product as you normally would.

Click on the Measurement tab in the Product Data meta box. Our measurement will be based on the square yard so I set Measurement to “Area.”

Click the box for Show Product Price Per Unit. This opens up a few more options. I set the Pricing Label to Yard, and the Pricing unit to “sq. yd.” Click the box for Calculated Price to allow customers to enter in the measurement they need on the front end of the site.

Finally, I add an Area label of “Area” and Area Unit of “sq. yd.” to complete the settings. Here is what the Measurement tab looks like when I’m done with the configuration.

Selling Fabric By the Yard

In the General tab of the Product Data box, use the Regular Price field to enter the price per yard. In this example, we’re using $4 per yard. The text “($ / sq. yd.)” was added by the plugin to remind you how the price is represented to the customer.

Setting price per yard

Setting price per yard

After saving the product settings, I can view the product on the front end of the site. Customers can see that the base price of a yard is $4.00 and they can use the “Area (sq. yd.)” text box to enter in their desired measurement. After a number is entered, a Product Price field appears that shows them the calculated price of their desired quantity of fabric.

Calculated fabric price woocommerce

Now customers can add a single quantity of 4 yards of fabric to their cart and they are charged appropriately!


With WooCommerce and the WooCommerce Measurement Price Calculator, it’s easy to sell fabric with WooCommerce. This same example can be used to sell other types of products that require measurements from a customer before providing a price.

Published by Daniel Espinoza

Daniel has been building ecommerce plugins and sites since 2007. He built the first commercial plugin for WooCommerce in 2011 and has built dozens of plugins since.


  1. Hi there! Does this allow customers to purchase by the half yard? Thanks so much!

  2. Hi-this may be just what I need for my online store as I switch over to woocommerce. Two questions: How does this affect the inventory-can you still have your inventory be how many yards you have in stock?
    Also, the area (square yard) is confusing to the customer in my opinion-is it possible to change it to just yards so the customer can choose .5, or 1, 2.5 etc .

  3. Hi Daniel
    I am looking for a solution to have the availability of products (product sotck) depending on a general fabric stock.
    For example, if I have 5 yards of fabric I know I can get 50 product A or 100 product B. If I sell 10 product A then the fabric is reduced to 4 yards so the updated available stock is 40 product A or 80 product B.
    Because the general stock refence is the fabric, my product A and B availability depends on it.

    I am not sure if I was able to explain. But is it possible or maybe something similar.


  4. If I follow Xavi’s question correctly, could product bundling do that?

  5. Hi there,

    Can you restrict the quantity to be only 1/2 or 0.5 yards? Or…say 1/4, 1/2, and 3/4 yards fractions only?

    For example, I don’t want customers to be able to order 0.1 yards. I only want certain fractions allowed.

    Also, does it decrement the inventory also?

    Thank you!

  6. Hi,

    Is it possible to round up?

    So for example:

    We would list products using m2 price so lets say in this case £20m2
    But we only supply in packs. Say 1 pack is 5m2 (£100)
    customer calculates they need 19m2 of X.
    We would sell them 4 packs, a total of 20m2 (£400) rather than split packs up and sell them exactly 19m2.

    Is that possible with this plugin?


    • Hi James,

      The plugin doesn’t do rounding, but you could probably set it up so that the pack is what customers are buying, and then only allow purchasing whole numbers of the packs (1 pack, 2 packs, etc).

Comments are closed.