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 "toggle" button next to the Product Swatches option to enable it, then Save Changes.
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.
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.
- 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).
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.
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.
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.
Enjoy building your custom eCommerce website with OceanWP and Ocean eComm Treasure Box!