Skip to content
TemplateMela

Free shipping on orders over $50!

TemplateMela

Product variation swatches

Follow these steps to create Product Variation Swatches.

  • Step 1: From the Dashboard, navigate to Products > Attributes
  • Step 2: Fill in the Attribute name (such as Size, Color, Image, etc)

For example, you want to add color attribute to the product then fill in “Color” in “Name” field.

Step 3: You can determines how this attribute’s values are displayed with Type.

You can display your attribute in 3 types:

  • Text
  • Color
  • Image

Set up variation swatches for products

Step 1: From the admin dashboard, navigate to Products > All Products.

Note: If you haven’t created any product, Go to Product > Add New, then fill in all the need information.

Step 2: Select the product you want to set Product variation swatches. At the Product data section, select Product type as Variable product.

Step 3: Choose tab Attributes > Add the attribute you’ve just created

Step 4: Click on each attribute tab to fill in its value by typing in the value you want then hit Add new. Also, put a tick on 2 options that are Visible on the product page and Used for variations. And finally hit Save attributes.

Step 5: Move to tab Variations, click the dropdown menu and choose Create variations from all attributes, click Go.

Step 6: Now you will see all the variations appear based on the product’s attributes. Firstly, select the default variation if you want. Next, select the attribute that you want to show on shop catalog.

Step 7: Click on each variation to set up its image, price, sale countdown, and other details as you want.

Step 8: Finally, click Save changes after you finished all of them. And click Update to save changes to the product.

Getting started

  • Welcome to TemplateMela
  • Theme Requirements

Support

  • My purchase code
  • How to get support

Installation

  • Theme Installation
  • Common installation issues

Build your site

  • WordPress configuration
  • General Settings

Update

  • Before updating
  • Update theme
  • Optimize theme

How to Translate

  • Templatemela Core Plugin
  • Avanam Theme
  • Compare translation
  • Wishlist Translation
  • Product Extras and Payment

Templatemela Settings

  • Shop Page Settings
  • Product Page Settings
  • Welcome Popup
  • Exit Popup
  • Cookie Popup
  • Notification Popup
  • Cross Sell
  • Variation Swatches
  • Product Gallery
  • Advanced Reviews
  • Product Brands
  • Add to Cart Text
  • Variation Options
  • Size Charts
  • Global Tabs
  • Snackbar Style Notices
  • Conditional Cart Banners
  • Checkout Coupon Modal
  • Checkout Editor
  • Extra Category Description
  • Buy Now
  • Sale Countdown
  • Advanced Settings
  • Product Info Service
  • Cart Page Elements
  • Checkout Page Elements

Woocommerce Settings

  • Settings
  • Woocommerce
  • Product Catalog (Shop Page)
  • Product Image
  • Single Product Layout
  • Product Types
  • Checkout Page
  • My Account Layout

Theme options

  • Theme Styling

General

  • Layout
  • Sidebar
  • Images
  • Scroll To Top
  • 404 Page Layout
  • Comments
  • Breadcrumbs
  • Social Links

Set up header

  • Top bar
  • Main row
  • Bottom row
  • Html and Html2
  • Logo
  • All navigation
  • Cart
  • Button And Button-2
  • Search
  • Social
  • Account
  • Widget Area
  • Search Bar And Search Advance
  • Contact
  • Toggle Widget Area
  • All Divider
  • Vertical Menu

Set up footer

  • Top-bar
  • Main-row
  • Bottom-row
  • Copyright
  • Footer Navigation
  • Social
  • Widget Area

All Breadcrumbs

  • Product Cataloge(Shop Page)
  • Single Product Layout
  • Page Layout
  • Single Post layout
  • Archive Layout(Blog Listing)
  • Search Results

E-commerce features

  • Product variation swatches
  • Sticky filter bar
  • Add To Cart Behavior
  • Catalog Off Canvas Sidebar
    • Catalog Off Canvas Sidebar Setting
  • Infinite Scroll

Mega menu

  • Menu Settings
  • Mega Menu

Dark Mode Toggle

  • General
  • Header Toggle
  • Footer Toggle

Plugins

  • Mailchimp
  • Contact Form 7
  • Slider Revolution
  • Product compare
  • Product wishlist
  • Product quick view

Additional

  • Page Settings
  • Widget Settings
  • Blog Posts

© 2025 WordPress Documentation - TemplateMela - WordPress Theme by Avanam

Scroll to top
  • Before updating
  • Catalog Off Canvas Sidebar Setting
  • General
  • Getting started
  • How to Customize Product Look (Product Cards) on Shop Page
Search