360 HD Viewer - Woocommerce (Wordpress) Implementation

WordPress is a popular Content Management System (CMS) that allows their customers to host and build websites rapidly and easily. WordPress has a plugin architecture and a template system that allow web developers to customize any website to fit their business, blogs, portfolios, and online stores. It is worth mentioning that almost 43% of the web is built on WordPress.

WooCommerce is a customizable, open-source eCommerce platform built on WordPress to add the ecommerce functionality to Wordpress websites.

To read more about these platforms, Wordpress and Woocommerces provide complete information on their official websites:

https://wordpress.com/en/

https://woocommerce.com/

In this guide we will implement the Cylindo 360 HD Viewer into a webshop running the Woocommerce and the Wordpress platforms.

1. Install Woocommerce platform

For this tutorial Cylindo’s customers should have the Wordpress platform and the Woocommerce plugin installed in their servers.

If it is not installed, it must be installed following the installation guides provided by Woocommerce and Wordpress on their official sites.

Wordpress installation

https://wordpress.org/support/article/how-to-install-wordpress/

Woocommerce installation

​​https://woocommerce.com/document/installing-uninstalling-woocommerce/

For this example. we’ve installed Wordpress version 6.0.1 and Woocommerce version 6.8.0.

2. Login into the admin panel of the Magento platform

3. Create product Attributes and Terms for the Woocommerce Products

• For this example, we’re parting from the idea that we’ve a product named Emma Armchair. The Cylindo’s Product code is EMMA_ARMCHAIR and this product has 2 Features, Upholstery and Legs.
• Upholstery has 2 options available, Green and Blue, while Legs has 2 options Metal legs and Round legs Oiled Walnut.

So, before we instantiate a viewer instance, we need to make sure that we have the same information stored on both platforms, Cylindo and Woocommerce. We already have the product created on the Cylindo side, so we’ll part from creating the product and its structure in Woocommerce.

It is worth mentioning that In Woocommerce Attributes are the equivalence of the Cylindo Features while the Terms are the equivalence of the Feature Options (Materials) from Cylindo.

It is also worth mentioning that Attributes and Terms have 2 main fields in Woocommerce, Name and Slug, and their equivalences are the Name and Code of the Cylindo Features and Options respectively.

• To create the product attributes in woocommerce we need to open the Attributes panel using the Admin sidebar, the Attributes module can be opened through the Products options from the main menu.

• The module displayed contains 2 panels, the left panel allows us to create a new attribute, while the right panel allows us to see the existing attributes and the terms for the attribute. To create a new attribute, fill the information in the left panel using the Cylindo’s Feature Name as Name and and the Cylindo’s Feature Code as slug, for example in this case we filled the Values for the Upholstery feature:

Important note: By default Woocommerce stores the slugs in lowercase while the Cylindo platform stores them in uppercase, it is not a problem because the Cylindo core converts all codes to uppercase internally so don’t worry about this difference because at the end of the process all codes will use the same structure. It is also worth mentioning that Woocommerce uses hyphens instead of white spaces for the slugs so if the Cylindo platform shows white spaces for your codes please contact the support@cylindo.com account to fix them on our side

• When both features are created, they’re displayed in the right panel so for the next step we need to add the terms by clicking the Configure terms link displayed in Terms column from the table:
  
• In the displayed form, fill the term using the Option name and Code provided by Cylindo:

• When all terms per attribute are set, the right panel will show them in the same way attributes were displayed:

• When all attributes and terms are configured, they will be displayed in the attributes list, like this:

4. Once attributes and terms are created, create a product and apply these attributes to it

• Click the Add new button from the admin panel of Wordpress:

• Fill the form and make sure to select the Product Variable option from the product data dropdown box:

• In the below section make sure to fill the SKU input with the Product code provided by Cylindo:

• In the attributes menu add the global attributes that we’ve created before, Legs and Upholstery. Make sure to select the option Used for variations.
• You also need to select the terms available for this product from the terms list, for this case Metal Legs and Wood Legs for the Legs and Blue and Green for the Upholstery.

• Save attributes by clicking on the button Save attributes and open the Variations menu from the left panel to create the variations.
• To create the variations, use the top dropdown menu and select the option Create variations from all attributes. It’ll create a variation per combination.

• It is up to you if you want to define a default variation.
• Fill the rest of the required fields and then publish the product using the Publish button from the top right corner section.

• When product is created you should see it like this in the PDP:

• Download the ZIP file from the link below and move Cylindo HD 360 Plugin to the wp-content/plugins folder from your implementation.
• https://drive.google.com/file/d/1hAMbOKFryF680bhXDzJ2FMKxJx2B8t4J/view?usp=sharing

• Using the Wordpress Plugins editor or your favorite IDE, modify the file plugins/cylindo-hd-360-viewer/core/index.js file to configure your account ID.

• Go back to the Plugins menu from the main menu of the admin panel and activate the plugin of Cylindo.

• When it is enabled the HD 360 Viewer should be displayed in the PDP:

• When features are changed the viewer should change:

The plugin has been created to be supported by the default themes and the default view of the HD 360 viewer, in case you need to modify it, you should modify the files:

• plugins/cylindo-hd-360-viewer/core/index.js for any changes related to the JS
• plugins/cylindo-hd-360-viewer/core/style.css for any changes related to the CSS

You could also change the way the 360 viewer is created or pass any extra information to the JS core by modifying the file:

• plugins/cylindo-hd-360-viewer/core/functions.php for any changes related to the PHP or the HTML template.

The plugin has been created to override the default gallery from Woocommerce, in case you have already made changes to the PDP you may need to modify the plugin further to get it to work.