WordPress (WooCommerce)

1. Plugin Installation

You can install our WordPress plugin from our official GitHub repository:

https://github.com/orbitalvision/ov25-woo-extension/releases/latest

Installation Steps

1. Download the extension zip file (ov25-woo-extension.zip)
2. Navigate to your WordPress admin panel (www.{yourwebsite}.com/wp-admin)
3. Go to Plugins → Add New
4. Click "Upload Plugin" at the top of the page
5. Choose the downloaded zip file
6. Click "Install Now"
7. Activate the plugin

2. Plugin Configuration

Basic Setup

1. From the WordPress admin panel, navigate to WooCommerce → Settings → OV25 in the sidebar
2. Configure the following settings:

API Key Configuration

1. Visit app.orbital.vision/dashboard/api-keys
2. Create a new API key or use an existing one with productConfiguratorAccess type
3. Copy and paste the API key into the plugin settings

Domain Authorization

1. Go to app.orbital.vision/dashboard/authorized-domains
2. Add your website domain to the authorized domains list

Additional Settings

Logo Configuration

• Set your main logo URL
• Set your mobile logo URL

Display Options

• Auto Carousel: Enable to add an image carousel combining WordPress and OV25 images
• Defer 3D: Enable to show WordPress product images until customization begins

Custom CSS

The OV25 UI is styled by default, but this might not match your theme.

Some of the styles may also be overridden by your theme's base CSS - for example if you have CSS that gives all images a background color, this may also affect the OV25 UI.

In the OV25 settings page (WordPress admin → WooCommerce → Settings → OV25), you can add custom CSS to override this and style the UI.

We have added IDs to important elements so you can style them with high-specificity selectors.

#ov25-price-container {
    border-top: 1px solid lightgray;
}

Certain elements also have data attributes - this can be used to style the selected element based on its state.

.ov25-default-variant-card[data-selected="true"] {
    background-color: red;
}

• Variant cards have data-selected attribute (true when variant is selected)
• Option tabs have:
  • data-selected attribute (true when option is selected)
  • data-optional attribute (true when option is optional or has a 'None' value)
• Price has data-sale attribute (true when price is reduced due to a sale)
• Filter section has data-open attribute (true when filters section is open)
• Individual filters have data-checked attribute (true when filter is active)

3. Product Setup

Linking Products

1. Navigate to Products in the WordPress admin
2. Create a new product or edit an existing one
3. In the Product Data section, locate the "OV25 Product ID" field

Product ID Types

You can link two types of products:

Individual Products

Format: 123 (just the product ID)

Product Ranges

Format: range/581 (range/ followed by range ID)

Finding Product IDs

1. Go to app.orbital.vision/dashboard/products
2. For retailers:
   • Select a manufacturer
   • Browse ranges or individual products
3. For manufacturers:
   • Browse your ranges directly
   • Click "View Products" to see individual products