Variation Addons Block With Price Difference for WooCommerce

Tested & Works

This custom block for WooCommerce enables you to convert your variable selections to buttons. The block includes :

  • Functions to output and style your variation options as buttons.
  • A switch to target products by ID or globally affecting all product pages.
  • Functions to select the 1st variation for each attribute.
  • A function to enable the add to cart button by default on page load without needing to select any variations.
  • Functions to display the price difference plus + and minus – based on each selection dynamically like you see on Apples single product page.

Demo Video

Shows you how to use the variation addon’s block for WooCommerce on a single product page using the product ID and all product pages globally to convert your variations to buttons and display a dynamic price difference based on selection.

Installation & Usage

Install the plugin, activate and navigate to a variable product page and setup your attributes, generate variations and add prices as you normally would. No special setup is required here.

Once you select the block and can choose to use the block on 1 single product page by entering the products id or globally on all single product pages as seen in the demo video.


Add custom CSS rules to your child themes stylesheet, additional CSS field or in the plugins addons.css file where you’ll find only a handful of default CSS.