WordPress and WooCommerce

1Plugin defaults

Expand Settings -> WebRotate 360 to access the default plugin configuration. If there will be many product views in your WordPress that will use the same dimensions, configure the default viewer width, height, base width and minimum height as desired (to save time when adding shortcodes for each product view). You can always override these values in your shortcodes. Review the rest of the options on the settings page.

2Embed shortcode

There are currently three types of shortcodes that you can use in WordPress: 1) wr360embed, 2) wr360popup and 3) wr360expand.

wr360embed creates a 3d product view that is embedded inside a page as per the dimensions you specify in the plugin settings in admin or via the shortcode itself.

To test this shortcode, add the following line in your post or page in WP admin under the Text tab or via More options -> "Edit as HTML" or "Code Editor" in recent WordPress releases as per the screenshots above. Change name, width, height and the config parameter as needed. To load a demo product view that was packaged with the plugin, set the config parameter to /wp-content/plugins/webrotate-360-product-viewer/360_assets/sampleshoe/config.xml

[wr360embed name="view1" width="100%" height="500px" config="url-of-the-viewer-config.xml"]

3Responsive height and custom background

There are three optional shortcode parameters for wr360embed:

• basewidth - if the width parameter is relative (%), setting basewidth will force viewer to scale its height responsively (viewer width is always responsive as long as the shortcode width is relative). Basewidth usually represents the width of the viewer on a fully expanded page when viewed via a desktop browser, i.e before responsive rules are applied to the page.
• minheight - if basewidth is set, this setting makes sure the viewer height doesn't go below a certain value such that the 360 product images have enough room on small mobile screens.
• background - hexadecimal color (e.g #000000) of the viewer background for this shortcode. You can use it to match the viewer background color with the background of the WordPress page and/or the background of your 360 degree product images.

Note that you can configure the default values for these parameters under the plugin settings such that you don't have to do this for every shortcode.

[wr360embed name="view2" width="100%" basewidth="620px" height="500px" minheight="300px" background="#000000" config="url-of-the-viewer-config.xml"]

4Popup shortcode

Use wr360popup to load the viewer inside a popup when user clicks on some image, a hyperlink, etc. that is wrapped inside the shortcode. The width parameter can't be relative and have to be configured in pixels - the popup will scale automatically if a browser window is not large enough (e.g when viewed on a small mobile screen).

There are four optional shortcode parameters that can be used with wr360popup:

• gallery - multiple popup shortcodes with the gallery parameter set to true (gallery="true") are combined into a popup gallery with the navigation.
• title - optional title parameter to show additional details for each popup in the gallery (title="My custom title").
• background - hexadecimal color (background="#000000") of the viewer background for this shortcode.
• viewerskin - configurable skin of the 360 product viewer. Supports empty, retina, basic, thin, round, zoom_light and zoom_dark viewer skins (viewerskin="round").

To test this shortcode, add the following line in your post or page in WP admin under the Text tab. Change name, width, height and the config parameter as needed. To load a demo product view that was packaged with the plugin, set the config parameter to /wp-content/plugins/webrotate-360-product-viewer/360_assets/sampleshoe/config.xml

[wr360popup name="view3" width="650px" height="550px" config="url-of-the-viewer-config.xml"]thumbnail or text[/wr360popup]

5Expand shortcode (PRO)

Similar to the popup shortcode, wr360expand activates via a click or tap on some text or image that is wrapped inside the shorcode. It makes the viewer open up in the full-screen mode or take the entire browser window (browserfs="true"). wr360expand ignores all dimensional shortcode properties such as width or height.

Note that if a 360 or 3d product view has dynamic hotspots, you need to uncheck "Create an extra set of fitted images..." on the Publish form in SpotEditor to use it with this shortcode in WordPress. Otherwise, the hotspot indicators will not be correctly positioned when this shortcode is activated.

To test this shortcode, add the following line in your post or page in WP admin under the Text tab. Change name and the config parameter as needed. To load a demo product view that was packaged with the plugin, set the config parameter to /wp-content/plugins/webrotate-360-product-viewer/360_assets/sampleshoe/config.xml

[wr360expand name="view4" browserfs="false" config="url-of-the-viewer-config.xml"]thumbnail or text[/wr360expand]

6Publish and upload your 360 product views

Download our desktop software and publish a 360 product view using your own product images or use our sample images that are linked under additional resources. FTP upload is available in the software or you may upload the published assets to your server manually (via FileZilla, etc). Consider using our optimized PixRiot service to host and manage your spins online for unmatched convenience.

You only need to upload a single folder located under published/360_assets of your published SpotEditor project for each product view. You may also publish multiple 360 product views into a single 'published' location and upload all product views at once.

Once uploaded, note the URL of the configuration file (.xml) in the uploaded folder and then enter a relative URL of the configuration file on your server in the config field of your shortcode.

7Load images from CDN or use master config (PRO)

All shortcodes also support the rootpath parameter that can be used to specify an alternative location of your 360 product images. When it's set in the shortcode, the viewer will prepend rootpath to the relative image location stored in the viewer config xml for each image. This is valuable when you need to host image assets on a dedicated file server or CDN.

The rootpath feature can be also used to load multiple shortcodes via a single (master) config xml that you can set under the plugin settings via Master Config URL, assuming the number of images and their file names are the same across multiple shortcodes. If Master Config URL is configured, you don’t need to specify the config parameter in the shortcodes that share the same config, i.e you would only use the rootpath parameter pointing to the image assets.

[wr360embed name="view5" width="100%" height="500px" rootpath="http://mycdn.com/360_assets/product1/" config="/360_assets/product1/config.xml"]

8API integration

WebRotate 360 Product Viewer includes powerful APIs that can help with various viewer customizations. You can see and test all currently available APIs by publishing your SpotEditor project via the JavaScript API template which you can select on the Publish form.

The API can be integrated with wr360embed and wr360expand shortcodes either by configuring a global callback in the plugin settings in admin or by specifying the callback parameter inside a shortcode itself. The callback receives three parameters: API object, isFullScreen flag and a shortcode name (or WooCommerce SKU), i.e function myCallback(api, isFullScreen, name){}

[wr360embed name="view6" width="100%" height="500px" callback="myCallback" config="url-of-the-viewer-config.xml"]

1Product configuration

Navigate to a product under WooCommerce -> Products in your WordPress admin and expand the WebRotate 360 tab. The tab has two fields (Config File URL and Root Path) as per the following screenshot.

Root Path is optional and is most useful when you plan to re-use the same viewer config file (.xml) for multiple product spins. This is done by specifiying such "master" config via Master Config URL in the plugin settings. Root Path is the URL of a folder that contains published images (e.g /360_assets/product_XYZ/). When both Master Config URL and Root Path are set, you don't need to enter individual Config File URL for each product.

Enter the following demo URL in Config File URL to load a sample 360 product view that we have packaged with the plugin. Similar viewer config file (.xml) is automatically created for each 360 or 3D product view on publish in webrotate's desktop publishing software (SpotEditor) as discussed below.

/wp-content/plugins/webrotate-360-product-viewer/360_assets/sampleshoe/config.xml

2Viewer and Gallery settings

WooCommerce integration will use some of the plugin defaults located on the WebRotate 360 settings page. Please refer to the field descriptions on the settings page as well as the plugin Installation instructions above for more details.

Viewer and gallery dimensions on product pages in WooCommerce are automatically adjusted based on the current WordPress theme and the value of the "Large" image size setting located under Media settings in WP admin.

3Using Elementor?

When using Elementor's Theme Builder for product pages in WooCommerce (via Single Product template), you will need to replace the default Product Images widget with the WebRotate 360 Gallery widget located under WooCommerce in the widget panel:

4Create your own 360 product views

Download our desktop software and publish a 360 product view using your own product images or use our sample images that are linked under additional resources. FTP upload is available inside the software or you may upload the published assets manually (via FileZilla, etc). Consider using our optimized PixRiot service to host and manage your spins online for unmatched convenience.

You only need to upload a single folder located under published/360_assets of your published SpotEditor project for each product view. You may also publish multiple 360 product views into a single 'published' location and upload all product views at once.

Once uploaded, note the URL of the configuration file (.xml) in the uploaded folder and then enter a relative URL of the configuration file on your server under Config File URL.