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: http://gigiinc24.com
Site URL: http://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://wordpress.org/plugins/woocommerce/