Installation

Download the plugin's zip file. From the dashboard of your site click the Plugins - Add New option.

Click the «Upload Plugin» button on the top.

Select the downloaded zip file, upload it and click the «Activate» button.

If you haven't already installed or activated the WooCommerce plugin, you will see a notice. The WooCommerce plugin is required for the WooCommerce Products Wizard plugin to work.

Creating a Wizard

To create a new wizard go to the «WooCommerce - Products Wizard» page and click the «Add New» button.

Type a name - better relevant to the scope of your wizard.

The content part can be used as a welcome step for your wizard. You can add here, for example, a description of what your customers get from this wizard.

Click the «Add step» button to create some steps. Save the wizard.

Use the Wizard

Copy the shortcode of the wizard and paste it on any page or post you want.

By previewing the post/page, you will see the steps you just created, as in the image below.

Now you are ready to fill the steps' options.

Behavior Settings

The «Work mode» is the setting that defines the main wizard's view and behavior. The available options are:

• «Step by step» - this mode shows the steps of the wizard as tabs. This mode does not let you jump from the first step to the last one. The only way to skip a step is to use the "Skip" or "Go to results" buttons.
• «Free walk» - this mode shows the steps as tabs. It also lets you open any step you want;
• «Single step» - this mode opens vertically all the steps of the wizard at once;
• «Sequence» - this mode output the steps vertically, but make them visible one after the other according to the current step;
• «Expanded sequence» - this mode output all the steps vertically, but make them available one after the other according to the current step.

The «Navigation action» option defines what happens after the click on a navigation button. Available options here are: submit and move to the next step, just move to the next step, do nothing, or use the auto smart mode.

The «Final redirect URL» option defines the URL of the page which will be opened after the wizard selection confirmation.

«Save state to URL» setting makes possible to get a current wizard cart and active step via URL to share the selection via link. Works the same as the share button control.

«Default active step» setting allows to pre-define a specific step active by-default. Enter a step number, "start", or "result".

The «Check Availability rules» option enables/disables ALL Availability rules everywhere in the wizard.

The «Scrolling on top of the page on navigation» option scrolls on the top of the page on every click of the navigation buttons.

By default the page will be scrolled top only if the most of the wizard part isn't in the view. With the «Strict scrolling top on update» you can force to always scroll the page.

The «The top-margin on scrolling in (px)» option defines the top-margin after scrolling the page to the top.

The «Hide prices» option hides the prices of the product within the steps of this plugin. This option does not affect the actual prices of the products or the Woocommerce cart.

For the products which are bought by this wizard the «Price discount» option makes a discount, in percentage. This option can be overwritten by setting a product category discount or a product discount for a specific product.

The «Price discount type» option controls how the discounted price will be shown. The price can be replaced by a reduced price (strikethrough) or a highlighted price (on-sales).

Cart Settings

The «Strict cart workflow» option removes all products from the steps after the active one. This option might be helpful if you have high-loaded Availability rules for products.

The «Clear main cart on the wizard confirmation» option always truncates the cart of WooCommerce any time you complete the wizard workflow.

The «Show step names» setting shows the names of the steps in the results view, in the PDF table, and the widget. You can select between the available options to show "all the steps" or "only the selected ones".

The «Reflect products in the main cart immediately» option adds the products of the wizard in the WooCommerce cart.

The «Minimum/Maximum products selected» option defines the limits of the selected products to complete a purchase via the wizard.

The «Minimum/Maximum total products' quantity» option limits the total quantity of the selected products of the final order created by the wizard.

The «Minimum/Maximum products' price» option limits the selected products total price for the final order created by the wizard.

The «Step inputs price» setting allows to define price for custom steps inputs made using the [wcpw-step-input] shortcode. Their price will be added to the final price of the kit. It will not work without combining products into kits.

This is necessary to define the setting name and its price at least. This way any value of this setting will add the defined price to the totals.

But this also possible to define an exact combination of the step input name, value, and price. It will be applied instead of the common input name price.

Kit Settings

The «Group products into kits after adding to the main cart» option makes products bonded to each other in the WooCommerce cart.

The «Kit's type» setting changes the view of a kit. By using the value «Separated lines» the products will be presented in separated products, although still bonded. Alternatively, the «Combined products» selection shows only the first product in the cart and the other products of the order as sub-lines of this product. You can also use the wizard's thumbnail as a product thumbnail instead of the first product's one.

You can select a «Kit base product» to use as the root product of your kit. This option does not affect the final price. Otherwise, the first product of the wizard's cart will be the root one.

You can define a «Base kit price» which will be included in the kit's price by default. Doing so, you have no way to exclude it from the cart.

You can define a static «Kit price» value for the combined kit type. This setting defines the final kit price whatever selection it has.

It is possible «Not to calculate» the kit child products in the cart and count the kit and its children as one cart item.

Enable the «Edit button for the kit in the main cart» to allow the customer to go back and change the kit's products. The wizard will be opened on the last step of the kit's products.

With the «Attach PDF to the root product» setting the generated PDF file will be attached to a root product of the wizard kit.

Thumbnail Settings

It is possible to show your customers how the product combinations they made might look like. That requires a preliminary configuring of the image canvas. The generated thumbnail will be used as a thumbnail for the combined parts of a kit and the kits with a pre-defined base product. It also can be output while the wizard workflow in the description of the steps of PDF.

Prefer transparent PNG images for better overlapping.

To use the canvas:

Click the «Generate thumbnail» setting and define its Width and Height.

On the thumbnail's canvas create the areas to show the (parts of the) products. Click the «Add item» button to add a new area inside the canvas. The total number of areas you add is shown on the right side of the row near the «Clear canvas» button.

You can change the areas' position by drag and drop. You will see it indicates the X and Y settings.

Moreover, that's possible to rotate the area clockwise using mouse. The angle will be reflected into the Rotate setting.

You can also change their sizes and z-index order. You can do so by the area settings. The position of the layers affects the images overlapping on the canvas.

Each area can have a name. This name helps you to put your image in the right position on the canvas.

Also, that's possible to leave some developer notes in a special field. It will not be visible anywhere, except for the admin side.

You can define a default image for the areas. You can replace it later if you wish.

When you have designed your canvas you can configure the products or the categories.

The Generated thumbnail will be shown in the widget then any of products is in the cart. If you want to show the thumbnail in another place, for example on the Results step or in the PDF file, use the [wcpw-generated-thumbnail-url] shortcode to get its link.

An example of the thumbnail shortcode:

<a href="[wcpw-generated-thumbnail-url]" data-rel="prettyPhoto" rel="lightbox"><img src="[wcpw-generated-thumbnail-url]" alt=""></a>

The available thumbnail settings shown in the next image are straightforward.

If the area setup is finished you can Lock it to not accidentally change it.

Layout - General settings

The «Show progress» setting controls if the progress bar will be shown on a specific screen size.

You can also the the «Progress label» to change the inner text of it.

Using the «Sidebar position» setting you can control sidebar place for different screen sizes.

With the «Sidebar width» setting that's possible to change the sidebar width for different screen sizes. It uses CSS variables with a unit. Without a unit the value will be converted to pixels.

By the «Navigation template» option you can choose the style of the navigation tabs. Available values here: tabs, pills, buttons, line, line-horizontal, or none.

«Toggle navigation to mobile on screen size» setting allows to switch the selected navigation template to the mobile vertical button on a specific screen size.

Use the «Navigation button class» to change the mobile button view.

See the Button controls settings.

The «Sticky navigation» option controls if the navigation bar will be sticky on a specific screen size.

The «Sticky navigation offset» sets the gap between the sticky navigation bar for different screen sizes.

The «Expand widget by default» option lets you present the widget opened.

The «Sticky widget» option controls if the cart widget will be sticky.

The «Sticky widget top-offset» sets the gap between the sticky widget for different screen sizes.

You can «Show/hide the header and footer» of the wizard.

The «Sticky header» and «Sticky footer» options control if these elements will be sticky on a specific screen size.

The «Sticky header/footer offset top» tunes the gap between the top of the screen and the sticky element for different screen sizes.

The «Show step names» options show the step names above products and description.

Steps General settings

The «Enable Description step» option enables/disables the first step of the wizard. This step contains the description text of the wizard.

The «Description step title» option sets the description in the navigation tab for the first step. E.g. you can name it: "Welcome".

The «Enable Results step» option enables/disables the last step containing the total selected products.

The «Results' step title» option sets the Results' step text in the navigation tab.

The «Results' step description» option sets the Results' step description text that is shown before the table.

The «Show Results' step table» option sets on/off the cart table on the result step. For example, it can be disabled and use the widget instead.

The «Results step contact form» option defines the ContactForm7 form in which the results of the wizard will be presented below the products-selection table. Using this form you can send emails with the content of the cart in PDF format.

Use the «Results strings» option to change the captions of the Result page on the Result step and in the PDF file.

It is possible to have the «Checkout step» enabled. This option forces the Checkout step as the last step of the wizard. By using this option your customer can do checkout from the wizard without extra navigation.

If you want your customer to navigate to the WooCommerce checkout page from the wizard, be sure that in the «Checkout step description» the [woocommerce_checkout] shortcode is found.

Strings - General settings

Strings - General settings allow setting the labels of the strings through the wizard. Their usage is straightforward.

Control buttons - General settings

The Control buttons General setting defines several options on the Navigation Control buttons.

You can choose specific controls for header/footer and define their order. There are also "free space" elements available to justify controls left, center, or right specific way.

Some of the controls supports a special [wcpw-cart-total-price] shortcode to output current selection total value as a button text.

See the Button controls settings.

PDF Settings

The «PDF header height» (in cm) option allows to define the top header size for each page.

The «PDF header content» will be used as the header for each page. There are a few native shortcodes available:

• [wcpw-result-pdf-page-number] - The current page number;
• [wcpw-result-pdf-page-total] - Total pages count.

If you use a ContactForm7 form in the wizard you may set its email shortcodes via the «Result's step contact form» setting.

The «PDF top description»: content will be placed before the Results table.

The «PDF footer height»: in cm. This option defines the top header size of each page.

The «PDF footer content»: will be used as the footer for each page. It is also possible to use dedicated shortcodes to output the current page number and total pages number.

The «PDF bottom description»: content will be placed after the results table.

The «PDF additional CSS» setting provides a possibility to pass extra CSS rules into the PDF file.

Filters - General Settings

The Filter General settings define the filters' string labels throughout the wizard.

Main Settings

You choose the styles that will be included in the plugin.

• «Full» is the self-sufficient style file. It applied all required styles to the plugin's elements.
• «Basic» styles are fine for you if your active theme is based on the "Bootstrap 3/4/5" framework. In this case, this wizard's style will be inherited from your active theme's. Despite this, you can also add your own CSS-styling rules.
• «None» value. doesn't include any styles at all. In this case you can create a full custom CSS-style from the plugin sources and tools or by your own approach for styling.
• «Custom styles» include the file with your custom styles such as colors, font-size, and so on. To modify it go to the «Custom styles» sub-page.

The plugin is made using the newest ES6 modules scripts, so there is a setting to select «Scripts including type» - that could be a raw JS sources or build JS bundle.

Sometimes the server's configuration might face problems with the stored sessions. Examples are: the wizard can't go to the next steps, or the cart contents' disappear on a page refresh. In this case, tick the «Store session in the DB» option. This option works much more reliable, but, probably, a tiny slower.

If you have a cache plugin on your site it might make the wizard's work unpredictable. This way the «Send current state hash via AJAX» setting might help to fix.

Custom Styles

It is possible to reconfigure the plugin's styles according to your needs.

Don't forget to choose a «Custom full styles file» value of the «Styles including type» setting.

This is possible to «Minify custom styles» using the special setting. That might be helpful for the debug needs. In other cases keep this setting enabled to keep the CSS-file smaller and save your customers' traffic.

There are two modes for custom styling. The «Simple mode» provides only a few main variables to change.

Sometimes the wizard's fonts look very small on specific themes. To resolve this Adjust the «Font size» option. You can use any CSS units there, like "rem", "px", "pc", and so on. Apart from that, you can also change the product title and price font sizes.

You can also change the colors for different colorful elements of the wizard, like controls, buttons, and navigation.

The «Advanced mode» allows you to change a great range of variables, but it requires SCSS knowledge.

All the variables of the plugin are available to be changed by using a text editor.

Advanced mode also supports using of a pre-defined Bootswatch themes, included to the plugin. Select a theme and click the «Apply» button once to use the theme for the wizards, but keep in mind the «Custom SCSS» setting will be override by the default values with the applied theme styles. You can modify custom SCSS setting after applying a theme.

In a case of a styling-command error, you will see a message while saving. The styling file will not be saved.

In case you need to reset your styles to their initial state click the «Reset to default» button once.

Export/Import

The first acquaintance with the plugin might be complicated due to the lot of settings available. To make this process easier feel free to use the demo-data generator stuff.

To get the demo-data list click the Get list near the Load demo data setting. The list of entities to create will appear the table lower. This table output all entities names, types, status, and full data dump. This is possible to select only specific entities to be created, but remember some of them depends on each other, so if disable some of the entities, other might be created particularly.

You can try the generation process using the Test mode launch. You will see each entity status individually in a special column. In case the entity isn't complete, you can find some red NULL strings in the entity data dump column. It'll help you to see what data isn't created.

With the Update existent setting on the plugin will try to update the same labeled entities first, and only then create a new one.

The number of created and incomplete entities will be shown under the Import button.

That's also possible to migrate all created plugin data from one site to another. Use the export file from the source site on the target site.

The file will be parsed and in case of success the table of parsed entities will appear lower. You can also try the generation process using the Test mode launch to be sure the data can be created fully. In case of problems you'll see the incomplete status of some entities.

All of the image attachments will be downloaded from the remote host and uploaded into your media library, so be sure the remote host is available at the moment of import.

Templates Customization

WooCommerce Products Wizard plugin has a folder of views that are used to be shown on the front of the site. There is a possibility to customize them as you need and keep the changes while the plugin updates.

To do this select files that require customization in the views list and apply the «Copy to the active theme» action in the form above. Selected views will be copied into your active theme in the woocommerce-products-wizard folder saving the sub-folders structure. Files copied to your active theme will be marked by a tick icon.

The plugin firstly searches for a specific view in the theme's folders, and if it doesn't find the view there, it gets the view from its own directory.

You can edit the copied views using the «Appearance - Them editor» page.

If you want to delete some views from your active theme choose them in the views list, select the appropriate point in the form dropdown above and apply the changes. The view will be removed from the theme and the plugin's view will be used instead.

Keep in mind plugin might have some changes in the view files while updating. So if you have customized ones some of the new features will not work or might work wrong with them. This way just copy them from the plugin and adjust to your needs once again.

Share Links

If you have the «Share button type» equal to Short link with data stored in DB you'll find all created share links on that page.

Select a wizard, define a dates of creation range if necessary, and change the links per page setting.

The lower table row indicates one share link and its data: ID, short DB link, full link, when it's created, last time the link clicked, and the number of clicks

The wizard doesn't want to move further through the steps

The wizard looks work but returns a static or random output.

I want to collect custom data from users (text or file)

I want to get products selection via email

Is there a way to filter the products or steps, based on the user’s choice from the previous step?

Product thumbnail opens a new page instead of a lightbox

Can I duplicate the wizard with all its settings?

Extra Product Options plugin

The use of the Extra Product Options plugin which is compatible with Woocommerce Products Wizard plugin. This plugin lets you add custom fields to any product. To make it work with Woocommerce Products Wizard plugin it is necessary to set the following settings:

• The General - Initialization - Plugin Loading Areas to "Everywhere";
• The General - Various - Enable plugin for WooCommerce shortcodes to "on";
• The Global - Product page - Reset option values after the product is added to the cart to "off".

Step Custom Fields

The second way is to add custom fields to the steps implemented by the Woocommerce Products Wizard plugin. You can add them, for example, into the step description setting field.

[wcpw-step-input name="My custom filed"] - the shortcode to output the input tag. Keep in mind the shortcode outputs only INPUT/TEXTAREA/SELECT elements so you need to add a <label> tag near or around the input yourself.

The name attribute is required for correct work of the shortcode.

The type attribute indicates the input type value. That could be any of the available input types, except of: "button", "image", "reset", "submit".

Out of the available HTML input types you can set the type attribute to textarea to output a big text input field, and select to output a native select/dropdown element.

For the select tag type use the values attribute to list the options, delimited by a "|" symbol. An example:

<label>
    Select a value
    [wcpw-step-input name="My dropdown" type="select" values="One|Two|Three|Four" value="Two"]
</label>

You can also pass any other attributes you need the same way. All of them will be passed into an input tag. That could be a key="value" pair or a singular attribute.

Here is an example of checkbox input:

<label>
    [wcpw-step-input name="My checkbox" type="checkbox" value="Yes" checked]
    My checkbox
</label>

Using of the array input name

Some of the input types allows to pass a few values per one name. For example, checkbox input type, file input type and select tag allows to pass a few values using [] brackets in the name attribute.

To not broke the shortcode structure use the {} brackets instead of the square ones. Examples:

<label>
    [wcpw-step-input name="Checkbox options{}" type="checkbox" value="One"]
    Checkbox options
</label>
<label>
    [wcpw-step-input name="Checkbox options{}" type="checkbox" value="Two"]
    Checkbox options
</label>

<label>
    Multi-select
    [wcpw-step-input name="Select options{}" type="select" values="One|Two|Three|Four"]
</label>

How to store these inputs data

These custom fields data will be always presented in the PDF file created by the wizard. But to keep them for the WooCommerce cart items enable creating of the combined product kits.