This is a plugin that allows you to annotate WooCommerce product on top of any…
Author: | Tolotra Samuel (profile at wordpress.org) |
WordPress version required: | 4.1 |
WordPress version tested: | 4.7.3 |
Plugin version: | 1.0 |
Added to WordPress repository: | 09-04-2017 |
Last updated: | 09-04-2017
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
|
Rating, %: | 0 |
Rated by: | 0 |
Plugin URI: | |
Total downloads: | 717 |
Click to start download
|
Screenshots
This shows a single annotation. You can see how things are labelled when the user hovers on top of the product.
This shows the gallery view of all annotations. You can see that when the users hover the annotated images, they are prompt to click to ‘Shop the look’,
This shows the annotated image clicked from the gallery view. As you can see, it displays the annotated image in a popup box. On the left side, we can see the image with all captions. On the right side, we can see all the products annotated within this image.
Here is an example of the shortcode that you can use to display the annotated image or embed them into existing posts.
This shows the editing process of the annotation. As you can see, it is as easy clicking, dragging, and drop in the rectangles. Below the image, you can see a box called ‘Select Product’, there you can add, reorder or remove the product that are in the pictures.
This is an example of the annotation on a mobile device, note how the popup box has been replaced with a larger image, and the product are displayed below the image. This shows that the plugin has been carefully refined in terms of responsiveness and user experience.
FAQ
Installation Instructions
-
Upload the plugin files to the /wp-content/plugins/woocommerce-image-annotator
directory, or install the plugin through the WordPress plugins screen directly
-
Activate the plugin through the ‘Plugins’ screen in WordPress
-
Add a new annotation by going to ‘Image Product Annotator’ and then ‘Add New’ in the left hand columns of your admin panel
-
Click ‘choose image’ to choose your image and then click on ‘insert into post’.
-
Inside the ‘Select Product’ box, choose the products you want to annotate in the image
-
Add your annotations, by selecting on the add button and then clicking on the image where the product is represented
-
Drag and resize your annotation to fit the area of the represented product
-
Caption each annotation referring to the order of the product you just added in the ‘Select Product’ box. It should be an integer between 0-9
-
Hit publish/update to save them.
To display the annotated images:
-
Open the permalink that was generated with the annotation post.
-
You can use the TinyMCE shortcode to add one of your saved annotations using the [wcia_image id=id_here] shortcode.
-
You can display all annotation using the TinyMCE [wcia_image_all] shortcode.
-
You can alternatively display all your annotations in a custom page that has been dynamically generated with the plugin called ‘Gallery Annotation’
How can I change the tag ‘Shop the Look’ in the annotations?
Under ‘Setting’, in the left hand columns of your admin panel, click ‘View Annotation’.
Inside the General Options box, find a field labelled: View Annotation Button Label.
Edit this field as how you want the tag to be and hit saves changes at the bottom of the page.
ChangeLog
1.0
- First release of plugin – many more changes to come!