Plugin Installation via WordPress

Login to your WordPress Dashboard and go to Plugins. Click the Add New button located at the top of the page (see image below).

After the page refreshes click Upload Plugin at the top of the page.

Click Browse, select the plugin .zip file that you downloaded and click Install Now to upload and install the plugin.

After the installation is complete click Activate Plugin. You are now ready to use WooCommerce Custom Products.

Plugin Installation via FTP

If you are going to install the plugin using FTP, you will need an FTP Client, such as FileZilla.

Login to your hosting server via FTP. Find the Plugins folder at ../wp-content/plugins/.

Extract the plugin folder from the .zip file you downloaded. It has the same name as the .zip file.

Upload the plugin folder you extracted to your Plugins folder on the hosting server.

After the upload is complete find WooCommerce Custom Products on the Plugins page and click Activate. You are now ready to use WooCommerce Custom Products.

Components

Components are the magic that makes this plugin work.

By default, the components are displayed on the left side of the customizer image.

By setting Components position (settings page) you can also display components on the right side of the customizer image.

Managing the components

If you ever added or edited a category in WordPress, you should be familiar with the components’ editing page. The user interface is very similar.

You can find the components edit page at Products -> Components.

How to add/edit product components

• Add a Name. This will be used as the default component name.
• Add a Slug (optional). This is the URL-friendly version of the name.
• Add a Description (optional). This will be used as a default component description.
• Add a Fee (optional). This will be used as the default component customizing fee if Customization fee type (settings page) is set to “Per component”. If you leave this empty and don’t assign a component fee on the product edit page, the Default fee (settings page) will be used.

Using the components

Once you add some components you can assign them to the products on the Product edit page.

Open your WordPress Dashboard and go to Products, find the product that you want to make customizable and click Edit.

How to add components to a product

• When editing a product scroll down to the Product data section and click on the Custom Products tab on the left.
• Check the Is customizable checkbox first, the value will be saved automatically.
• Select a component in the select box and click Add.
• If you can’t find a component you need, you can quick-add one by clicking the Add New Component on the bottom.

• When the component is added an info box will appear, reminding you that product components were changed and a tag edit form for the corresponding component will also be created on the Tags tab.
• Tags on the customizer image will have to be updated as well, so that they are in sync with the components. If you do not update the tags you can end up having components without a tag, or tags that aren’t connected to any components.
• Click on the newly added component name to expand it, or click Expand/Close on the right, to expand or close all of the components.

• Add a Name. This will be used as the name for the current component of the current product only. If you leave it blank default component name will be used.
• Add a Customization fee. This will be used as the customization fee for the current component of the current product only. If you leave it blank the Default customization fee (settings page) will be used. If the Customization fee type (settings page) is not set to “Per component” this field will not be visible.
• Add a Description. This will be used as the description for the current component of the current product only. If you leave it blank the default component description will be used.

How to remove components from products

• When hovering over a component a Remove button will appear on the right.
• Click the Remove button and confirm.

How to add attributes to components

When you add a component you have to assign some attributes to it and then assign some options (terms) to the attributes. This will allow users to customize the component with the given attributes.

• Select an attribute and click Add.
• An info box will appear again, reminding you to save changes to components after you are done.
• Select some values, which will act as options (terms) for the current attribute.
• You can add all available options or remove all current options by clicking Select all or Select none.
• If you can’t find an attribute you need, you can quick-add one by clicking the Add new button on the right.
• When you are done click Save Changes on the bottom of the screen.

How to remove attributes from components

• When hovering over an attribute container a Remove button will appear on the right.
• Click the Remove button and confirm.

Tags

Customizer tags are a good way to show customers what they can customize on a product.

You can add tags in the form of a simple vector (SVG) icons and/or text. Either way the quality will stay perfect no matter how big or small you make them. The final customizer image is a SVG vector image as well, which makes it possible for the customers to click on the tags.

With vector icon tags you can:

• Resize them
• Rotate them
• Move them
• Set a background color

With text tags you can:

• Resize them
• Rotate them
• Move them
• Set text color
• Set font family
• Set advanced text options (bold, italic, underline, line-through, overline)
• Set text shadow

Tag editor

You can find the tag editor on the Product edit page.

Open your WordPress Dashboard and go to Products, find the product that you want to make customizable and click Edit.

When editing a product scroll down to the Product data section and click on the Custom Products tab on the left. Then click on the Tags tab as indicated on the image below.

If a customizer image has not been created and you haven’t selected a background image yet the product featured image will be used.

If the current product is a variable product a variation selector will be shown (marked with green on the image below). If Use variable products (settings page) is set to “Use all variations” you have to create images for all of the variations that you want customized. If Use variable products (settings page) is set to “Use default variation” you only have to create an image for the default variation. Default variations are only supported in [ woocp ] shortcode.

You can find more information about variable products at this link.

How to create customizer images for variations

• Select a variation (marked with green on the image below)
• Set a background image by clicking Choose Background Image. WordPress image uploader will open. Upload a new image or select an existing one and click Choose Image.
• When you’re done editing tags click Save image on the bottom.
• You can also save the customizer image for all variations that don’t have an image yet by clicking Save For All Variations.

Creating and managing tags

How to create text and icon tags

• Click on the component name to expand the tag form.
• Enter some text and click Add text below. Some text will appear on the image.
• Select an icon and click Add icon below. An icon will appear on the image.
• While a text/icon tag for a component is present on the image, the Add text / Add icon buttons will be disabled.

How to edit text tags

• You can edit the text by simply double clicking on the text or by editing the text in the input field. The text will be synced between the form and the customizer image automatically.
• To edit advanced text options click on the Advanced text (marked with green) link and a form will expand.
• You can set the text Font Family. Changes will be updated automatically.
• You can set the text Color. You can use any legal CSS color value or simply use the color picker. Changes will be updated automatically.
• You can set the text to bold, italic, underline, line-through and overline. Changes will be updated automatically.
• If you click the Shadow checkbox a Shadow Style input will appear. You can leave the default shadow or set your own. Follow the CSS guidelines for editing shadows.
• You can also remove the tag by clicking Remove tag. If you remove the text tag, the Add text button will no longer be disabled and the Text input will be cleared.

Shortcode

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.