How To Use Product Swatches

Welcome to your Ocean eComm Treasure Box dashboard!

The Product Swatches module of your Ocean eComm Treasure Box (Ocean eCommerce) premium plugin empowers you to manage product swatches for your custom eCommerce website.

Product swatches are different versions of the same product. For example, you wish to sell one and the same shirt but in a different color and size. The Product Swatches feature enables you to create different types of swatches for WooCommerce products.

Enable the Product Swatches Feature

To enable and use the Product Swatches feature, navigate to your WP dashboard, open the eCommerce OTB dashboard, and go to the Modules tab.

Click the "cog" icon next to the Product Swatches option to access Product Swatches settings.

Toggle the icon next to the Enable Product Swatches option to enable or disable this feature. Apply desired settings and Save Changes.

Product Swatches consist out of the following settings:

• Disable Out of Stock Variations: this will give the non-clickable look for all product variations that are currently out of stock.
• Product Swatches Archive: display product swatches on archive pages.
• Swatches Customizer Styling: if you're using default WooCommerce product pages with OceanWP (aka you're not using custom templates), you can enable this feature to show up in the Customizer where you'll be able to style your swatches.

How to Use the Product Swatches Feature

By default, WooCommerce allows you to add and define your own product attributes. However, available options are limited to the:

• attribute name,
• attribute slug,
• option to display on archive (shop) page (may also depend on the theme you're using),
• and order of appearance (may also depend on the theme you're using).

In the screenshot example below, only default WooCommerce product attribute options are displayed (Ocean eComm Treasure Box premium addon for WooCommerce is disabled).

The Ocean eComm Treasure Box Product Swatches feature equips you to do more, without using additional plugins.

To utilize the Product Swatches feature, first you need to create an attribute.

1 Create a Product Attribute

Navigate to your WP dashboard, Products > Attributes, create an attribute and assign a slug to it.

Once done, click the Add attribute button.

In this example, we'll create an attribute called "Colors".

2 Edit Product Attribute

Once you save the attribute, the newly added attribute will appear on the attributes list on the side. See example screenshot below.

Hover over the attribute name that you wish to edit until additional options appear under the attribute name.

Click the Edit option.

3 Select Product Attribute Type

When your Ocean eComm Treasure Box plugin is enabled, an additional option will appear within the attribute settings page - an option to select the attribute type. See example screenshot below.

Ocean eComm Treasure Box supports 4 different types of attributes:

• Color,
• Image,
• Button,
• Radio.

In our example, we will select the Color type for our attribute.

Once you've applied the desired attribute type, click the Update button.

4 Add Options to Your Product Attribute

Now that you've created your product attribute, you need to add options (variations) to it.

First, navigate back to the main Attributes page.

From the list of available attributes, click the attribute name you wish to add a variation to.

When you click the attribute name, a new window will appear that will allow you to edit the attribute options. Like in the example image below.

In our case, and for the Colors product attribute example, we need to add:

• name,
• slug,
• choose the correct color that corresponds to the name,
• click the Add new _attribute_name_ button (in our example, the button is called Add new Colors, because our attribute is called Colors).

After you're done creating all desired attributes and their options, you need to add the attribute to a specific product.

5 Add Attributes to Products

Go to your WP dashboard, Products > All Products, and edit the product you wish to add attributes to.

Scroll down to the Products Data section, open the Attributes section and choose your attribute. In our case, we'll select the Colors attribute.

Click the Add button to add the attribute to the product.

Select desirable product attribute values (in our case, those are colors so we'll choose blue and red), check the option to use the attributes for variations and click the Save attributes button.

After that, configure your product variations via the Variations section by adding the price and other info per need.

In our case, we don't need to upload images for our attributes so we'll leave that option blank.

After adding and configuring all the options and data, remember to Update your product.

The variations you configured will display on your single product page for the specific product that is making use of the variations options.

Style Product Swatches for Your Custom Single Product Page Template

If you're using the OceanWP theme's default WooCommerce template, any product with variations will display its variations automatically on the single product page.

If you're building a custom Single Product template via the Ocean eComm Treasure Box Template Builder, then you need to know that the product variations are tied together with the Woo Product: Add to Cart widget for Elementor.

To style variations, navigate to the Style tab of the Woo Product: Add to Cart widget, and use the options under the Variation Swatches for WooCommerce dropdown menu.

That's it!

Enjoy building your custom eCommerce website with OceanWP and Ocean eComm Treasure Box!