WooCommerce Storefront Pricing Tables extension allows you to easily create and insert attractive pricing tables into posts/pages on your Storefront powered web site.
Installation for WooCommerce Storefront Pricing
- Unzip and upload the plugin’s folder to your
- Activate the extension through the ‘Plugins’ menu in WordPress
Enter the WordPress Customizer to begin using the plugin.
Also, Get Storefront Powerpack
There are two main locations where you will interact with this extension’s functionality; on the add/edit post screen and in the Customizer. On the former, you will insert your pricing tables using the Pricing Table shortcode and in the latter, you can customise its appearance.
The Pricing Table shortcodes
You can insert the shortcode by manually typing it and the relevant attributes, or you can use the included Shortcode Generator which is easier.
Using the Shortcode Generator
Navigate to the add/edit post screen. On this screen, ensure ‘Visual’ mode is selected rather than ‘Text’ so you have access to the TinyMCE editor. You’ll notice a new button for adding Pricing Tables:
The Pricing Table shortcode is made up of two parts:
- The wrapper which declares how many columns your table has, and the alignment of the content therein
- The individual columns themselves
First, add the wrapper by clicking the Pricing Tables button then selecting “Pricing Table Wrapper”. You will then be prompted to declare how many columns your table will have and to specify the content alignment. Choose the appropriate settings then click OK.
After doing so, you’ll see something like this added to your post content:
Then click the Pricing Tables button and select “Pricing Table Column”. Doing so will open a prompt to enter the content for that column.
- Product ID: This can be found on the edit product screen and will be used to create the add to cart button at the bottom of the column.
- Column Title: If you leave this blank, the title of the product specified in the Product ID will be used. Otherwise, it will form the content of your column title.
- Features: The features you want to display in your column. Separate each individual feature with a pipe (|). You can add basic HTML here.