Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

WooCommerce Image Annotator

开发者 Tolotra Samuel
更新时间 2017年4月9日 22:36
PHP版本: 4.1 及以上
WordPress版本: 4.7.3
版权: GPLv3

标签

gallery woocommerce popup annotation

下载

0.0.1

详情介绍:

If you want to add more value to your WooCommerce site by giving more reasons for your customers to buy your product, this plugin is right for you. It will allow you to extend the way you expose your product through annotation of those products in live pictures. Best of all, this plugin is accompanied with a friendly and responsive user interface for both the frontend and the backend sides. You can annotate, save, display your image, then go back and edit it by adding different products on top of your image.

安装:

  1. Upload the plugin files to the /wp-content/plugins/woocommerce-image-annotator directory, or install the plugin through the WordPress plugins screen directly
  2. Activate the plugin through the 'Plugins' screen in WordPress
  3. Add a new annotation by going to 'Image Product Annotator' and then 'Add New' in the left hand columns of your admin panel
  4. Click ‘choose image’ to choose your image and then click on ‘insert into post’.
  5. Inside the ‘Select Product’ box, choose the products you want to annotate in the image
  6. Add your annotations, by selecting on the add button and then clicking on the image where the product is represented
  7. Drag and resize your annotation to fit the area of the represented product
  8. 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
  9. Hit publish/update to save them.
To display the annotated images:
  1. Open the permalink that was generated with the annotation post.
  2. You can use the TinyMCE shortcode to add one of your saved annotations using the [wcia_image id=id_here] shortcode.
  3. You can display all annotation using the TinyMCE [wcia_image_all] shortcode.
  4. You can alternatively display all your annotations in a custom page that has been dynamically generated with the plugin called ‘Gallery Annotation’

屏幕截图:

  • 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.

常见问题:

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.

更新日志:

1.0