The WooCommerce Products Wizard - Composite product builder plugin adds an augmented value to your e-shop by offering your customers a flexible and easy-to-use method to navigate in your store and buy a variety of products separately or in a composite kit.
If you sell products:
then the WooCommerce Products Wizard - Composite product builder plugin is for you!
Actually the WooCommerce Products Wizard - Composite product builder plugin creates a wizard that guides your customers step by step in your store offering:
You can create as many wizards as you wish in your store - each of them with its own settings.
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.
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.
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.
In each wizard, there are the following sections: Steps, Behavior, Cart, Kit, Thumbnail, Layout - General settings, Steps - General settings, Strings - General settings, Control buttons' settings, Result, and Filter.
Changes in the settings of a wizard affect only the current one.
There are
predefined values in the
settings of each section.
The functionality of each section in short:
In the following paragraphs each of these settings is presented in detail.
In this section you create the steps of the wizard, along with the rules of each individual step. You can also change the order of the steps by drag and drop.
To create a new step just click the «Add step» button.
By using the «Set the default cart content from your session» option you can create a wizard which contains a predefined set of products as soon as the wizard starts. This option can be used after you finished your wizard and added to it its final functionality.
Run your wizard and walk through it. In each step add the products you want from this step. When you finish, click the «Set default cart» button. Then, each time you lunch the wizard, these products will be shown in each step by using the default navigation (i.e. by just clicking the Next Button). This setting might be helpful in case you want to promote several products from your store.
To reset this selection click the «Reset default cart» button.
By clicking the «Setting» button of each step, you can define the settings for this specific step. If you do not specify any settings in a step, then the predefined settings of the wizard are applied.
The options you can set in the Settings section of each step come in several groups.
The «Title» option defines the title of the step.
The «Thumbnail» option defines a thumbnail which is shown in the navigation tab of the step. This works only with the Step-by-Step behavior.
In the «Top and bottom description» areas you can add a text for your customers before and after the products' area of this step.
In the description area you can also add custom fields to collect extra
data from your customers using the special shortcode, as [wcpw-step-input name="My custom filed"].
It allows to create such inputs as text, checkbox, radio, text area, select, file, and so on.
The "name" attribute is required for correct work of the shortcode. You can also pass any other attributes you need the same way. All of them will be passed into the input tag.
For the "select" tag type use the "values" attribute to list the options, delimited by a "|" symbol.
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.
Specifically, field types: "button", "image", "reset", "submit" are not supported.
Keep in mind you can get these custom fields' data only in the PDF file created by the wizard or a combined kit.
The «Handle description with auto tags» option preserves the HTML-tags in the text and shows the text HTML-formatted.
This is the part of the step that fetches products for this step. There are many sources to use: Product Categories/Product attributes/(Included/Excluded) Individual products.
In the «Categories» settings, select the categories of the products you want to present in this step.
In the «Attributes» setting, use product attribute values to fetch products. By using a combination of these 2 options you can better filter the products you present in this step.
The «Included products» setting allows you to fetch
the specific products you
define here.
Mind that this setting overwrites the «Categories»
setting, because the
products of this
step must fulfill both conditions: they have to be in the selected
category AND in the included
products.
If you leave both the above settings empty, then a blank step, containing only the description and the custom fields you possibly added, will be shown to the customer.
The «Excluded products» setting allows you to remove from this step the products you type here. They are excluded from the products fetched either by the Category / Attributes / Included product setting.
The «Availability rules» are a complex setting that controls the appearance of this step within the wizard, depending on the product your customers selected in previous steps.
To define an Availability rule, click the relevant button. In the modal window that appears select the «Source» of the products, by choosing between a specific Product, a Product variation, a Product attribute, a Product category, or a Custom field value.
The next option of the Availability rule depends on the Source selection. So, the next setting changes accordingly to: Products/Categories/Attribute values/Custom field, where you type there the names of the products (either names or IDs)/product variables (either names or IDs), categories, attributes, separated by a comma.
Both the two next options control the visibility of this step within the wizard.
The «Condition» option of each rule controls the visibility of this step according to the products already in the cart. If you select the "In cart" value then this step will be visible only if the products you defined in this rule are in the cart, that is your customer has already selected them in any of the previous steps. If you set "Not in cart" then this step will only be visible if none of the products is selected in any of the previous steps.
In the «Relation within the items» option if you select the "AND" value then this step will be visible only if the products you defined in this rule are all in the cart. If you select the OR option, then this step will be visible if even one of the products you define here is selected in previous steps.
The next setting controls when this step will be active.
You can set the relationship of the rule with the next rule option to control when this step will be active to navigate to it. If you set the "OR" value then this step will be active from the beginning of the wizard, no matter the end-user navigated to its previous ones, while the "AND" value forces this step to be active only after the end-user visited its previous one.
The number of Availability rules in each step is unlimited.
The «Order» and «Order by» options define the sorting order of the products. A number of options are available in the Order by setting: ID, Name, Author, Date, Modified, Rand, Comment count, Menu order, Included products, Price.
The «Enable 'Order by' dropdown» option shows the typical WooCommerce dropdown menu for the products' order.
The «Products per page» option sets the quantity of the products per page.
The «Products per page» option defines the number of products shown on a page. This setting creates a dropdown box in which your customer can select the number of products he wants to see in on single page. To create the values of the dropdown box use the + button to add different lines, each one for a single value of the dropdown box, and type a numeric value in each line.
The «Hide the product selection icon» option hides the radio/checkbox icon on each product. If you enable this option, then the only way to select a product is the use of the individual controls of each product.
The «Add to cart by quantity» option is also available. When this option is set, then all products having a quantity more than zero are added to the cart. When this option is selected the product selection icon is hidden. The products' quantity is still visible. The «Sold individually» setting shouldn't be enabled if this option is checked.
The «Don't add to main cart» option does not allow any product of this step to be to the cart.
The «Don't add specific products to cart» option excludes the products you specify from the cart. The products will be visible in the wizard but they could not be added to the cart.
The «Select more than one products» option allows your customers to select more than one product in this step. If this option is checked, the radio buttons of the products are replaced by checkboxes.
The «Select more than one variation per product» option changes the variable product's behavior. In conjunction with the "Can select several products" option it doesn't replace another variation of the same product while adding it to the cart.
The «Sold individually» option shows/hides the quantity setting input of a product.
The «Selected products by default» option define the products that are selected by default when entering this step. Also by this option you can define specific product variations as checked.
Also, you can set the «All products selected by default» option for a step.
The «No selected products by default» option overwrites the two previous ones.
The «Default product quantity» option sets the initial products' quantity for this step. This option works with the «Sold individually» option. When the customer enters this step, and the «Sold individually» option is enabled, the product quantity defined here will be set to each product of the step.
The «Minimum products selected» option indicates the number of products that must be selected in this step so that the customer will be able to move to the next one.
The «Maximum products selected» option indicates the number of the products that have to be selected so that the customer will be able to move to the next step.
The «Minimum product quantity» option sets the minimum product quantity input value for this step. This option works without the «Sold individually» option.
The «Maximum product quantity» option sets the maximum product quantity input value for this step. This option works without the «Sold individually» option.
If these two settings have equal values then the quantity will be hidden.
The «Minimum total products' quantity» option defines the minimum sum of the quantities of the products that have to be selected in order your customer to be able to go to the next step.
The «Maximum total products' quantity» option defines the maximum sum of the quantities of the products that have to be selected in order your customer to be able to go to the next step.
To use other steps' products, in the option's value, type the IDs of the desired steps separated by a comma. These IDs can be found in the "Steps" settings group, before the titles of the steps list.
The lower settings allow to add individual cart controls to each product. By default each such action makes a server request and blocks the wizard activity. In case you want the customer have a possibility to products to cart without waiting these requests are done use the «Make nonblocking requests» setting.
The «Enable "Add to cart" button» option enables/disables the "Add to cart" button on each product of this step.
The «Add to cart button behavior» option defines the action that is fired after a product is added to the cart.
The «Add to cart button text» option defines the text on the "Add to cart" button of this step.
The «Add to cart button class» option is also available. Predefined classes from Bootstrap framework such as: btn-primary btn-sm, can be used. Also, there is a set of predefined classes that control the buttons and the icons appearance:
The «Enable "Update" button» option shows the Edit button in the wizard.
The «Update button text» option defines the label of the Update button.
The «Update button class» option works similarly to the "Add to cart" button class.
The «Enable "Remove" button» option shows the Remove button.
The «Remove button text» option defines the label for the Remove button.
The «Remove button class» option works similarly to the "Add to cart" button class.
The «Hide Remove button» option hides the Remove button if it is set as enabled from the "Control General settings".
The «Hide Edit button» option hides the Edit button if it is set from the "Control General settings".
This group sets the options for the presentation of the products of this step.
The «Template» setting defines the layout of the products of the current step. There are several options there: list, table, masonry, grid.
The templates of these steps are based on the php-files found in the
plugin_directory/views/form/layouts and
theme_directory/woocommerce-products-wizard/form/layouts
folders.
The «Grid column size» option works with the Grid template formats the "grid" template and is ignored by the others. It is a responsive template that fits in different screen sizes. It is based on a 12-columns system, accordingly the value of each cell is a ratio of 12. For example, if you want your products in three columns the value should be 4 (is 12/3).
The «Set the Grid column size after the sidebar is shown» option is the same as the «Grid column size» but then the sidebar is visible.
The «Product template» setting changes the view of
the products in the current step.
The available options (type-1 to type-8) are formed in the php-files
found in the
plugin_directory/views/form/item and
theme_directory/woocommerce-products-wizard/form/item
folders.
The «Merge thumbnail with gallery» option removes the galleries from the products and shows only the gallery images in thumbnails, formatted as a carousel.
The «Gallery column size» option is similar to the «Grid column size» of the product's gallery grid.
The «Variation template» option changes the layout of the variable products options list.
The «Enable title link» option wraps the product titles by their links and opens the product page in a new tab.
Moreover, there are some more options that let you have full control over the visibility of the elements of a product.
Specifically, you can check to show the options:
The «Product description source» option defines the source for the description of the products presented in the specific step. Available options are: product description, product short description, or nothing.
For the thumbnails you can set the «Product thumbnail size» option. It might be one of the already registered sizes you can find by clicking the "More" setting, or a pair of integers separated by a comma, e.g. "50,50".
The «Filters» group adds filters for the products of the step. You can add any number of filters.
This is possible to use the the same filters for a few different steps. This way the applied filters will be the same for all of these steps. Do to this define a step number for the «use filters from another step» setting.
To create a filter, first select one of the predefined sources and then one of the suggested views.
You can select the "range" view for a product attribute, but keep in mind it works well with numeric attribute values only.
Each filter is entitled automatically. You are free to change its name. This is the label of the filter the end-user sees.
It is possible to include/exclude specific values for the filters, such as categories, tags and attributes To do so, type the IDs of the terms you wish separated by a comma.
Similarly, you can define «Default selected filter values». If you use this option, the products of the selected option of the filter will appear by entering this step.
Also, you can set some «Default values» of products in advance, before your customer uses the filter.
The «Filter position» option defines the position of the filter. The filter can be either: on the right / before the products / or in the sidebar. Keep in mind that the sidebar filter works only with the tabs mode.
The «Expand filter by default» option is used when you want to have the filter opened when the step is shown.
For the image-based filters you can set the «Thumbnail size» option. It might be one of the already registered sizes you can find by clicking the "More" setting, or a pair of integers separated by a comma, e.g. "50,50".
The «Work mode» is the setting that defines the main wizard's view and behavior. The available options are:
«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.
The «Nav 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.
The «Check Availability rules» option enables/disables ALL Availability rules everywhere in the wizard.
The «Strict cart workflow» option removes all products from the steps after the active one. This option might be helpful if you have complicated Availability rules for products.
The default behavior of the wizard is to remove the products from the steps after the active one. To avoid this, disable the «Strict cart workflow» setting of the «Behavior» section.
The «Scrolling on top of the page on navigation» option scrolls on the top of the page on every click of the navigation buttons.
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).
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".
If you decide to show the names of the steps you can «Use them in the widget during its navigation».
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.
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. If the base product is a variable one, then you need to set every value on the attribute variations, 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 overwrites the base kit price and the prices of every product in the wizard.
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.
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 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.
You can upload images in the areas of the canvas e.g, a custom logo or photo.
Use the area name as the "name" attribute of the [wcpw-step-input type="file"] shortcode in order to place the uploaded image in the correct place.
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 show 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.
By the «Nav template» option you can choose the style of the navigation tabs. Available values here: tabs, pills, buttons, line, line-horizontal, or none.
The «Sticky nav» option controls if the navigation bar will be sticky.
The «Sticky nav top-offset» sets the gap between the sticky navigation bar and the previous element on the screen.
The «Show sidebar» option controls the appearance of the sidebar of the wizard.
The «Sidebar position» option allows you to place the sidebar left / right or on top.
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 and the screen.
You can «Show/hide the header and footer» of the wizard.
It is also possible to turn on/off a «Sticky header/footer» of the wizard.
The «Sticky header offset top» tunes the gap between the top of the screen and the sticky header.
The «Show steps names» options show the step names on one-screen modes.
The «Show step names» options show the step names on one-screen modes. For the "single" and "sequence" modes you can also show the steps' names.
The «Table layout strings» option defines the captions of the "layout" view.
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.
If there is no attached PDF file in the email, add the [wcpw-result-pdf]
shortcode in the «File attachments» field.
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 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 allow setting the labels of the strings through the wizard. Their usage is straightforward.
The Control buttons General setting defines several options on the Navigation Control buttons.
The main feature of these Control buttons is they may have different classes for their styling and behavior. As the main stylesheet of this plugin is based on the Bootstrap 5 framework you can use any of the available styling classes for Buttons and display utility classes.
Also, there are a few classes that control the buttons' text and icons' appearance:
If you wish to modify the default PDF template make a copy of views/result-pdf.php
file to your active theme (or child theme) directory to
woocommerce-products-wizard/result-pdf.php
Check the «Templates Customization» section for more info.
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.
The Filter General settings define the filters' string labels throughout the wizard.
«Availability rules» is a unified and complex setting to control the product appearance in the wizard. The source of a rule might be a product, product variation, product attribute, product category, or custom input value.
There are two possible conditions for a rule: «in cart» and «not in the cart». So this is possible to check if a product, category, or custom field is added or not added to the cart to show the product.
This is possible to choose a few products, attributes, or categories per one rule. There is a setting to control the relation within the items. The rule can be met when all or any of these items are in or not in the cart.
For using the product attribute select it at first in the dropdown field and define attribute values terms IDs (not slugs) separated by a comma in the next text input. Here is how you can find them. Alternatively, you can use a tiny plugin to see these IDs.
Moreover, there is a setting to control the relationship of the rule with the next rule, namely any of the rules should be met or few at once.
You can also set Availability rules for each variation of a variable product.
«Variation template» setting change layout of the variable product options list above category settings.
You can add a «Discount» to the product bought using a wizard. Possible values are:
This is possible to «Attach a wizard to the product» to make it works as a usual composite product.
«Attached wizard place» allows to output the wizard:
Set the «Separate tab title» if you need it.
You can use a special feature to intercept the added-to-cart product and continue the workflow in a wizard on another page immediately.
First of all, select a value of the «Redirect to the wizard on add to cart event» setting.
Secondly, define a «Redirect link» which will be opened after adding to cart event for this product.
Set a «Wizard's step ID» in which the product should be added. If you want the product will be out of any step then set it to any out of steps IDs value.
This is also possible to define the «active step ID after the redirect» via the setting.
«Generate thumbnail areas data» is used to replace generated thumbnail areas with specific images then the product is in the cart. It's necessary to define the area name to be used and the image for pasting. It's also possible to set the «Availability rules» to apply the image to an area. The number of these rules is unlimited.
You can also set the areas data of each variation of a variable product.
More info about the thumbnail generation is here.
«Availability rules» is a unified and complex setting to control category products' appearance in the wizard. The source of a rule might be a product, product variation, product attribute, product category, or custom input value.
There are two possible conditions for a rule: «in cart» and «not in the cart». So this is possible to check if a product, attribute, category, or custom field is added or not added to the cart to show the category products.
This is possible to choose a few products, attributes, or categories per one rule. There is a setting to control the relation within the items. The rule can be met when all or any of these items are in or not in the cart.
For using the product attribute select it at first in the dropdown field and define attribute values terms IDs (not slugs) separated by a comma in the next text input. Here is how you can find them. Alternatively, you can use a tiny plugin to see these IDs.
Moreover, there is a setting to control the relationship of the rule with the next rule, namely any of the rules should be met or few at once.
You can add a «Discount» to the category products bought using a wizard. Possible values are:
This is possible to «Attach a wizard to the product» to make it works as a usual composite product.
«Attached wizard place» allows to output the wizard:
Set the «Separate tab title» if you need it.
You can use a special feature to intercept the added-to-cart product and continue the workflow in a wizard on another page immediately.
First of all, select a value of the «Redirect to the wizard on add to cart event» setting.
Secondly, define a «Redirect link» which will be opened after adding to cart event for this category.
Set a «Wizard's step ID» in which the product should be added. If you want the product will be out of any step then set it to any out of steps IDs value.
This is also possible to define the «active step ID after the redirect» via the setting.
«Generate thumbnail areas data» is used to replace generated thumbnail areas with specific images then any product of the category is in the cart. It's necessary to define the area name to be used and the image for pasting. It's also possible to set the «Availability rules» to apply the image to an area. The number of these rules is unlimited.
More info about the thumbnail generation is here.
You choose the styles that will be included in the plugin.
If for some reason you need to disable some of the plugin's scripts, change «Scripts including type» setting to «Multiple files» and de-select them in the list lower.
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.
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.
In case your styles are not shown correctly, disable the «Minify custom styles» setting. 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. The «Advanced mode» allows you to change a great
range of variables, but it
requires CSS
knowledge.
All the variables of the plugin are available to be changed
by using a text
editor.
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.
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.
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.
What shortcodes are available for using in the plugin:
[woocommerce-products-wizard] - the main shortcode to output the wizard section. Requires the id attribute;[wcpw-result-pdf-page-number] - outputs a current page number of the results PDF file;[wcpw-result-pdf-page-total] - outputs total pages number of the results PDF file;[wcpw-result-pdf-new-page] - outputs a new page in the results PDF file;[wcpw-step-input] - special shortcode to output a custom step input field. Get more info from the step settings section;[wcpw-generated-thumbnail-url] - image URL of the wizard generated thumbnail.[wcpw-cart-total-price] - special shortcode to output the current wizard total price within the widget toggle button.Some server configurations might have problems with the current session storing. Mostly the «Store session in the DB» setting fixes this problem.
Much probably you’re using a caching plugin on your site which makes page content freeze and the wizard output also. In this case, tick the «Send current state hash via AJAX» global setting to change the page URL for each wizard’s state. Mostly, that will help to solve the problem.
There are two ways to achieve this. Both of them have their own pros and cons.
This is possible to do. Select a ContactForm7 for use on the results step of the wizard. The email will have an attached PDF file of the user selection.
This is possible using the unified «Availability rules» setting for steps, categories, products, or variations.
Install any good lightbox plugin which supports AJAX actions. For example, «Responsive Lightbox & Gallery»
Yep! Here is a free super helpful plugin to do the trick:
Sometimes you need to get some custom data by your customers, e.g. custom text, number, file, and so on. There are a couple of different ways to achieve this.
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 second way is to add custom fields to the steps of the Woocommerce Products Wizard plugin. Take a look at the Description settings.
You have two options here:
In order to add the data of such date-fields in the cart with the typical
WooCommerce checkout, combine
the products of the wizard into a kit.
If you get your orders in a PDF file in your email, by using a ContactForm7 form, the custom data will be enclosed in the PDF file.
| Action | Description |
|---|---|
do_action('wcpw_init', $this) |
The plugin is init |
do_action('wcpw_step_settings_form', $this,
$args) |
Before step settings form HTML in the admin part |
do_action('wcpw_get_cart', $wizardId, $args)
|
Before cart get |
do_action('wcpw_before_add_to_cart', $wizardId,
$cartItemKey,
$cartItem) |
Before item is added to cart |
do_action('wcpw_after_add_to_cart', $wizardId,
$cartItemKey, $cartItem)
|
After item is added to cart |
do_action('wcpw_before_remove_by_product_id',
$wizardId, $productId,
$stepId)
|
Before removing a product from cart by ID |
do_action('wcpw_after_remove_by_product_id',
$wizardId, $productId,
$stepId)
|
After removing a product from cart by ID |
do_action('wcpw_before_remove_by_variation',
$wizardId, $variationId,
$variation,
$stepId) |
Before removing product from cart by variation |
do_action('wcpw_after_remove_by_variation', $wizardId,
$variationId,
$variation,
$stepId) |
After removing product from cart by variation |
do_action('wcpw_before_remove_by_product_key',
$wizardId, $key) |
Before removing a product from cart by key |
do_action('wcpw_after_remove_by_product_key',
$wizardId, $key) |
After removing a product from cart by key |
do_action('wcpw_before_remove_by_step_id', $wizardId,
$stepId) |
Before removing an item from cart by step ID |
do_action('wcpw_after_remove_by_step_id', $wizardId,
$stepId) |
After removing an item from cart by step ID |
do_action('wcpw_before_truncate', $wizardId)
|
Before truncating of the cart |
do_action('wcpw_after_truncate', $wizardId)
|
After truncating of the cart |
do_action('wcpw_before_output', $args) |
Before wizard's output via shortcode, view or PDF |
do_action('wcpw_dompdf_options', $options,
$args) |
DomPDF options instance |
do_action('wcpw_dompdf_instance', $dompdf,
$args) |
DomPDF instance |
do_action('wcpw_after_output', $args) |
After wizard's output via shortcode, view or PDF |
do_action('wcpw_before_submit_form', $args)
|
Before main form submit |
do_action('wcpw_after_submit_form', $args) |
After main form submit |
do_action('wcpw_before_get_form', $args) |
Before main form get |
do_action('wcpw_after_get_form', $args) |
After main form get |
do_action('wcpw_before_skip_form', $args) |
Before main form skip |
do_action('wcpw_after_skip_form', $args) |
After main form skip |
do_action('wcpw_before_skip_all', $args) |
Before main form "skip all" |
do_action('wcpw_after_skip_all', $args) |
After main form "skip all" |
do_action('wcpw_before_submit_and_skip_all',
$args) |
Before main form "submit and skip all" |
do_action('wcpw_after_submit_and_skip_all',
$args) |
After main form "submit and skip all" |
do_action('wcpw_before_reset_form', $args) |
Before main form reset |
do_action('wcpw_after_reset_form', $args) |
After main form reset |
do_action('wcpw_before_add_cart_product',
$args) |
Before add product to cart |
do_action('wcpw_before_remove_cart_product',
$args) |
Before removing a product from cart |
do_action('wcpw_before_update_cart_product',
$args) |
Before update product in cart |
do_action('wcpw_before_add_all_to_main_cart',
$wizardId, $cart) |
Before passing the products to Woocommerce cart |
do_action('wcpw_after_add_all_to_main_cart',
$wizardId, $cart,
$productsAdded)
|
After passing the products to Woocommerce cart |
do_action('wcpw_before_add_to_main_cart',
$args) |
Before passing the product to Woocommerce cart |
| Action | Description |
|---|---|
apply_filters('wcpw_post_type_args', $args);
|
Wizard post type arguments |
apply_filters('wcpw_custom_styles_variables',
$customVariables); |
Style custom variables array for overwriting and compiling |
apply_filters('wcpw_scss_variables_string',
$output); |
The string of the _variables.scss file of the front part |
apply_filters('wcpw_custom_styles_scss_string',
$scssString); |
Custom SCSS string to compile |
apply_filters('wcpw_default_cart_content',
$defaultCartContent, $wizardId,
$args); |
Getting default cart content |
apply_filters('wcpw_cart', $cart, $wizardId,
$args); |
Getting cart content |
apply_filters('wcpw_cart_step_data', $item, $wizardId,
$key); |
Getting cart step data item |
apply_filters('wcpw_cart_step_data_image_attributes',
$attributes, $wizardId,
$item,
$key); |
Image attributes of a cart step data item |
apply_filters('wcpw_cart_products_and_variations_ids',
$output, $wizardId,
$args); |
Getting products and variations IDs from the cart |
apply_filters('wcpw_cart_categories_ids', $output,
$wizardId, $args);
|
Getting categories IDs from the cart |
apply_filters('wcpw_cart_attribute_values', $output,
$wizardId, $attribute,
$args); |
Getting product attribute values IDs from the cart |
apply_filters('wcpw_cart_by_step_id', $output,
$wizardId, $stepId);
|
Getting cart content by step ID |
apply_filters('wcpw_cart_item_by_key', $output,
$wizardId, $key); |
Getting cart item by key |
apply_filters('wcpw_cart_product_by_id', $output,
$wizardId, $productId,
$stepId); |
Getting a product from cart by ID and optionally by step ID |
apply_filters('wcpw_cart_product_meta', $output,
$cartItem); |
Cart product meta data string |
apply_filters('wcpw_cart_step_data_by_key', $output,
$wizardId, $key,
$stepId);
|
Getting a custom field from cart by key and optionally by step ID |
apply_filters('wcpw_add_to_cart_item', $cartItem,
$wizardId,
self::$sessionKey);
|
Product data for adding to cart |
apply_filters('wcpw_cart_total', $output,
$wizardId); |
Getting cart total amount |
apply_filters('wcpw_cart_total_price', $output,
$wizardId); |
Getting cart total formatted price |
apply_filters('wcpw_cart_item_price', $output, $item,
$args); |
Getting cart item price |
apply_filters('wcpw_cart_item_discounted_price',
$output, $item,
$args);
|
Getting cart item discounted price according the rules |
apply_filters('wcpw_cart_item_final_price', $output,
$item, $args);
|
Getting cart item final handled price |
apply_filters('wcpw_cart_kit_child_value_parts',
$value, $cartItem $wizardId,
$args); |
Combined kit child value string parts |
apply_filters('wcpw_cart_kit_child_display', $display,
$cartItem $wizardId,
$args); |
Combined kit child displayed value string parts |
apply_filters('wcpw_kit_child_data', $array);
|
Combined kit child meta data |
apply_filters('wcpw_sub_terms', $output, $termId,
$taxonomy); |
Child terms of a term array |
apply_filters('wcpw_price_limits', $output, $wizardId,
$stepId); |
Min/max prices of products for a step |
apply_filters('wcpw_send_json_data', $data);
|
Sending JSON response data |
apply_filters('wcpw_availability_by_rules', $output,
$wizardId, $rules,
$itemId)
|
Availability result by rules |
apply_filters('wcpw_result_pdf_instance', $dompdf,
$args); |
DomPDF instance of wizard |
apply_filters('wcpw_result_pdf_file_name', $output,
$args); |
DomPDF file name |
apply_filters('wcpw_result_pdf_file', $array,
$args); |
DomPDf file data array |
apply_filters('wcpw_form_ajax_actions',
$ajaxActions); |
Pairs of JS action and PHP handles for AJAX |
apply_filters('wcpw_step_quantities_rule', (int)
$output, $wizardId,
$rule);
|
Some of step's products quantity rules |
apply_filters('wcpw_submit_form_step_data_file_path',
$path, $stepId,
$inputName,
$args); |
File path to upload a step file |
apply_filters('wcpw_submit_form_item_data', $data,
$args); |
Add item to cart data from the main form submit event |
apply_filters('wcpw_prevent_final_redirect', false,
$postData); |
Prevents the final redirect |
apply_filters('wcpw_steps_ids', $stepsIds,
$wizardId); |
Prepared form steps IDs array |
apply_filters('wcpw_steps', $steps, $wizardId);
|
Prepared form steps array |
apply_filters('wcpw_step', $output, $wizardId,
$stepId); |
Step data array |
apply_filters('wcpw_active_step_id', $output,
$wizardId); |
Active step ID |
apply_filters('wcpw_active_step', $activeStep,
$wizardId); |
Active step array |
apply_filters('wcpw_pagination_args', $paginationArgs,
$args); |
Step pagination arguments |
apply_filters('wcpw_pagination_items', $output,
$args); |
Step pagination items array |
apply_filters('wcpw_nav_items', $output,
$wizardId); |
Steps navigation items array |
apply_filters('wcpw_filter_fields', $output,
$wizardId, $stepId,
$appliedFilters); |
Step filters array |
apply_filters('wcpw_redirect_to_wizard_link', $link,
$wizardId, $cartItemKey,
$productData); |
Redirect link to a wizard after add to cart action |
apply_filters('wcpw_redirect_to_wizard_product_data',
$productData, $wizardId,
$cartItemKey); |
Product data of a wizard after add to cart action (before redirect) |
apply_filters('wcpw_variation_arguments', $output,
$arguments); |
Product variations data |
apply_filters('wcpw_products_request_args', $output,
$productsIds,
$filter);
|
Products request args of a step |
apply_filters('wcpw_add_all_to_main_cart_items',
$cart, $wizardId);
|
Items on a passing to Woocommerce cart |
apply_filters('wcpw_kit_id', date('d-m-Y H:i:s'),
$wizardId, $cart);
|
ID of the kit on a passing to Woocommerce cart |
apply_filters('wcpw_kit_title',
get_the_title($wizardId), $wizardId,
$cart);
|
Title of the kit on a passing to Woocommerce cart |
apply_filters('wcpw_kit_base_product_data',
$productData, $wizardId,
$cart);
|
Data of the admin defined base kit product |
apply_filters('wcpw_main_cart_product_data',
$productData, $wizardId,
$cartItem);
|
Add products to main cart loop item data |
apply_filters('wcpw_merge_cart_quantity', false,
$args)); |
Is necessary to merge the same product quantity in Woocommerce cart |
apply_filters('wcpw_step_products_query_args',
$queryArgs, $wizardId, $stepId,
$filter); |
Step products request query array |
apply_filters('wcpw_product_availability',
$isAvailable, $productId,
$wizardId,
$stepId,
$args); |
Product availability in the wizard value |
apply_filters('wcpw_step_products_ids', $productsIds,
$wizardId, $stepId,
$args);
|
Array of products IDs of a step |
apply_filters('wcpw_settings_models', $models);
|
Get all settings models array |
apply_filters('wcpw_global_settings_model',
$global); |
Array of the plugin global settings model |
apply_filters('wcpw_post_settings_model',
$post); |
Array of a wizard post settings model |
apply_filters('wcpw_step_settings_model',
$step); |
Array of a wizard step settings model |
apply_filters('wcpw_product_settings_model',
$product); |
Array of a product settings model |
apply_filters('wcpw_product_variation_settings_model',
$productVariation);
|
Array of a product variation settings model |
apply_filters('wcpw_product_category_settings_model',
$productCategory);
|
Array of a product category settings model |
apply_filters('wcpw_product_attribute_settings_model',
$productAttribute);
|
Array of a product attribute settings model |
apply_filters('wcpw_global_setting', $value
$setting); |
Get one global setting value |
apply_filters('wcpw_post_setting', $value, $id,
$setting,
$modelSource);
|
Get one wizard's setting value |
apply_filters('wcpw_post_settings', $output, $id,
$args); |
Get all wizard's settings values |
apply_filters('wcpw_steps_ids_setting', $output,
$wizardId); |
Wizard's steps IDs array from DB |
apply_filters('wcpw_step_settings', $output,
$wizardId, $args); |
Get all step setting values |
apply_filters('wcpw_step_setting', $value, $wizardId,
$stepId,
$setting); |
Get one step setting value |
apply_filters('wcpw_step_settings', $output,
$wizardId, $args); |
Get one step settings array |
apply_filters('wcpw_product_category_setting', $value,
$id, $setting);
|
Get one product category setting value |
apply_filters('wcpw_is_sidebar_showed', $show,
$wizardId); |
Is sidebar showed state |
apply_filters('wcpw_final_redirect_url', $url,
$wizardId); |
Getting the final redirect URL |
apply_filters('wcpw_filter_sources_list',
$output); |
Step filter sources array |
apply_filters('wcpw_minimum_products_selected_message',
$message, $wizardId,
$limit,
$value); |
Minimum products selected error message |
apply_filters('wcpw_maximum_products_selected_message',
$message, $wizardId,
$limit,
$value); |
Maximum products selected error message |
apply_filters('wcpw_minimum_products_price_message',
$message, $wizardId,
$limit,
$value); |
Minimum products price error message |
apply_filters('wcpw_maximum_products_price_message',
$message, $wizardId,
$limit,
$value); |
Maximum products price error message |
apply_filters('wcpw_form_template_name', $template,
$wizardId,
$stepId); |
Form step current template name |
apply_filters('wcpw_form_templates',
$templates); |
Available form step templates |
apply_filters('wcpw_form_item_templates',
$templates); |
Available form item templates |
apply_filters('wcpw_variations_type_templates',
$templates); |
Available form item variation templates |
apply_filters('wcpw_form_item_template_name',
$template, $wizardId,
$stepId);
|
Form item current template name |
apply_filters('wcpw_nav_list_templates',
$templates); |
Available steps navigation templates |
apply_filters('wcpw_template_html_path', $path, $name,
$arguments,
$settings);
|
Requested template path |
apply_filters('wcpw_step_input_short_code_unsupported_types',
$unsupportedTypes); |
List of unsupported step input types using the short-code |
apply_filters('wcpw_step_input_html', $output,
$attributes); |
Ready to use step input HTML |
apply_filters('wcpw_filter_args_to_query', $output,
$data); |
WP_Query ready filter arguments |
apply_filters('wcpw_cart_item_generated_thumbnail_attributes',
$attributes,
$itemData) |
Cart product generated thumbnail image attributes filter |
apply_filters('wcpw_cart_item_generated_thumbnail',
$output, $itemData)
|
Cart product generated thumbnail image filter |
apply_filters('wcpw_generated_thumbnail_cart_areas',
$cartAreas, $wizardId,
$cart)
|
Collected cart areas for thumbnail generation |
apply_filters('wcpw_generated_thumbnail_data',
$output, $wizardId,
$cart) |
Generated thumbnail URL and path |
apply_filters('wcpw_order_item_generated_thumbnail_attributes',
$attributes,
$itemData) |
Order item generated thumbnail image attributes in the admin part |
apply_filters('wcpw_order_item_generated_thumbnail',
$output,
$itemData)
|
Order item generated thumbnail image in the admin part |
apply_filters('wcpw_result_item_thumbnail',
$thumbnail, $cartItem,
$cartItemKey) |
Results table product thumbnail image filter |
apply_filters('wcpw_widget_item_thumbnail',
$thumbnail, $cartItem,
$cartItemKey) |
Widget product thumbnail image filter |
apply_filters('wcpw_widget_generated_thumbnail_attributes',
$attributes,
$wizardId,
$cart) |
Widget generated thumbnail image attributes |
If you want to use custom fields as filters for your products then you need to use two hooks. The first one is used to add filter instances. They are arrays with keys within, namely:
The second hook is to handle the values that passed as WP_Query arguments.
Here is an example of using YITH brands taxonomy as a product filter within the #123 wizard for the 1rst and 2nd step:
<?php
// add custom filters to output on the front part
add_filter('wcpw_filter_fields', function ($output, $wizardId, $stepId, $appliedFilters) {
// add only for specific wizard ID and steps IDs
if ($wizardId == 123 && in_array($stepId, [1, 2])) {
$label = 'Brands'; // filter name
$view = 'checkbox'; // required view
$key = 'yith_product_brand'; // taxonomy to use
$values = [];
// collect terms as values
$terms = get_terms(['taxonomy' => $key]);
foreach ($terms as $term) {
$values[] = [
'id' => $term->term_id,
'name' => $term->name,
'isActive' => isset($appliedFilters[$key]) && in_array($term->term_id, $appliedFilters[$key])
];
}
$output[] = [
'label' => $label,
'key' => $key,
'view' => $view,
'value' => isset($appliedFilters[$key]) ? $appliedFilters[$key] : null,
'values' => $values
];
}
if ($wizardId == 321 && in_array($stepId, [4, 5])) {
// other filters here...
}
return $output;
}, 10, 4);
// handle passed filters to query args
add_filter('wcpw_filter_args_to_query', function ($output, $filters) {
foreach ($filters as $filter) {
foreach ($filter as $key => $value) {
// add query arg by the custom taxonomy
if ($key == 'yith_product_brand' && !empty(array_filter($value)) {
$output['tax_query'][] = [
'taxonomy' => $key,
'field' => 'id',
'terms' => array_filter($value),
'operator' => 'IN'
];
}
// other filters here...
}
}
return $output;
}, 10, 2);
?>
If you need to make some products available only in the Woocommerce Products Wizard wizards, the code below can help you. This code adds an extra checkbox on the "Inventory" product tab. If this checkbox is ticked then this product will be hidden from the e-shop. Add this extra code to the functions.php file of your theme.
<?php
// add extra field
add_action('woocommerce_product_options_stock_status', function () {
woocommerce_wp_checkbox(array(
'id' => '_is_hidden_product',
'wrapper_class' => 'show_if_simple show_if_variable',
'label' => 'Hide Product From Shop'
));
});
// save post
add_action('woocommerce_admin_process_product_object', function ($product) {
if (isset($_POST['_is_hidden_product'])) {
$product->update_meta_data('_is_hidden_product', 'yes');
} else {
$product->delete_meta_data('_is_hidden_product');
}
});
// modify the query
add_action('woocommerce_product_query', function ($query) {
$meta_query = $query->get('meta_query');
$meta_query[] = array('key' => '_is_hidden_product', 'compare' => 'NOT EXISTS');
$query->set('meta_query', $meta_query);
});
add_action('woocommerce_shortcode_products_query', function ($query) {
$query['meta_query'][] = array('key' => '_is_hidden_product', 'compare' => 'NOT EXISTS');
return $query;
});
// disable cart table permalink
add_action('woocommerce_cart_item_permalink', function ($permalink, $cartItem) {
$permalink = !filter_var(get_post_meta($cartItem['product_id'], '_is_hidden_product', true));
return $permalink;
}, 10, 2);
// disable order details table permalink
add_action('woocommerce_order_item_permalink', function ($permalink, $item) {
if (!$item instanceof \WC_Order_Item_Product) {
return $permalink;
}
$product = $item->get_product();
if (!$product) {
return $permalink;
}
return !filter_var(get_post_meta($product->get_id(), '_is_hidden_product', true));
}, 10, 2);
?>
If the products that are fetched from your wizard already have a discount, and you don't want coupons reduce their price further, add this extra code to the functions.php file of your theme.
<?php
// skip wizard's discounted products for coupons
add_filter('woocommerce_coupon_get_discount_amount', function ($discount, $priceToDiscount, $object) {
if (isset($object['wcpw_id'])
&& (isset($object['wcpw_discount'])
|| isset($object['wcpw_category_discount'])
|| isset($object['wcpw_product_discount']))
) {
return 0;
}
return $discount;
}, 10, 3);
?>
The next code makes the «Price discount» setting dynamic
according to the current
selected products numbers in the wizard. Use the $rules
variable to define the
products number and its discount value as 4 => 10, namely 4 or
more products have
10% discount until the next met rule.
<?php
// dynamic discount value by the current cart count
add_filter('wcpw_post_setting', function ($value, $id, $setting) {
if ($setting != 'price_discount' || (is_admin() && !wp_doing_ajax())) {
return $value;
}
$cart = \WCProductsWizard\Cart::get($id);
$cartCount = 0;
$rules = [
1 => 0,
4 => 10,
10 => 20,
50 => 25
];
foreach ($cart as $item) {
if (!isset($item['quantity']) || !$item['quantity']) {
continue;
}
$cartCount += $item['quantity'];
}
if ($cartCount) {
foreach ($rules as $count => $discount) {
if ($cartCount >= $count) {
$value = $discount;
} else {
break;
}
}
}
return $value;
}, 10, 3);
?>
The next code makes the "Kit price" setting dynamic according to the currently selected product numbers per step. Each step with products has a default price which includes a defined products number. But then there are more products than this defined value each additional product adds an extra amount.
<?php
// dynamic kit price by the selected products number per step
add_filter('wcpw_post_setting', function ($value, $id, $setting) {
if ($setting != 'kit_price') {
return $value;
}
$cart = \WCProductsWizard\Cart::get($id);
$stepsQuantities = [];
foreach ($cart as $product) {
if (!isset($stepsQuantities[$product['step_id']])) {
$stepsQuantities[$product['step_id']] = 0;
}
$stepsQuantities[$product['step_id']] += $product['quantity'];
}
$total = 0;
$DEFAULT_PRICE_PER_STEP = 10; // default step price
$PRODUCTS_LIMIT_PER_STEP = 3; // maximum products number included to the default step price
$EXTRA_PRODUCTS_PRICE_PER_STEP = 2; // additional price per each product upper the limit
foreach ($stepsQuantities as $quantity) {
if (!$quantity) {
continue;
}
$total += $DEFAULT_PRICE_PER_STEP;
if ($quantity > $PRODUCTS_LIMIT_PER_STEP) {
$extraProductsQty = $quantity - $PRODUCTS_LIMIT_PER_STEP;
$total += $extraProductsQty * $EXTRA_PRODUCTS_PRICE_PER_STEP;
}
}
return $total;
}, 10, 3);
?>
| Action | Description |
|---|---|
jQuery(document).on('launched.wcpw', (e, instance) => {}); |
On wizard init |
jQuery(document).on('ajaxRequest.wcpw', (e, instance, formData, options) => {}); |
Before wizard AJAX query |
jQuery(document).on('ajaxPrevent.wcpw', (e, instance, formData, options) => {}); |
Wizard AJAX prevented |
jQuery(document).on('ajaxSuccess.wcpw', (e, instance, response, formData, options) => {}); |
On wizard AJAX query success |
jQuery(document).on('ajaxCompleted.wcpw', (e, instance, response, formData, options) => {}); |
On wizard AJAX query success and all processes are done |
jQuery(document).on('ajaxError.wcpw', (e, instance, response, formData, options) => {}); |
On wizard AJAX query error |
jQuery(document).on('addToMainCart.wcpw', (e, instance, data, result) => {}); |
On add to main cart |
jQuery(document).on('addToMainCartError.wcpw', (e, instance, data, response) => {}); |
Add to main cart error |
jQuery(document).on('addToMainCartRedirect.wcpw', (e, instance, data, response) => {}); |
On doing the final redirect |
jQuery(document).on('submit.wcpw', (e, instance, data) => {}); |
On form submit |
jQuery(document).on('submitError.wcpw', (e, instance, data) => {}); |
Form submit error |
Here is the list of some Javascript codes to change the wizard's behavior. There are many ways to add them to your site. You can use some plugins to add extra scripts, for example Simple Custom CSS and JS.
Also, some themes provides text fields for custom codes for using. Or you can add extra scripts right in theme's javascript files, but it's better to do only for the child themes because you can loose the changes you made while theme update.
// submit wizard on any product variation property change
jQuery(document).on('change', '[data-component~="wcpw-product-variations-item-input"]', function () {
jQuery(this).closest('[data-component~="wcpw"]').data('wcpw').submit();
});
// add product to cart on any variation property change
jQuery(document).on('change', '[data-component~="wcpw-product-variations-item-input"]', function () {
var $product = jQuery(this).closest('[data-component~="wcpw-product"]');
var $wcpw = $product.closest('[data-component~="wcpw"]');
$wcpw.data('wcpw').addCartProduct({productToAddKey: $product.data('step-id') + '-' + $product.data('id')});
});
// add/remove product in cart once it is chosen
jQuery(document).on('change', '[data-component~="wcpw-product-choose"]', function () {
var $input = jQuery(this);
var $wcpw = $input.closest('[data-component~="wcpw"]');
if ($input.attr('type') === 'checkbox') {
if ($input.prop('checked')) {
$wcpw.data('wcpw').addCartProduct({productToAddKey: $input.data('step-id') + '-' + $input.val()});
} else {
$wcpw.data('wcpw').removeCartProduct({
productCartKey: $input.closest('[data-component~="wcpw-product"]').data('cart-key')
});
}
} else {
$wcpw.data('wcpw').addCartProduct({productToAddKey: $input.data('step-id') + '-' + $input.val()});
}
});
// add product to cart and go next once click on it
jQuery(document).on('click', '[data-component~="wcpw-product"]', function () {
var $product = jQuery(this);
var $wcpw = $product.closest('[data-component~="wcpw"]');
$wcpw.data('wcpw').addCartProduct(
{productToAddKey: $product.data('step-id') + '-' + $product.data('id')},
{behavior: 'submit'}
);
});
// submit filter on change immediately
jQuery(document).on('change', '[data-component~="wcpw-filter"]', function () {jQuery(this).submit()});
// don't open the image page on thumbnail click
jQuery(document).on('click', '[data-component~="wcpw-product-thumbnail-link"]', function (event) {event.preventDefault()});
// tick the product checkbox while changing a variation property
jQuery(document).on('change', '[data-component~="wcpw-product-variations-item-input"]', function () {
jQuery(this).closest('[data-component~="wcpw-product"]').find('[data-component~="wcpw-product-choose"][type="checkbox"]').prop('checked', true);
});
// keep the chosen product checkboxes while the AJAX requests
jQuery(document)
.on('change', '[data-component~="wcpw-product-choose"]', function () {
var $element = jQuery(this);
var wcpw = $element.closest('[data-component~="wcpw"]').data('wcpw');
var id = $element.attr('id');
if (!wcpw.chosenProducts) {
wcpw.chosenProducts = {};
}
if ($element.prop('checked')) {
wcpw.chosenProducts[id] = id;
} else if (wcpw.chosenProducts.hasOwnProperty(id)) {
delete wcpw.chosenProducts[id];
}
})
.on('ajaxCompleted.wcpw', function (event, instance) {
for (var key in instance.chosenProducts) {
if (window[instance.chosenProducts[key]]) {
window[instance.chosenProducts[key]].checked = true;
}
}
});
// XStore theme product quantity buttons fix
jQuery(document).on('ajaxCompleted.wcpw', function (event, instance) {
instance.$element.find('[data-component~="wcpw-product-quantity-input"]')
.before('<span value="-" class="minus"><i class="et-icon et-minus"></i></span>')
.after('<span value="+" class="plus"><i class="et-icon et-plus"></i></span>');
});