This plugin replaces the standard product image with a new image that has the text updated, in a font of your choice, in front of the product image as the customer enters their message.
Each layout can be specified from one up to a maximum of ten lines. As the customer types, the text is semi-automatically adjusted to fit. The font size is set as part of the layout and the text is shrunk to the minimum font size as required. When the customer hits the Enter key, the layout adjusts according to the number of lines now being typed. If the customer types too long a message (it won’t fit within the width specified in the layout), or they try to have too many lines, then warning messages are displayed.
The administrator can create as many different layouts as they want and can associate each layout with any number of products.
When the WYSIWYG customized product is displayed as a catalog item the title of the product is automatically displayed as a message, or you can enter your own message to be shown in the catalog.
As this is a visual plugin, it’s easier to see than describe, so take a look at the [demonstration video][demo video] or, for a live example, try [a heartstrings plaque][heartstrings custom] – choose any of the products and type in the message box. (As an aside, ALL of the round products on the Make Your Own Plaque page use the same images. Just one per color. The backgrounds and the overlays are added by a premium version of this product.)
This plugin requires WooCommerce and Gravity Forms. It also requires PHP Version 5.4.0 or above.
Additional features available in the Premium version:
- Add overlays on the product image in a layout
- Add background images to a product
- Use one or more text fields and drop down fields on gravity forms as well as the paragraph field.
- Add Static text to a product along with variable fields
- Pre-populate and tweak the gravity forms in the product data
- Support and updates for 1 year
[Learn more about Wysiwyg Custom Products Premium][premium]
First settings screen. A very boring layout with no image as a basic template.
Setting screen with image added and width and Y position adjusted. Shown with minimum font selected.
This is how a finished layout may look. Shown with maximum font selected.
This is two screen grabs in one. The left hand side is showing the Wysiwyg Customization product tab, with the ‘Heart’ layout selected. The right hand side shows how that product would appear in the catalog (the product is named Example Wysiwyg Product).
Same as above, but with specific text to be shown on catalog pages.
What the customer sees when placing the product order.
Two more images of the same product. When the color variation is changed, the image associated with that variation is updated behind the text that the customer has already typed.
The text overflow error messages as seen by the customer when they are typing their own message.