WooCommerce 360 Image

WooCommerce 360 Image provides you with a way to add a dynamic, controllable 360º image rotation to your WooCommerce site. By adding a group of images to a product’s gallery, you’ll have an image rotation that replaces the product’s featured image.

Installation ↑ Back to top

  1. Download the extension from your WooCommerce.com dashboard
  2. Go to Plugins > Add New > Upload and select the ZIP file you just downloaded
  3. Click Install Now, and then click Activate

For more information on installing and managing plugins see here

Usage ↑ Back to top

After activating the plugin, you’ll find a new meta box on the the edit screen for single products, directly above the gallery meta box on the right side.

The WooCommerce 360 Image meta box
The WooCommerce 360 Image meta box

This is the first step in getting your image rotation set up! Let’s take a look at the available option:

  • Replace Image with 360 Image: You’ll definitely want to check this if you want the normal single product featured image replaced with your new 360 Image one.

Now that the boring part has been taken care of, let’s add some images! Directly below the meta box you’ll want to add some Gallery Images, just like you would normally for a product.

Click that!
Click that!

You’ll then need to add your product’s images. When you’re viewing them within your computers file explorer / finder window, try have them in the correct order you want them to be displayed in (normally this would be alphabetically like product-1.jpg, product-2.jpg, etc. so just keep in the right order) and then upload them in the Media Upload window.

Screen Shot 2014-09-15 at 11.22.04 pm

However, don’t worry! It’s always very easy to manually change the order afterwards or remove a few images if need be.

It's very easy to drag & drop images into order if need be!
It’s very easy to drag & drop images into order if need be!

Save the product and voilà – your image rotator will be displayed!

With the Navigation Controls & Full Screen View enabled
With the Navigation Controls & Full Screen View enabled

Shortcode ↑ Back to top

There is also an extra shortcode you can use – [wc360], to display the image rotator wherever you’d like – be it on the same page as a product or somewhere else like in a blogpost! There is one limitation though and it’s an important one – you can only have one rotator per page.

Here’s what it looks like with all its attributes:

[wc360 id="" width="" height=""]

If you are using it on a single product page and want the rotator for that product, you don’t need to include the ID. So just [wc360] would work, optionally with some dimensions.

However, if you pass in the Product ID, it will display the rotator for that product. Again, dimensions are optional but can be helpful.

Settings ↑ Back to top

There are a couple settings for WooCommerce 360 Image that you may want to take a look at. By default, the navigation control is on but the full screen option is off. They can be found under WooCommerce > Settings > Product > 360 Image:

  • Enable Full Screen OptionThis will add a button to your 360 Image Displays that opens up a full screen view.
  • Enable Navigation ControlsThis will enable the navigation control buttons.
With the default settings in place
With the default settings in place

There are also a few other ‘settings’ that can be controlled by adding in a couple of filters. Long story short, for each of these you can add the attached code to the ‘custom functions’ area of your functions.php file (or use a plugin like Functionality).

Responsiveness ↑ Back to top

To disable responsiveness, use the following:

add_filter( 'wc360_js_responsive', '__return_false' );

Drag / Touch Control ↑ Back to top

To disable the ability to use a cursor / touch to control the rotation, use the following:

add_filter( 'wc360_js_drag', '__return_false' );

Initial Spin ↑ Back to top

To disable the initial spin animation on page load, use the following:

add_filter( 'wc360_js_spin', '__return_true' );

Speed ↑ Back to top

To change the speed of the animation, change 30 to whatever integer you’d like.

Custom Rotation ↑ Back to top

What if you sell a product that needs to be rotated vertically, not horizontally? Or even on a 45 degree angle? No problem!

Try add the following to your custom.css file or with a plugin like Simple Custom CSS:

If you wanted it be rotated 90 degrees the other way, try this:

And how about a full 180 degrees (upside down)? Sure:

You can easily change the numbers in the code above to whatever degree you’d like.

Best Images to Use ↑ Back to top

It’s important to be smart about the images you use in order to get the most out of WooCommerce 360 Image. Things like image order, quality and compression all matter, so unless you’re an experienced 360 degree image photographer, the following may help you out.

How to Take 360º Photos ↑ Back to top

The following guides may help you in taking your photos. Basically, you want to take between 12-36 photos all from even angles. It’s useful to put your product on a platform / disc that can easily be rotated so you don’t have to move the product or the camera for each photo.

Image Compression ↑ Back to top

As you’ll normally be loading in over 15 photos to your rotator, if not more, it’s crucial to get the size of each image down to a minimum. Some tips:

  • Small Dimensions: Don’t make the images bigger than you need. If you’re aren’t using the Full Screen mode, definitely keep them at the size you’ll be displaying them at.
  • Lower Quality: This is the most important step. You can normally do this using Photoshop or any other photo-editing software, but make sure you use a slightly lower quality. It just isn’t needed to use perfect high-res photos unless you are loading your images from a CDN of very fast server.
  • Use a CDN: There are plenty of CDNs (Content Delivery Networks) around that can help you load images from faster servers positioned in locations closer to your users. Did you know that Automattic’s Jetpack even provides free use of the WordPress.com CDN?
  • Image Compression / Optimization: Use a tool or plugin like EWWW Image Optimizer to help reduce the size of the images without hurting the quality.

360º Examples ↑ Back to top

It may be helpful to see some examples of images used in a 360 image rotation (these are not examples of the plugins). Here are a couple:

The following is a zip file you can download containing a few groups of photos to see as an example and use during testing (credit to Rotary View) – Download Sample Images ZIP

Action and Filter Reference ↑ Back to top

Image Size Name ↑ Back to top

By default, it uses the image size shop_single‘s size, that you can set under WooCommerce > Settings > Products in the Product Image Size section. You can filter the image size itself that you’ve added by using the following filter:

Image Size Output ↑ Back to top

The image size that is actually output is by default the full size. This is so the fullscreen output looks best. However, you may not use the fullscreen option! If so, you may want to change this to something else. You can use a filter like this to do that:

Image Content Output ↑ Back to top

There is also a filter for the output of the content itself. This is a basic example of filtering it (but won’t actually do anything new):

Image Shortcode Content Output ↑ Back to top

You may also want to filter the content of the [wc360] shortcode itself. Again, a basic example here:

Before / After Image Content ↑ Back to top

  • This action is for adding something before the normal output: wc360_before_image
  • This action is for adding something after the normal output: wc360_after_image

Before / After Shortcode Image Content ↑ Back to top

  • This action is for adding something before the shortcode output: wc360_shortcode_before_image
  • This action is for adding something after the shortcode output: wc360_shortcode_after_image

FAQ ↑ Back to top

My ‘Sale’ icon isn’t displaying over the image anymore! How do I get it back?

Add the following to your custom.css file or with a plugin like Simple Custom CSS):

span.onsale { z-index: 999 !important; }

What about the featured image?

This should just be a clear image of the product you want to display on archive pages and in Google search results, etc. The 360 Image Rotator only displays on the product’s single page.

It’s not displaying for me at all.. what did I do wrong?

Try switching to the default Twenty Twelve theme (or another WordPress core theme). Is it working then?

If so, I’m afraid it’s a theme-related issue where the theme developer has been a bit naughty and isn’t display the product image correctly. If it still isn’t showing, it may be a plugin conflict. Again, try deactivating all other plugins and see if it works. If so, activate each one-by-one until you find the culprit. Feel free to open up a support ticket and we’ll do our best to fix it up for you though, or at least provide you with the correct information to pass onto the other theme/plugin developer.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top