How should I display sizes on my products

How should I add different sizes or color to my items that the customer be able to choose whatever color or size they need to select when they purchase?

### WordPress Environment ###

Home URL: https://gigiinc24.com
Site URL: https://gigiinc24.com
WC Version: 2.6.1
Log Directory Writable: ?
WP Version: 4.5.2
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ?
Language: en_US

### Server Environment ###

Server Info: Apache
PHP Version: ? 5.4.42 - We recommend a minimum PHP version of 5.6. See: How to update your PHP version
PHP Post Max Size: 65 MB
PHP Time Limit: 0
PHP Max Input Vars: 1000
cURL Version: 7.45.0
OpenSSL/1.0.1e

SUHOSIN Installed: –
MySQL Version: ? 5.5.43 - We recommend a minimum MySQL version of 5.6. See: WordPress Requirements
Max Upload Size: 64 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 2.6.1
:
woocommerce_sessions: ?
woocommerce_api_keys: ?
woocommerce_attribute_taxonomies: ?
woocommerce_downloadable_product_permissions: ?
woocommerce_order_items: ?
woocommerce_order_itemmeta: ?
woocommerce_tax_rates: ?
woocommerce_tax_rate_locations: ?
woocommerce_shipping_zones: ?
woocommerce_shipping_zone_locations: ?
woocommerce_shipping_zone_methods: ?
woocommerce_payment_tokens: ?
woocommerce_payment_tokenmeta: ?
MaxMind GeoIP Database: ?

### Active Plugins (14) ###

Akismet: by Automattic – 3.1.11
Jetpack by WordPress.com: by Automattic – 4.0.4
Ninja Forms: by The WP Ninjas – 2.9.49
Regenerate Thumbnails: by Alex Mills (Viper007Bond) – 2.2.6
Sidekick: by Sidekick.pro – 2.6.8
Storefront Site Logo: by Wooassist – 1.2.1
Easy SMTP Mail: by priyanshu.mittal – 1.7
Woocommerce Products Slider: by pickplugins – 1.12.3
WooCommerce: by WooThemes – 2.6.1
WP Add Custom CSS: by Daniele De Santis – 0.9.7
WP Mail Logging: by Christian Z?ller – 1.5.2
WP SMTP: by BoLiQuan – 1.1.9
WP101 Video Tutorials: by WP101Plugin.com – 0.3
WPB WooCommerce Product slider: by wpbean – 1.0.7

### Settings ###

Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2

### API ###

API Enabled: ?

### WC Pages ###

Shop Base: #24 - /shop/
Cart: #18 - /cart/
Checkout: #20 - /checkout/
My Account: #22 - /my-account/

### Taxonomies ###

Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

### Theme ###

Name: Storefront
Version: 2.0.4
Author URL: https://www.woothemes.com
Child Theme: ? – If you're modifying WooCommerce on a parent theme you didn't build personally
then we recommend using a child theme. See: How to create a child theme

WooCommerce Support: ?

### Templates ###

Overrides: –

https://www.ads-software.com/plugins/woocommerce/