WooCommerce plugin

The backend functionality

At the backend of WordPress, administrators with the corresponding permissions can manage the AJAX-ZOOM data using a well-elaborated and self-explaining interface.

In the "360 Product Views" tab, you can upload 360 or multi-level 3D product images; alternatively, import them from ZIP files that were previously uploaded to a specified location. You can create an unlimited number of 360-views for the same product!

Once a 360-spin view is available, it automatically displays in a table with 360/3D views available for a product and is ready to be published. Following are the possibilities of what else you can do via the backend administration:

• Assign the 360-degree views to selected variants of the product, thus having a 360-view for each variant if you need.
• Configure each spin with different settings, e.g., adjust the rotation speed or direction.
• Activate and deactivate a 360-view without deleting it.
• Sort the spin-views.
• Add clickable and interactive hotspots via the integrated hotspot-editor (no programming knowledge is required).
• Create stunning "360 product tours" (no programming knowledge is required).
• Preview everything you have created before actually activating it for the frontend.
• Generates a shortcode for each 360-spin view to insert it between the text at a WooCommerce product detail page, a post, or a different page.

In the "Videos" tab, you can insert videos from YouTube, Vimeo, and Daily Motion by defining a key number of those videos, or you can link to an mp4 file by providing the full path to it. Because a video is a configurable instance, there is an additional possibility to provide alternative keys or mp4 sources for each of the languages of your shop! Moreover, you can assign different video sources for variants of a product.

The plugin instantly retrieves the cover image for a video from the respective video platform in the backend and the frontend. Same as with the 360 product views, you can assign a video to only certain product variations and generate a shortcode to place it at any place that supports shortcode.

In the "Product variation images" tab, you can upload additional prpduct images for variation. That is not supported by WooCommerce out of the box and requires to install an additional (paid) plugin. You can use this AJAX-ZOOM plugin functionality or keep using the official commercial plugin developed by WooCommerce. At the front end, the AJAX-ZOOM product view supports variant images from both sources.

In the "Image Hotspots" tab, there is a list with all images gathered from all known sources for that article. For each image in this list, there is a possibility to add hotspots via the integrated hotspot editor. That is the same editor which creates hotspots for the 360 product views. If you have an image with hotspots that you want to put at some other place, you can do it with the shortcode that generates next to each image.

Recommendations

The best way to explore the further and the above-described features is by installing the plugin and testing it by yourself. The demo version has all the licensed versions' features with just a few restrictions regarding the number of images and their resolution. It also adds a demo watermark, which should not hinder you from evaluating this piece-of-technical-art plugin. However, you can request an evaluation license key that removes some of the demo version restrictions.

If you don't have a development or staging environment and install the plugin directly into production, go to the settings section and use the "displayOnlyForThisProductID" option to define one or a few products by entering their "post-id". That enables the plugin only for those products. Now, you can relaxingly finish configuring the plugin without affecting all other articles.

General features

• The mouseover area and the flyout zoom window are fully responsive.
• Adjustable to fit the size of any responsive elements by using the smart jQuery-like selector option.
• Adjustable for fixed or flexible image proportions.
• Permanent or automatically enabled "inner-zoom" depending on resolution and responsive layout.
• The replacement with the AJAX-ZOOM viewer on the product detail page can be disabled, and the default viewer of the template used. It is also possible to use a third-party plugin. All AJAX-ZOOM media such as a 360-product view can be displayed, e.g., within the product description by using shortcodes or special options.
• Support for WooCommerce images tied to product variations.
• Official WooCommerce Additional Variation Images plugin support on the frontend.
• Works great on touch-enabled devices, including Windows notebooks with touch-screens.
• Optional 360°/3D degree images support with (pinch) zoom and fullscreen view.
• Optional responsive thumbnails slider integration.
• Responsive modal or fullscreen views on click with AJAX-ZOOM.
• 360/3D product tours with or without hotspots.
• Placing clickable hotspots on the 360/3D degree images and regular images.
• YouTube, Vimeo, Dailymotion, mp4 - videos definitions from the backend, also tied to product variations if needed.
• Shortcode generation to display the entire gallery or only some media like images or 360 within a description tab or other posts not related to WooCommerce.
• Individual plugin settings for any product (e.g., "axZmMode" option only for a specified product).
• Fast "progressive" loading of high-resolution images.
• Instant (on-the-fly) generation of all thumbnails.
• 100+ other options.
• All components are adjustable over WooCommerce plugin settings.
• API for developers of all skill levels.
• Continuous development and improvements, technical support.

Backend screenshots

General handling / simple product

Basic backend handling - uploading a 360 / 3D product view and defining videos.

Variable WooCommerce products features

The AJAX-ZOOM Plugin for WooCommerce offers full support for variable products. That applies to both 360 / 3D product views and videos and individual (gallery) images. As a valuable addition, you can upload more than one gallery image for each variable product without using additional plugins. The official premium WooCommerce plugin is supported too.

AJAX-ZOOM Shortcodes for WordPress

Place WooCommerce 360 images, regular images and/or videos anywhere else besides product detail page / regular WordPress posts by using the shortcodes.

Using 360 / 3D views only - do not replace product detail view in WooCommerce

If you do not want to replace the images with the AJAX-ZOOM player but would like to use the AJAX-ZOOM player only for 360-views, follow the steps as shown on screenshots below:

1. Set AJAX-ZOOM plugin setting "enableInFrontDetail" to no.
2. Create a 360 / 3D view and copy the shortcode.
3. Paste the shortcode where you want the item to appear.
4. As a result, on the product detail page, the default view is not replaced and the 360 is placed, e.g., in a tab.

WordPress / WooCommerce 360 / 3D product tour (backend editor)

The 360 "Product Tour" Editor is very easy to use. Simply select areas of interest in your 360 / 3D view and press the Crop button. The editor automatically creates thumbnails of these areas and places them in the gallery of thumbnails. When the user clicks a thumbnail in the frontend, the 360 view rotates and zooms to the selected area. There are several predefined animation options available.

The 360 "Product Tour" is compatible with hotspots. Both support multilanguage texts. Unlike the hotspots, a product tour is done within seconds. It upgrades your "boring" 360/3D product spins and upvalues the overall presentation of your products enormously, almost without any effort.

360 / 3D hotspots (backend editor)

Creating hotspots on 360 spins or even on multi-row 3D is more complex than making a 360-product tour. The main reason is that you need to position a hotspot at every frame where a hotspot supposes to show up. Nevertheless, it is doable, and with a bit of practice, you will be able to create hotspots faster and faster.

Looking on top of the user interface, the features of the hotspot editor may appear limited. But since there are options to define your custom JavaScripts for several actions, the possibilities become limitless. When dealing with the hotspot editor for the first time, please ensure that you are not under time pressure.

AJAX-ZOOM cache batch tool

You do not necessarily need to use the AJAX-ZOOM cache batch tool, because if image tiles and other AJAX-ZOOM caches have not been generated yet, AJAX-ZOOM will process the images on-the-fly. Latest, when they appear at the frontend. However, if you have thousands of images, it is a good idea to batch process all existing images, which you plan to show over AJAX-ZOOM, before launching the new website or before enabling AJAX-ZOOM at frontend.

For the 360 views, you can let the batch tool automatically activate these objects as soon as cache files are ready. You can trigger the process of creating the required cache for images and 360s without the need for the administrator to take any actions after the batch process starts. The batch process recursively traverses multiple folders and their subfolders automatically.

If you do not see the batch tool as depicted in the screenshots below, please update the AJAX-ZOOM core files (axZm folder within the ajaxzoom plugin directory).

Plugin Settings

Set any option you can think of. By the way, it is also possible to set all options for each product individually. At least, this is very handy if you prepare a set of media to be included over shortcode somewhere else on your website.

Themes adjustment tool

Many premium WordPress themes that support WooCommerce functionality do not strictly follow the pattern of the base template, and even not all "actions" are present in the themes. AJAX-ZOOM uses "woocommerce_after_single_product" or "woocommerce_product_thumbnails" to inject the code into the WooCommerce product detail page. After the HTML and JavaScript initialization script are injected using one of those actions, the viewer is appended via JavaScript to the target container using a jQuery selector. The default value of that selector is ".images" (container with CSS class "images") and it is defined in AJAX-ZOOM "appendToContainer" option. You can and should change the value of this option if it differs in your theme.

However, even though this setting is changeable, it could not be sufficient to achieve the expected result. Changing the theme's files is a possibility but not a programmatic one because those changes will be overwritten during the next update of the theme. The workaround solution we offer is the "theme adjustment tool," as depicted below. This tool has many instruments to adjust the layout as needed without changing the code in your theme.

All adjustments you make are specific to a theme name, so you can create adjustments for many themes and enable/disable the adjustments without removing them. The tool already has few adjustments for some themes we had to deal with.

We can claim that the toolset is enough to deal with any possible issues. Admittedly, dealing with more complex tasks, it is not self-evident what to write in there precisely. If there is a need and you have a hard time finding the proper adjustments for your product detail page, please contact our support, providing at least a link to your page.

Frontend screenshots

Product detail page

Frontend detail page screenshots with default settings - Mouseover Zoom is activated. There are several settings to change this into a slider or zoomable area upfront.

Handling regular images

For the regular images, there is no need to do anything. You can upload them as always. However, for product variations, there is a possibility to add any number of images without additional plugins. By default, there is not such an option in Woo.

Handling 360°/3D

To add 360° images, simply start editing a product. There you will find the "AJAX-ZOOM 360" tab with the following possibilities.

• Define one or more 360° spins for the product.
• Upload 360° images right from the backend or
• Select a ZIP file that contains images for a 360° set to import. By default, those ZIP files have to be uploaded in '/js/axzoom/zip/' folder and you can remove them after importing.
• After importing or uploading the images manually, you will be able to make some adjustments for this particular 360°, e.g., change rotation speed and many other options available for AJAX-ZOOM.
• Preview 360° in Fancybox before publishing.
• Activate / deactivate 360° view.
• Select combinations, e.g., the color and size for which a 360° view should be shown. You can add more than one 360° view for a product.
• Create a 360° "Product Tour" with descriptions, videos... No programming knowledge is required.

Requirements

• PHP 5.4+
• Free Ioncube loaders installed on the server.
• ZIP (PHP)
• WooCommerce plugin for WordPress. It is also required if you only want to use AJAX-ZOOM on WordPress posts using shortcodes.
• allow_url_fopen enabled. It is needed for automatic downloading the AJAX-ZOOM main application files and placing them into "/wp-content/plugins/ajaxzoom/axZm". If allow_url_fopen is disabled, you will have to do it manually! For more details see the "Troubleshooting" section on this page.

Installing

You can upload the plugin as depicted in the screenshots below, or you can extract the ajaxzoom folder from the ZIP file and upload this folder into /wp-content/plugins directory. If you chose the second way, please make sure that the /wp-content/plugins/ajaxzoom directory is writable during the activation, and the /wp-content/plugins/pic folder is always writable by PHP.

1. Make sure that the free Ioncube loaders are installed on the server.
2. Switch to Plugins and click on "Add New".
3. Select "Upload Plugin" and upload the file (plugin package) plugin_woocommerce_ajaxzoom_x.x.zip
4. Click "Install Now".
5. Before activating the plugin, please make sure that the /wp-content/plugins/ajaxzoom/pic directory is writable by PHP. Set the corresponding CHMOD if required. The activation will fail with an AJAX-ZOOM error message if /wp-content/plugins/ajaxzoom/pic is not writable by PHP.
6. The activation might take some time because the plugin will try to download AJAX-ZOOM main scripts automatically. If that fails for some reason, download the AJAX-ZOOM core files manually and upload the /axZm folder to /wp-content/plugins/ajaxzoom/ via an FTP client.

Troubleshooting

AJAX-ZOOM has not been downloaded instantly

Please see the installation steps above. Upload AJAX-ZOOM main scripts manually.

AJAX-ZOOM does not work in a different Template / Theme

Please read if AJAX-ZOOM does work in default theme but does not work with a third-party template...

The dynamic output in frontend template is registered over
add_action( 'woocommerce_product_thumbnails', array( 'ajaxzoom', 'show' )) or
add_action( 'woocommerce_after_single_product', array( 'ajaxzoom', 'show' ))

Accordingly the output must be triggered in frontend template by
do_action( 'woocommerce_product_thumbnails' ); or
do_action( 'woocommerce_after_single_product' );

If neither of the two do_action functions is present in the front-end template, then there will be no output, and AJAX-ZOOM cannot be visible.

AJAX-ZOOM is not showing correctly

AJAX-ZOOM is shown but not when you click on the mouseover image

Please check in the browser's developer tools, specifically under network -> XHR tab if the request to zoomLoad.php returns error 500 (server error). That might happen because of wp-content/plugins/ajaxzoom/lic.php, which includes the WP config file that quickly reads the license data entered in the AJAX-ZOOM plugin configuration page at the backend. The error is likely to be present if WordPress has been installed using Bitnami. Rename lic.php file. If AJAX-ZOOM works now, please keep it like that. You can also enter/hardcode licensing information into wp-content/plugins/ajaxzoom/zoomConfigCustomAZ.inc.php without retrieving the values from DB, which is even faster.

No images for variation products

Images are not shown at the frontend

There could be another reason why the AJAX-ZOOM player is loaded, but the images do not show in it. You do see a perpetual loading animation. Enter https://www.your-domain.com/wp-content/plugins/ajaxzoom/axZm/zoomLoad.php in the browser address bar. If the file zoomLoad.php is physically present, but you get an error 404 (not present) or error 500 (server error), the most likely reason is that the folders and / or files permissions (chmod) are set to values, where the group can edit them. On shared hosts, the server's configuration often treats this as not acceptable. Most likely, you will need to set the folders permission level (chmod) to 0755 and the files permission level (chmod) to 0644. Skip the leading zero if you are using an FTP program such as FileZilla.

Optimizer tools

Starting from the plugin's verison 1.1.2, many issues have been improved. The AJAX-ZOOM plugin for WooCommerce was tested with the following optimizer tools:

• WP Rocket (except "Load JS files deferred" enabled)
• WP Super Cache

Other

If you encounter any other troubles, please report/contact our support. We will fix and document them with the highest priority.

FAQ

How to install "ionCube Loader"?

ionCube loader is a widely used PHP extension, and it is required to operate AJAX-ZOOM on your server. Before installing the loader, please check if it is not already installed on your server. To check this, you can look into the output of phpinfo();. You can also use get_loaded_extensions PHP function - print_r( get_loaded_extensions() ); to see if ionCube is installed.

If you do not detect ionCube on your server, please visit the official ionClube loaders page. There you can find "Loader Installer" and "Loader Wizard" packages, which can guide you through the installation process matching your operating system (Windows, Linux, FreeBSD, OpenBSD, OS X, Solaris).

Many hosting companies also have a guide in their FAQ on how to do this specifically for their configurations. Lastly, a mail to your hosting provider's support surely helps. ionCube is industry standard and should be a copy & paste answer for your hosting provider. If not, you should switch your hosting provider immediately.

Please note that each PHP version requires a different loader extension. When your provider offers a possibility to switch between several PHP versions, and you have added the "ionCube" extension via a separate php.ini on your own, please think about updating this php.ini file to link to the appropriate "ionCube" extension file.

Restarting the server (e.g., Apache) might be needed for the new extension to load (changes in php.ini effectively occur).

---

Some shared hosting companies such as "1&1" allow the users without root access to create their custom php.ini files and "install" Ioncube loader this way. However, this custom php.ini has only an effect on the folder whereinto you place it. It has no impact on subfolders, as you might suspect. Therefore, if you are dealing with this method of installing the loader, you must copy your custom php.ini into several folders. If the AJAX-ZOOM module for your system installs itself into, e.g., /modules/ajaxzoom directory, you must place the custom php.ini into /modules/ajaxzoom/axZm/ folder and into, e.g., /admin12345/ folder (or wherever installing the modules takes place).

Do I need a license key to test AJAX-ZOOM module/plugin?

No, AJAX-ZOOM should work out of the box. For some modules/plugins, AJAX-ZOOM does not install itself if the "ionCube" extension is not present on the server (see above). Other than that, there is are limitations on the number of images and image resolution of the demo version. If you would like to test AJAX-ZOOM with higher resolution images ( > 3.2 megapixels / million pixels), please request an "Evaluation" license key for your dev domain or subdomain free of charge.

If you do not have a development server but would like to install the AJAX-ZOOM plugin on your production website, you should go to module/plugin settings and set the "displayOnlyForThisProductID" option. This option allows you to enable AJAX-ZOOM only for specified product ID, so you can test the module/plugin thoroughly without affecting the entire shop / conduct A/B tests.

How to translate the plugin into other languages or change text strings?

The translation of the strings is done via the plugin options and within the AJAX-ZOOM's core PHP configuration file.

1. All plugin options are accessed over the backend. For example, if you want to add Russian translation to the "zoomMsg360" option, which is defined as JSON, you would need to add "key" and "value" to this JSON.

    
{
    "en": "Drag to spin 360°, scroll to zoom in and out, right-click and drag to pan",
    "de": "Ziehen um 360° zu drehen, zoomen mit dem Mausrad, rechte Maustaste ziehen verschiebt die Ansicht",
    "fr": "Faites glisser pour tourner à 360 °, faites défiler pour zoomer dans et hors, cliquer et faire glisser à droite pour vous déplacer",
    "es": "Arrastrar para girar en 360º, Rueda del ratón para utilizar el Zoom, botón derecho para mover la imagen"
}
    

So when you only need English as the default language (please keep it) and want to add a Russian translation string, you would change this option to

    
{
    "en": "Drag to spin 360°, scroll to zoom in and out, right-click and drag to pan",
    "ru": "Крутить 360° левой кнопкой мыши, колесом увеличивать, правой кнопкой смещать zoom"
}
    

2. Some other text strings are located in [ajaxzoom plugin directory] /axZm/zoomConfig.inc.php file, which is part of AJAX-ZOOM core. Open this file in a text editor and find a string you are looking for. For example, you are looking for the "Click to load" message. It is located under $zoom['config']['spinNoInit'] option and looks like this:

    
$zoom['config']['spinNoInit'] = array(
    'enabled' => false,
    'file' => array('en' => 'click_to_load_en.png', 'de' => ''),
    'txt' => array(
        'en' => 'Click to load
360°
 view',
        'de' => 'Klicken um die
360° Ansicht
zu laden'
    ),
    'event' => 'click'
);
    

As you can see, this is a PHP array, and there are several other suboptions located in it. The best way to proceed is to either copy the entire array into zoomConfigCustomAZ.inc.php or copy only the suboption with locales into this file. You can find zoomConfigCustomAZ.inc.php outside of the /axZm folder in the plugin directory.

2a. The below is what you would add to [ajaxzoom plugin directory] /zoomConfigCustomAZ.inc.php file when you copy the entire array and add your translation, removing languages you do not need:

    
$zoom['config']['spinNoInit'] = array(
    'enabled' => true,
    'file' => array('en' => 'click_to_load_en.png', 'de' => ''),
    'txt' => array(
        'en' => 'Click to load
360°
 view',
        'ru' => 'Нажмите мышкой, чтоб загрузить 360° вид'
    ),
    'event' => 'click'
);
    

2b. Or you could just add the suboption to [ajaxzoom plugin directory] /zoomConfigCustomAZ.inc.php file like this:

    
$zoom['config']['spinNoInit']['txt'] = array(
    'en' => 'Click to load
360°
 view',
    'ru' => 'Нажмите мышкой, чтоб загрузить 360° вид'
);

// or

$zoom['config']['spinNoInit']['txt']['ru'] = 'Нажмите мышкой, чтоб загрузить 360° вид';
    

3. There is also a third possibility of adding a translation to strings located in [ajaxzoom plugin directory] /axZm/zoomConfig.inc.php. In the backend, under plugin configuration, you can find "azOptions" and "azOptions360", which allow you to override configuration from [ajaxzoom plugin directory] /axZm/zoomConfig.inc.php related to frontend display. If we wanted to do the same as above over "azOptions360" plugin option (which is saved into the database), the result in your textarea would look like this:

{ "spinNoInit": { "enabled": true, "txt": { "ru": "Нажмите мышкой, чтоб загрузить 360° вид" } } }

Here, we do not need to define English, as the related JavaScript object will get extended by what you define in "azOptions360". The possibility number 2 above (writing into [ajaxzoom plugin directory] /zoomConfigCustomAZ.inc.php) is not applied then.

Changelog

Comments (0)

Leave a Comment