VividWorks 3D E-Commerce Configurator

Description

Integrate your VividWorks 3D E-Commerce Configurator account to any WooCommerce shop.

Bring your product or products to life and let your customers experience all the details of your product in full 3D. Enable an in-store physical experience in online where you can almost touch and feel the product for real. Let your customers explore the possibilities of your product options, with safety of ensuring they can only configure the product correctly.

Configure the product rules and add all the parts, materials and accessories with our web-browser based management interface. Update and edit new additions and changes and publish them with ease. The rules system allows to build complex product rules, ensuring all purchase orders can be manufactured, delivered, and installed. Map SKU codes with your e-commerce platform data to ensure showing accurate prices and bill-of-material to the end user. Enable completing the purchase through integration of the WooCommerce shopping cart.

Note: To use this plugin you must have a valid subscription with VividWorks and an active VividWorks 3D E-Commerce Configurator account. To learn more please visit our dedicated product page.

Screenshots

  • The embedded configurator front-end
  • Product Settings
  • Material sample
  • Product measurements

Installation

Installing our plugin is very easy, either automatically or by uploading the plugin zip file which you can download from our WordPress plugin page. There are no special technical requirements but we recommend a fairly up-to-date server and WordPress installation, for example PHP 7+ and WordPress version 5 and up.

The only main requirement – for using the plugin, not installing it – is that you have to be our customer. VividWorks 3D E-Commerce Configurator is a SaaS product for which this plugin implements WooCommerce integration. Installing the plugin is free but the plugin without being our customer does not really do anything.

Installing the plugin

Installation through the WordPress plugin directory

  1. In your WordPress admin page, go to Plugins > Add New
  2. Search for “VividWorks”
  3. When you find our plugin (called “VividWorks 3D E-Commerce Configurator”) click the “Install Now” button.
  4. Activate the plugin in the WordPress Plugin Admin (Plugins > All plugins)

Manual installation

  1. Navigate to our WordPress plugin page
  2. Download the plugin .zip file
  3. Head over to the WordPress plugin admin and hit the “Add New” button in the upper section.
    • In the WordPress admin interface, go to Plugins, then “Add New”
  4. Now choose “Upload Plugin”, always in the upper section of the page, and choose your plugin zip file. Now hit the “Install Now” in the upload widget
  5. Congratulations, the VividWorks plugin is now installed! All you have to do now is activate it. As you can note in the last image, WordPress offers a quick way to do this just after the installation, just hit the “Activate Plugin” button. Otherwise you can activate it later in the WordPress Plugin admin interface
  6. Go to the Product settings, find the VividWorks tab, enable the configurator, and insert at least Library ID and Product ID, which can be found in the VividWorks Management site or are given to you by VividWorks

Configuring the plugin

Configuring our WooCommerce plugin is very simple. As opposed to some other similar offerings we rely completely on our own SaaS service and your WooCommerce product configuration. All our plugin has to do is show our embedded planner interface and provide integration for add-to-cart function.

The configuration can be broken down into two broader steps. General settings and product specific settings.

General settings

In the WooCommerce settings interface (found under WooCommerce > Settings) you should now have a tab called VividWorks Configurator. In there you will find settings that affect all VividWorks embedded configurators on your site. Currently we have the following settings.

Note: In the current release of our plugin we do not have an API connection to our back-end. This means that settings like the Product Library and Product ID will be provided to you by VividWorks.

Default Product Library: Product Library in our lingo means a container where you would have similar products in. Defining the Product Library for the embedded configurator is obligatory. What this setting does is set the default Product Library to be used for all WooCommerce products, unless otherwise specified in product specific settings. This is handy especially if most or all of your configurators would use the same library of products.

Default Product ID: The ID of the product used from our back-end. This setting then sets the default Product ID to be used for all WooCommerce products, unless otherwise specified in product specific settings. This is handy especially if most or all of your configurators would use the same product from our back-end (think variations of one product).

Default product page placement: The default placement on product pages. Choose this to set in which setting the products will default to when enabling the configurator for them. For reference of the options, see the product specific settings later in the document.

Custom add-to-cart event: To customize what happens after user has added a product to the cart you can add JavaScript code in this field. Please note that this code, if defined, will overrule any default WooCommerce events such as “redirect to cart”.

Product specific settings

In the WooCommerce product section (Products in the main menu on the left), when editing individual products you can find VividWorks Product Configuration tab. In here you can enable our 3D based planner for the product and tie it to a VividwWorks back-end product.

The main setting here is the Enable VividWorks Planner for this product? checkbox. Once you select this, you will see other settings. For the embedded configurator to show up you also need to provide a Product Library ID and Product ID, which we will provide to you. If you set default values for these two in the General Settings they will be filled for you automatically.

The only remaining setting is the Planner placement on the product page, which has three options:

  • Replace Product Summary to replace the default product summary and only show our configurator. This is the default option
  • Before Product Summary to show our configurator above the default product page summary
  • After Product Summary to show our configurator below the default product page summary.
  • Before the Product to show our configurator above the whole product block.
  • After the Product to show our configurator below the whole product block.

Embedding the planner manually

The configurator can also be embedded on any page, not just product detail pages, by using a certain HTML code. On the product detail pages the positioning of the configurator can be customized by using a WordPress template tag (called action in WordPress lingo).

Embedding on any page

To include a planner on a normal WordPress page or post, use the following HTML markup:

<div class="vw3d" 
    data-vw-library="ba8bb7db-4b31-4afb-a4bd-e647a5a9216f"
    data-vw-product="5b8591c2-ed80-437b-990c-ce102120a6e6">
</div>

The above tag would embed the planner for product with ID 5b8591c2-ed80-437b-990c-ce102120a6e6 from a product library with ID ba8bb7db-4b31-4afb-a4bd-e647a5a9216f. As mentioned before in this document, these codes / IDs will be provided to you by VividWorks. Also notice that you can wrap the above HTML in any amount of other HTML you will, and style accordingly.

Custom placement on Product Pages

To place the configurator on any location of the product page, if you have a custom template, you can use the following WordPress action:

<?php do_action( 'vividworks_product_configurator' ) ?>

The action currently assumes it is run on a WooCommerce product page and does not accept custom product or product library IDs.

Add-to-cart and pricing

There will be an “Add to cart” button in the embedded configurator UI. This button relies on SKU logic configuration to be done for the products in our back-end, and those same SKUs to be found in the WooCommerce product catatalog.

Note that the SKUs do not have to be defined in the same product for which the embedded configurator was enabled. Internally the add-to-cart will find a WooCommerce product or a product variation that has a SKU we happen to need, and it will add that product (or variation) into the shopping cart.

For example, a user configures a product with 3 distinct parts and now wants to add it to their shopping cart. WooCommerce will receive a list of SKUs and amounts from the VividWorks back-end, something along the lines of:

[
    {
        'code': 'part-1',
        'amount: 2
    },
    {
        'code': 'part-2',
        'amount: 1
    },
    {
        'code': 'part-3',
        'amount: 1
    }
]

Our plugin code will now go through all WooCommerce products and product variants, and find those that match the SKUs in the list. The result is that two instances of a product / variant with SKU part-1 will be added to the cart, and one for part-2 and part-3.

VividWorks does not handle pricing separately but instead relies on your existing pricing, including sales / discounts. This makes it easier for you to maintain the pricing as it only exists in one system.

FAQ

Where can I configure my 3D?

Be in contact with us. First of all you need to be our customer. As of today we VividWorks need to configure the actual 3D products for you. We will open the configuration management interface to all of our 3D E-Commerce Configurator customers sometime in the near future, but for now just drop us an email.

What do I need to put into the ID fields in the plugin settings?

We will provide you with the correct IDs and other help once we have your products configured.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“VividWorks 3D E-Commerce Configurator” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0.1

  • Fixed add-to-cart and price query features
  • Added possibility to disable add-to-cart
  • minor bug fixes

1.0.0

The initial public release of the plugin.

0.4.1

  • Minor bug fixes

0.4.0

  • Added language / locale support

0.3.1

  • Bug fix for add-to-cart on non-product page embeds

0.3.0

  • Possibility to add custom JS code to run on add-to-cart
  • Price API to get prices for SKUs

0.2.1

  • Performance optimization for add-to-cart

0.2.0

  • Added hooks to view the Planner after or before the product, using actions “woocommerce_before_single_product” and “woocommerce_after_single_product”.
  • Added a custom action / hook to render the VividWorks Planner on any point of WooCommerce product page template by running do_action( ‘vividworks_product_configurator’ )
  • Added default setting for product page positioning in the general main settings of the plugin
  • Added more spacing around the planner, above and below, when not replacing the product summary

0.1.0

The initial pre-release of the plugin.