Sell Fabric Online with WooCommerce

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.

Keep up-to-date with the weekly newsletter

You will receive a bonus tips, actionable insight, and plugin updates straight to your inbox!

100% privacy guaranteed, unsubscribe with one click. Powered by ConvertKit