Getting started with WooCommerce Product Configurator

Requirements

  1. PHP 5.3+
  2. Tested on WooCommerce 2.1+
  3. PHP GD Library

Important Notes

  1. Your images must be PNGs.
  2. Layers run from top (highest layer) to bottom (lowest layer) in the configurator tab. This order is defined in the product’s Attributes tab.
  3. You should set a featured image for the product, which will appear in product listings and as a fallback.
  4. Product galleries are not yet available.
  5. The configurator tab will only show once a variable product with attributes is saved.

Installation

To install the plugin:

  1. Navigate to Plugins > Add New > Upload.
  2. Click Choose File, and choose the file jck_woo_product_configurator.zip from your CodeCanyon download zip.
  3. Once uploaded, click activate plugin.
  4. The plugin is now installed and activated.
  5. Once installed, you will be prompted to install the required Redux Framework plugin.

Settings

A settings page can be found under WooCommerce > Configurator.

General

Cache Settings

  • Enable Image Cache
    By enabling the image cache, your customers final product image will be cached for 24 hours. The PHP image compilation process can be quite slow, so this is a good method of allowing the rendered image to be saved in your uploads folder, and served instead of the dynamic image generator.
  • Cache Duration (Hours)
    If you enable the image cache, the images will be stored for this many hours. After this point, they would be regenerated by the customer.

Display

Image Settings

  • Width (%)
    The width of your image container. This is often 48%.
  • Position
    Set the alignment of your image container.

Responsive Settings

  • Enable Breakpoint
    Allows you to change the image container settings after a certain browser width.
  • Breakpoint (px)
    The width at which the breakpoint settings become active. The breakpoint is active from 0px to this setting.
  • Width (%)
    The width of your image container. This is often 48%.
  • Position
    Set the alignment of your image container.

Thumbnails

  • Enable Thumbnails
    When checked, thumbnails will be displayed below the configurable product image. These will be pulled in from your product gallery.
  • Column Count
    Enter a whole number to define the number of thumbnails in a row.
  • Spacing (px)
    Enter a pixel value for the spacing between your thumbnail images.

Loader

Loading Overlay Settings

  • Colour
    When an image is loading, a loading overlay is shown. This sets the colour of that overlay.
  • Opacity
    This sets the opacity of the loading overlay. 0 is transparent, 1 is opaque, 0.5 would be 50% transparent.

Loading Icon Settings

  • Icon Style
    Choose he icon to display while images are loading.
  • Colour
    Set the colour of your loading icon.

Configuration

Once installed, you can begin setting up your product configurator. We’ll assume you’ve already created a variable product as per the WooCommerce Documentation.

  1. Click to edit your variable product.
  2. Because your product is variable, and you’ve created attributes with the “Used for variations” checkbox selected, you will now be able to see the Configurator tab.
  3. When you open the Configurator tab, you will see a checkbox to enable the Product Configurator. Check that.
  4. Below this, you will see a list of all the variable attributes you created in the Attributes tab. These are ordered from top (highest layer) to bottom (lowest layer), ending with a custom option Background Image. To change this order, drag and drop your attributes from the Attributes tab.
  5. Each attribute in the Configurator tab has a row for each value belonging to that attribute. Here you can upload images.
  6. Click Add Image beside the attribute value you want to add an image to. You will then see the normal media library.
  7. Select or upload a transparent PNG to act as the image for that layer and that attribute value.
  8. Continue this process for all attribute values.
  9. Once your images are uploaded, you can then choose default attribute values. This will define what the image looks like to the customer on page load. If you leave a default unselected, that layer will not be used in the default image.
  10. Save your product.

You’re now ready to start using the Product Configurator on the frontend! It couldn’t be simpler; simply choose your product options and watch as the image changes based on your selection.

Changelog

v1.2.0 (-)
[update] Add static layer functionality
[update] Remove redux and add settings framework
[update] Tidy code and comments
[fix] Fix issue with sorting layers
[fix] Issue with uploading media to attribute [fix] Use WC ajax URL

v1.1.5 (22/12/2016)
[fix] Some updates regarding image generation were missing
[update] Envato market updater
[update] Add filter to order email thumbnail

v1.1.4 (07/09/16)
[update] Author tags
[fix] Check to see if WooCommerce is active - fix issue on multisites
[fix] Some hosts don't allow remote images in getimagesize, changed to path so images are generated
[fix] Error when no default image is set, but it was before
[fix] Make sure correct image shows in email if it's enabled
[update] Add validation to check for PNG images
[fix] Attribute add default image button

v1.1.3 (16/01/16)
[fix] admin_url SSL issue

v1.1.2 (09/09/15)
[update] change watch to .variations select

v1.1.1 (08/09/15)
[fix] Errors when $post is not set
[fix] Undefined param issue on add_to_cart_inventory_check
[fix] Missing terms when product is draft

v1.1.0 (13/07/15)
[fix] Image layers not loading
[fix] Image layer loading broken image when no image assigned
[fix] Default image layer functionality
[update] Added inventory functionality * Make sure to deactivate/reactivate to install the new DB table
[fix] Removed images from order success and order email

v1.0.8 (27/06/15)
[fix] Moved check for woocommerce to try and fix header issues
[fix] Remove invalid header error
[fix] is_array errors
[update] better pot file

v1.0.7 (27/04/15)
[fix] Moved check for woocommerce to try and fix header issues

v1.0.6 (19/02/15)
[Update] Add Cyr to Lat enhanced compatibility

v1.0.5 (14/01/15)
[Update] Allow for Russian (and other lang) attributes - caution: may affect previous configurations
[Fix] Load admin scripts only on edit product page
[Update] Check if WooCommerce is enabled
[Fix] Fix compatibility with WooCommerce Variation Swatches and Photos v1.5.3

v1.0.4 (06/08/14)
[Fix] Fixed bug where TGM didn't notify that Redux was required

v1.0.3 (27/07/14)
[Update] Added "Default" image for attributes
[Fix] Fixed bug where configurator was displayed on frontend even though it wasn't enabled
[Update] Now works with WooCommerce Variation Swatches and Photos by Lucas Stark
[Update] Added ability to order configurator options independantly, via drag/drop

v1.0.2
[Fix] Removed tgmpa_load_bulk_installer error

v1.0.1
[Fix] Configurator Enabled returned yes, not true. Added check for this.

v1.0.0
Initial Release

  • Was this Helpful ?
  • yes   no