Custom Products for WooCommerce Documentation

Installation

After the purchase you will be able to download the plugin custom-products-for-woocommerce-premium.zip file.

You can find your download link and license details at My Account -> My Plugins.

You can install the plugin using your WordPress Dashboard or FTP.

If you upgraded to the Basic or Premium version, the old version of the plugin should be deactivated automatically after the installation of the new (Basic or Premium) version. It is safe to delete it – you won’t lose any information.

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 Custom Products for WooCommerce .

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.

Note: Be careful to upload the plugins folder and not the .zip file.

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

Settings

 

Display settings

This section determines how the plugin will look and behave on front end. You can set if and where the Customize button will show, change the text labels, set some custom CSS if needed and more.

If you need the text labels translated leave the input fields blank and edit the translation files.

 

  • Product page tab  – Show the customizer tab on the product page (by default it will show next to the “Reviews” tab).
  • Product page button – Show the “Customize” button on the product page next to “Add to cart” button for products that can be customized. You can set if it shows on the left or right of the “Add to cart” button by setting Customize button position below. If Product page tab is enabled this button will simply open the tab. However if the tab is not enabled the button will link to the page set by the Customizer URL setting in the “Customizer settings” section. By default it will link to the homepage.
  • Arhive button – Show the “Customize” button next to the “Add to cart” button on the arhive page for products that can be customized. Similarly as Product page button this button will link to the Customizer URL setting if Product page tab is disabled. If the tab is enabled however, this button will link to the product page and open up the tab.
  • Cart button – Show the “Customize” button on the cart page for products that can be customized but weren’t yet when they were added to the cart. The rules that determine where this button will link are the same as the rules for the Archive button setting.
  • Component arrow – Show arrows on components, indicating that they can be expanded. 
  • Component description – Show a description of the component under the component label.
  • jQuery quantity – Use a jQuery version of the quantity input field.
  • Product page tab priority – Set position for the product page tab. Product page tab must be enabled for this setting to take effect. Number 1 will be first, number 99 for example will (most likely) be last.
  • Customize button position – Select where to show the “Customize” button on the product page. You can show it before or after the “Add to cart” button
  • Components display – Select how product components will be displayed on page load – expanded or collapsed (default). You can completely disable expanding/collapsing by selecting “Always expanded”.
  • Components position – Select on which side of the product customizer the product component list will be displayed.
  • “Customize” button text – This text will be visible on the product page tab and “Customize”.
  • “Customized” text – This text will be visible on cart, checkout and invoice to show what was customized on the product.
  • “Customization” text – This text will be visible in cart, checkout and invoice totals.
  • “Select product” text – This text will be used as a label for product select in [woocp] shortcode.
  • “Don’t change” text – This text will be used as the default option for attributes select box to indicate this attribute of the component should remain unchanged.
  • Components title tag – HTML tag for the component label in components list. Defaults to <h3>.
  • Custom CSS – Add custom CSS. You can click “CSS help” for a list of CSS selectors used by this plugin. There is no need for the <style> tag, pure CSS only.
Custom Products for Woocommerce Display and Customizer settings

Display and Customizer settings

Customizer settings

These settings mostly only apply to the [woocp] shortcode, but Customizer image width applies to the product customizer on the product page as well.

By default WordPress has no image sizes registered that would come close to the size that you will (probably) need for the images in product and attribute select boxes. For best performance it is recommended to regenerate thumbnails after changing this setting, uploading new attribute/product images or when you first install this plugin. There are several third party plugins that can be used to achieve this.

 

  • Customizer width – This setting determines the width of the product customizer. You can use any CSS legal value (px, %, em,…). Defaults to 100%.
  • Customizer image width – This setting determines the width of the customizer image in % (relative to Customizer width). Defaults to 60%. Components list will stretch to fill the rest of the product customizer. With default settings that would mean 40%.
  • Option image height – Height of the attribute option select image.
  • Option image width – Width of the attribute option select image.
  • Product image height – Height of the product image on product selector.
  • Product image width – Width of the product image on product selector.
  • Customizer URL – URL of a page that contains [woocp] shortcode. It must contain the full URL. If Product customizer tab is disabled on product page, “Customize” buttons will redirect to this URL. Defaults to homepage.

 

Variable products

These settings determine if and how variable products will be used with the product customizer.

 

  • Use variable products – Select if and how you want to use variable products. If you select “Use default variation” only the default variation of a product will be used in [woocp] shortcode. If you select “Use all variations” all variations will be used. If the variation has no customizer image the variation image will be used. If even the variation image is not set the products’ featured image will be used.
  • Hide non-customizable variations – If this option is selected variations on the product page tab without a customizer image will show a message that this variation cannot be customized. In [woocp] shortcode variations without a customizer image will not be shown in the product selector. If you leave this unchecked and Use variable products is set to “Use all variations”, variations without a customizer image will use the variation image. If variation has no image, the product featured image will be used.
  • Show variation options – This setting will show options in product selector next to variation name for variations with more than 2 attributes. Example: Skyfall backpack – White, Leather, Small. WooCommerce shows options for variations with 2 attributes or less by default. Only applies to [woocp] shortcode product selector.
Custom Products for Woocommerce variable products settings, fees settings, and shortcode generator

Variable products settings, fees settings, and shortcode generator

Fees

These settings determine how you will charge customers for product customization.

 

  • Customization fee type – Select how you want to charge for product customization. You can charge per order (a single fee is added to the order), per product (customization fees of all products are added up) or per component (customization fees of all components are added up). If a product or a component has no fee set, the Default fee will be used.
  • Default fee – Set a default fee for product customizations. If Customization fee type is set to “Per order”, or if you don’t set a product/component customization fee, this fee will be used.
  • Show fee in cart – Show customization fee in cart, checkout and order details next to the component label.

 

Shortcode generator

Create a [woocp] shortcode which you can use anywhere on site. Select values in the shortcode generator form and click on the generated shortcode to copy it. After that you can simply paste the shortcode anywhere on the site. Shortcode accepts multiple parameters, but you can only use “category_ids” OR “product_ids”. You can find more information about shortcodes here.


 

  • Width (width) – Set a width for the product customizer container. You can use any CSS legal value (px, %, em,…).
  • Number of products (number_of_products) – Select how many products you want to show in the shortcode.
  • Order (order) – Select how you want your products ordered.
  • Order by (order_by) – Select by which parameter you want your products ordered.
  • Categories (category_ids) – Select product categories that you want included in the shortcode.
  • Products (product_ids) – Select products categories that you want included in the shortcode.

Components

Components are the magic that makes this plugin work.

Components give you the ability to split products into separate parts and allow your customers to customize each part individually.

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.

Note: You can add and edit multiple components to add to your products. The data you assign to these components will serve as the default data for all of the components. You can add component specific data on the product edit page.

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.

Note: Custom Products for WooCommerce supports Simple and Variable (premium) products. Use variable products (settings page) has to be set to “Use all variations” or “Use default variation” or the Custom Products tab will not be visible on the Product edit page for variable products.

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.

Note: Customizer tags are not the same as WooCommerce product tags. They are not saved in the database, instead they only exist on the customizer image you create. Their purpose is to mark customizable components on a product and bring the customers attention to a particular component.


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.

The tags are linked to components. When a tag is clicked a corresponding component will be extended and others will be collapsed.

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. You can modify this by setting Hide non-customizable variations (settings page).

  • Hide non-customizable variations is NOT checked –  If you don’t create a customizer image the variation image will be used. If the variation image does not exist the product featured image will be used. If even the product has no featured image variations without a customizer image will not be shown. Insted a message will appear in the customizer tab on product page saying that this variation cannot be customized on product page. In [woocp] shortcode variations that can’t be customized will not be shown in product selector.
  • Hide non-customizable variations IS checked – variations without a customizer image will not check for variation or product image but will be hidden by default.

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.

Note: Products and variations without a customizer image cannot be customized.

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.

How to edit icon tags

  • While an icon is present on the customizer image you can change it by selecting a new icon and pressing “Add icon”. This way the icon will be replaced and put in the correct layer. If you simply delete the icon and insert a new one the icon may appear in front of the text instead of behind it.
  • You can set the icon Color. You can use any legal CSS color value or simply use the color picker. Changes will be updated automatically.

Shortcodes

 

You can use the shortcode to show product customizer (or any part of it) anywhere on your site.

[woocp] shortcode shows the complete customizer with product select dropdown.

[woocp_single_product] shortcode is meant to only show one product (or one variable of a product), without the product select dropdown

All other shortcodes serve as a way to “customize the customizer”. There is a shortcode for each part of it, and they all work together no matter where you put them (as long as they’re on the same page).

You can also have multiple customizers on your page, if set up properly they will each work separately.

You can find more information about shortcodes here.

Shortcode

 

[woocp product_ids="1,2,3" number_of_products="3" width="100%" order="ASC" orderby="title" class="classname" hide_msg_area="true" hide_select="true"]

 

Shortcode accepts the following parameters:

  • product_ids – a comma separated list of product IDs
  • category_ids – a comma separated list of category IDs
  • number_of_products – limit of produts to show
  • width – product customizer width (px, em, %, …)
  • image_width – customizer image width (%)
  • list_width – components list width (%)
  • class – classname(s) for CSS/JS purposes
  • order – order products (ASC, DESC)
  • orderby – order products by (none, ID, title, name, date, modified, rand)
  • hide_msg_area – hide/show WooCommerce loader and message section under the add to cart button (true/false – default: false)
  • hide_select – hide/show product select dropdown (true/false – default: false)
Note: You can only use category_ids OR products_ids in the shortcode.

Shortcode

 

[woocp_single_product id="1" width="100%" class="classname" hide_msg_area="true"]

 

Shortcode accepts the following parameters:

  • id – product ID if simple and variation ID if variable – default variation will be used if not set
  • width – product customizer width (px, em, %, …)
  • class – classname(s) for CSS/JS purposes
  • hide_msg_area – hide/show WooCommerce loader and message section under the add to cart button (true/false – default: false)

Shortcode

 

[woocp_components_list id="1" width="100%" class="COMPONENTS_LIST_CLASS" add_to_cart="false" add_to_cart_class="ADD_TO_CART_CLASS" icon_preload="false" hide_msg_area="true"]

 

Shortcode accepts the following parameters:

  • id – product ID
  • width – list width (px, em, %, …)
  • class – classname(s) for CSS/JS purposes AND for targeting this list with the [woocp_customizer_image] shortcode
  • add_to_cart – show ATC section under the list (true/false – default: true)
  • add_to_cart_class – which ATC to target with this list
  • icon_preload – preload attribute images (true/false – default: true)
  • hide_msg_area – hide/show WooCommerce loader and message section under the add to cart button (true/false – default: false)
Note: Use the add_to_cart_class=”ADD_TO_CART_CLASS” parameter if you also have a [woocp_add_to_cart class=”ADD_TO_CART_CLASS”] shortcode somewhere on the same site and you want the current components list to work with that particular add to cart button. Selecting an attribute on a component on this list will transfer the data to cart only when clicking on the targeted add to cart button.

Shortcode

 

[woocp_customizer_image id="1" width="100%" class="classname" components_list_class="COMPONENTS_LIST_CLASS"]

 

Shortcode accepts the following parameters:

  • id – product ID if simple and variation ID if variable – default variation will be used if not set
  • width – image width (px, em, %, …)
  • class – classname(s) for CSS/JS purposes
  • components_list_class- which components list to target with this customizer image
Note: Use the components_list_class=”COMPONENTS_LIST_CLASS” parameter if you also have a [woocp_components_list class=”COMPONENTS_LIST_CLASS”] shortcode somewhere on the same site and you want the current customizer image to work with that particular components list. Clicking on a tag on the customizer image will open the corresponding component on the targeted list.

Shortcode

 

[woocp_add_to_cart id="1" quantity="false" class="ADD_TO_CART_CLASS" hide_msg_area="true"]

 

Shortcode accepts the following parameters:

  • id – product ID
  • quantity – show/hide quantity field (true/false – defalt: true)
  • class – classname(s) for CSS/JS purposes AND for targeting this button with the [woocp_components_list] shortcode
  • hide_msg_area – hide/show WooCommerce loader and message section under the add to cart button (true/false – default: false)

Shortcode

 

[woocp_customize_button id="1" width="100%" class="classname" text="Button Text" url="https://somesite/product-customizer/"]

 

Shortcode accepts the following parameters:

  • id – product ID if simple and variation ID if variable – default variation will be used if not set
  • width – button width (px, em, %, …)
  • class – classname(s) for CSS/JS purposes AND for targeting this button with the [woocp_components_list] shortcode
  • text – button text
  • url – custom URL of a page where [woocp] shortcode is located (default: Customizer URL value(settings))

Pin It on Pinterest

Sharing is caring!

Tell your friends about this