How to Build a Successful E-commerce Website – Using Astra Theme

What is WooCommerce?

WooCommerce is an open source, completely customisable commerce platform

Why WooCommerce?

• You can sell anything
• There are no limit on products, users and orders
• Built on WordPress
• Documentation 

11.0 How to setup your Ecommerce Website with WooCommerce

Refer How to install Astra theme

Before customization you need to install WooCommerce plugin

1. Go to Plugins > Add New
2. Search for WooCommerce. Install and Activate the plugin
   

Extend WooCommerce

Install additional plugin

1. Flexible shipping (create additional shipping methods and enable pricing calculation based on cart weight) 
   Refer here for documentation
2. Payment gateway plugin (ipay88, PayPal and etc)

WooCommerce Settings

It is about configuring general, products, shipping, payments, account and privacy, emails, integration and advanced settings.

1. Login to WordPress dashboard
2. Go to WooCommerce > Settings

General

Store Address

1. Define your store address country and state

General Options

1. Choose to sell to all countries or specific countries only (can select multiple specific countries)
2. Choose to ship to all countries or specific countries, you can disable shipping and shipping calculation
3. Choose location of site visitor
   No location by default – Tax are no calculated until site visitor provide their address
   Shop base address – assume site visitor in same location as your shop
   Geolocate – verify their current location and calculate tax
   Geolocate (with page caching support) – same with geolocate but geolocate via ajax
4. Enable or disable tax rates and calculations on your store. Disable hide tax settings page
5. Enable or disable coupon on your store
   Enable the use of coupon code – Select to enable the use of coupon in your store
   Calculate coupon discounts sequentially – Change the coupon calculation logic to apply coupon in sequence 

Currency Options

 Currency option affect how price display on frontend

1. Choose only one default currency for store
2. Choose default currency position for price (left, right, left with space, right with space)
3. Choose symbol to use for thousand separator
4. Choose symbol to use for decimal separator
5. Choose number to display after decimal for price (100.00 or 100)

Products

There are 3 sections including General, Inventory and Downloadable products.

General

In General section, there are Shop pages, Measurement and Reviews

Shop pages

1. Select pages you want to be default shop page, it can be not Shop page that WooCommerce install
2. Select ‘Redirect to the cart page after successful addition’ if you want automatic take customer to cart page after they add product
   Select ‘Enable AJAX add to cart buttons on archives’ if you want add ‘Add to Cart’ option to shop archive pages
3. Set default placeholder image to appear on frontend

Measurements

1. Select unit of measurement for both weight and dimension of products in dropdown

Reviews

1. You can enable or disable product reviews.
   If enable, following options shown:
2. Select if want to display reviewer bought the product
3. Select if only allow buyer to leave the review (if disable then anyone can leave the review)
4. Enable star ratings on review
5. Select if star ratings is required but not optional

Inventory 

1. Enable or disable stock management. 
   Enable inventory of product is auto-managed, you enter quantity for product, WooCommerce subtract item when sales made and display, In Stock, Out of Stock or On Backorder 
   Disable inventory and status of product must enter manually

   If enable, following options shown:

2. Hold stock (for unpaid orders) for x minutes.
   When this limit is reached, the pending order will be cancelled.
   Leave blank to disable.
3. Tick the box if want enable low stock/out of stock notification
4. Notification recipient – Enter email address for notification
5. Low Stock Threshold – Number of products left over for low stock notification
6. Out of Stock Threshold – Number of products left over for out of stock notification
7. Out of stock visibility – Tick if want hide out of stock from catalog
8. Stock display format – Can choose always show, only show when low or never show quantity remaining in stock

Downloadable product 

1. File download method – control downloadable files to purchase
   Force downloads – File force to download via PHP script 
   X-Accel-Redirect/X-Sendfile – has better performance and support larger file but need to check with hosting provider whether support
   Redirect only – download URL link user to file and files are not protected from outside access (only used when you encounter problem or don’t mind download is insecure)
2. Access restriction
   – Select if download require login (does not apply to guest purchase)
   – Select if ‘Grant access to downloadable products after payment’ – enable grant access to download when orders are processing instead of completed
3. Filename
   Select if want Append a unique string to filename for security ( it is not require if download directory is protected)

Shipping

There are 4 sections including Shipping zones, Shipping options, Shipping classes and Flexible shipping.

Shipping zones

Add New Zone

1. Go to WooCommerce > Settings > Shipping > Shipping zones
2. Click Add shipping zone
   
   
   
3. Enter Zone name, select Zone regions
4. Select Limit to specific ZIP / postcodes if applicable to narrow down customers that match this zone
5. Click Add shipping method
   
   
   
6. A pop out shown. Choose the shipping method for this zone (Either Flat rate, Free shipping, Local pickup or Flexible Shipping)
7. Click Add shipping method
   
   
   
8. Click Edit below the shipping method
   
   
   
9. After done editing, Click Save changes. The zone is added to Shipping zones.

Shipping options

1. Calculations
   – Enable shipping calculator on cart page
   – Hide shipping costs until address enter
2. Shipping destination
   By default ship to customer shipping address or billing address or only ship to customer billing address
3. Debug mode
   Enable for troubleshooting purpose

Shipping class

Group product of similar types
Use by some shipping method such as flat rate shipping
Help to provide different rate for different class of product

Add shipping class

1. Go to WooCommerce > Settings > Shipping > Shipping classes
2. Click Add shipping class
3. A row appears, enter shipping class name, slug (unique identifier) and description.
   Slug can leave blank and it will auto generate one for you
4. Click Save shipping classes. Shipping class created.
   

Flexible Shipping

To add flexible shipping, Go to Shipping > Shipping zones and add Flexible shipping method to shipping zone
Refer here for documentation

Payments

1. Installed payment gateways are listed and drag and drop is allowed to control the display order on checkout page
   Payment gateways WooCommerce directly install for you
   – Direct bank transfer
   – Check payments
   – Cash on delivery
   – Paypal
2. Click the name of the payment gateway or Click Set up or Manage button can set up and adjust settings of payment gateway
3. Turn payment gateway on or off using Enabled toggle

Accounts & Privacy 

Control customer account and data retention

Guest checkout

1. Select if allow customer to place orders/ checkout without creating an account
2. Allow customer to log into an existing account during checkout – display login form and prompt on checkout page if customer not yet login

Account creation

1. Select if allow customer to create an account during checkout
2. Select if allow customer to create an account on ‘My Account’ page
3. Automatic generate username from customer email – If disable, there will be input box for user to fill in their username
4. Automatic generate account password – If disable, there will be input box for user to fill in their password

Account erasure request

1. Remove personal data from orders on request – If enabled, user data will be removed from orders if it belongs to the user being erased
2. Remove access to downloads – If enabled, download data will be removed if it belongs to the user being erased.
   Erased user no longer access to purchased download

Personal data removal

1. Allow personal data to be removed in bulk from orders – Add bulk action to remove personal data on Orders page

Privacy Policy

This section controls display of website privacy policy. Privacy policy only displays if the privacy page is set.

1. Select page for privacy policy
2. Registration privacy policy – shown on registration form on My Account page (should include information about privacy policy and link to Privacy policy page)
3. Checkout privacy policy – shown on checkout form (should include information about privacy policy and link to Privacy policy page)

Personal Data Retention

Control periods to keep order data when no longer needed for processing. Should specify the periods your site will retain data in privacy policy. 
Enter a number and choose duration from days, weeks, months or years for each option.
Leave blank to disable.

1. Retain inactive accounts – account that not login or place order for a duration of time
2. Retain pending orders – Unpaid or abandoned orders
3. Retain failed orders – Unpaid or abandoned orders
4. Retain cancelled orders – order cancel by admin or customer or timed out waiting for payment
5. Retain completed orders – Completed orders in the past

Emails

Edit email settings and template

Email notifications

Edit Individual Email template

1. Click Manage button on right side and new screen appears
2. Enable / Disable – Select to enable email notification
3. Recipient(s) – Enter recipients email address, comma separated if more than one
4. Subject – Email subject line
5. Email heading – main heading contain in email notification
6. Additional content – add content here
7. Email type (either Plain text, HTML or Multipart)
   If use plain text, text field limited to 155 characters
   Multipart (sending both html and text)
8. Click View Template at right corner to view the template
9. Click Save changes after done editing
   

Email sender options

1. Set “From” name and email address for sender

Email Template

Customize WooCommerce emails

1. Header image – Enter URL of image you want to show in email header
   Upload image through Media > Add New
   After upload, Go to Media > Library
   Click the image upload just now and Get image URL in Copy Link field
   
   
   
2. Footer text – Text shown in email footer
3. Base color – Color for email template
4. Background color – Background color for email template
5. Body background color – main body background color
6. Body text color – main body text color

Advanced

Page Setup

Page need to be set so WooCommerce know where to send users
Cart Page – Page show items in customer’s cart
Checkout Page – Page where customer enter payment information and submit orders
My account page – Page where registered users can view their orders and update their account details
Terms and conditions – Page shows terms and conditions

Cart and checkout page normally created and set when installed WooCommerce

Checkout endpoints

Append in page URL to handle specific actions during checkout.
They should be unique.

Account endpoints

Append in page URL to handle specific actions on accounts page.
They should be unique.
Can leave blank to disable endpoint

WooCommerce Customizer

Can customize Store Notice, Product Catalog and Images without any code.

1. Go to Appearance > Customize
   
   
   
2. Select WooCommerce
   

Store Notice 

Store notice allows you to enter messages and show to everyone that visits your store.
The notice can be informational or promotional (sales or free shipping).

Display Store Notice

1. Go to Appearance > Customize > WooCommerce > Store Notice
   
   
   
2. Enter Message in text area. Check box to Enable store notice.
3. View live preview at your site. Click Publish once done. Your store notice is live now. Visitor can choose to dismiss the notice.
   

Schedule store notice

1. Go to Appearance > Customize > WooCommerce > Store Notice to view current notice
2. Uncheck box for Enable Store Notice
3. Select settings icon. A right panel is open.
4. Select Schedule and enter the date and time you want to start the notice.
5. Select Schedule to make changes to date and time

Product Catalog

1. Go to Appearance > Customize > WooCommerce > Product Catalog

Shop page display 

• Your shop page can show products, categories or both
• Recommend to select one only for clean look
• Select either Products / Categories from dropdown
• Preview your selection in Shop page

Category display 

• You category page can show products, subcategories within a categories or both
• If no subcategories, no difference
• Recommend select one
• Select either Products / Subcategories
• Preview your selection in Category page

Default product sorting

• Control product order viewed on Shop and Category page
• Select one from dropdown
  – Popularity by sales
  – Average rating by customers
  – Sort by most recent (new product add to store)
  – Sort by price (asc) – price from lowest to highest
  – Sort by price (desc) – price from highest to lowest
• Preview in Shop or Category page

Shop Archive Content Width 

• You can select either default or custom width

Layout

• There are 2 shop catalog layouts to choose from

Shop Columns, Product Per Page

• You can adjust shop columns
• Enter Products Per Page 
• Make sure take note on 
  – Product image size
  – Number of products sell
  – Space on computer, laptop and mobile
  – Optimal experience for customers to view and buy

Shop product structure 

• It is shown below product image
  
• There are six of them (Title, Category, Price, Ratings, Short Description and Add To Cart). You can drag and drop to rearrange the order. Click the eye icon at the left for the information to be invisible in the Product Catalog page.
  
  
  
• Check the box to display the page title, breadcrumb and toolbar.
  

Content Alignment 

• You can adjust the content either to left, center or right

Box shadow, box hover shadow 

• You can adjust box and box hover shadow

Product Image Hover Style

• You can select product image hover styles from dropdown.
• There are 4 styles to choose from.
  – Swap images
  – Fade
  – Zoom
  – Zoom Fade

Button

• You also can adjust vertical and horizontal padding of the button.

Pagination

• Can select either number or infinite scroll for shop pagination
• Can select shop pagination style either square or circle
  
  

This is under WooCommerce module for Astra Pro Addon

• Can select Quick View to show On Image, On Image Click, After Summary or Disabled it 
• Check box of Stick Add to Cart Button if you want add to cart button and product details to appear on prompt out.
  

This is under WooCommerce module for Astra Pro Addon

Trigger for Off Canvas Sidebar

• Off Canvas sidebar where the sidebar is moved out off the screen and out of view.
• To make the sidebar appear you need to trigger with a link, button or etc.
• You can select Link, button, custom class or disable it.
• Link
  It appears in 3 line menu
  
  
  
• Button
  It appears as a button
  
  
  
• Custom class
  It help you to place off canvas sidebar in any place you wish but only for shop page
• After enable off canvas sidebar, you need to add widget in it to trigger the sidebar

Add Widget in Off Canvas Sidebar

1. Go to Appearance > Widgets > Off-Canvas Filters
   
   
   
2. Drag the widget you want from available widgets to Off-Canvas Filters
   

• You can enter the Off Canvas Link Text and Check the box to Display Active Filters
  

Colors

• You can change the product title, product price and product content color

Typography

• You can change the typography for product title, product price and product content as well

Single Product

1. Go to Appearance > Customize > WooCommerce > Single Product

Gallery Layout

• You can choose horizontal or vertical layout

Image Width

• You can adjust the image width

Single Product Structure

• Drag and drop to change the display order in Single Product Page. Click the eye icon at left to hide the information in Single Product Page.
  
  
  
• You can enable (uncheck the box) / disable (check the box) breadcrumb in Single Product page
• Check the box to Enable Ajax Add to Cart
  Enable this restrict page refresh when product added to cart
• You can also check the box to enable image zoom effect for single product
  

Product navigation

• You can set different design for product navigation arrows
  – Circle, circle outline, square, square outline 
• This is use when the product have more than one image
  

Product Description Tab

• Check the box to show product description tab
• You can choose to display it in horizontal or vertical

Related & Up Sell Products

• Check box to display related product
• Check box to display up sells (more expensive product)
• You can adjust the column to display the products
• You can choose number of related product to be displayed on single product page

Colors

• You can choose the title, price, content and breadcrumb color

Typography

• You can set the typography for title, price, breadcrumb and content

Product Images

1. Go to Appearance > Customize > WooCommerce > Product Images
   Help you to adjust images in shop and archive page

Main image width

• You can choose the width of main image on single product page

Thumbnail width

• You can choose the width of product image on catalog page

Thumbnail cropping

• There are 3 options given
  – 1:1 (square cropping)
  – Custom (some of the popular aspect ratio -1:1, 5:4, 4:3, 3:2, 16:9 and 3:1)
  – Uncropped (image display using uploaded aspect ratio)

Cart

1. Go to Appearance > Customize > WooCommerce > Cart

• Check the box to enable upsells (show more expensive product)

Checkout

1. Go to Appearance > Customize > WooCommerce > Checkout

Change appearance of WooCommerce Checkout Page

Checkout Form Width

• You can select default or custom width

Company name field

• You can set it as optional, required field or hide it

Address line 2 field

• You can set it as optional, required field or hide it

Phone field

• You can set it as optional, required field or hide it
• Check the box if you want to highlight required field with an asterisk
  

Privacy policy page

• Select privacy policy page you created from dropdown

Terms and conditions page

• Select terms & conditions page you created from dropdown

It is recommend to create both privacy policy and terms and conditions page

Privacy policy

• Add some text to show in checkout page
• Privacy policy page you set will link to text you add in checkout page

Terms and conditions

• Add some text to show in checkout page
• Terms and conditions page you set will link to text you add in checkout page
• Order cannot be placed without checking the required terms and conditions box
  

Two step checkout

• Check this box to enable two step checkout
• Separately display billing details and order section
• first, billing details form appear, then customer can see order summary and proceed checkout 

Display order note

• Check the box to display order note where customer can add note for order
• It is optional for customer to fill in
  

Display apply coupon field

• Check the box to display field to apply coupon
• Appear on top of checkout page
• If customer not yet fill in coupon, there will be prompt out for customer to apply coupon on checkout page
  

Distraction free checkout

• Check this box might override header and footer settings
• Menu in header might disappear in checkout page

Use label as placeholders

• Check this box will display form label as placeholder 
• Help to reduce height of billing form

Persistent checkout form data

• It will retain checkout form field even customer accidentally reload checkout page

WooCommerce Coupon

1. Go to WooCommerce > Coupons
   
   
   
2. Click Create your first coupon if this is your first coupon
   
   
   Or Click Add coupon if you already had coupon in website
   
   
   Add new coupon page shown
   There are three sections available: General, Usage Restriction and Usage Limits
   

General

1. Select Discount type in dropdown list
   There are three types of discount type:
   – Percentage discount – a percentage discount on your whole cart
   – Fixed cart discount – a fixed discount on your whole cart
   – Fixed product discount – a fixed discount on a specific product/s
2. Specify the Coupon amount
   If you’ve picked one of the % options, the number used here will determine the % discount. If you picked a fixed discount, it will determine the amount based on your store’s default currency.
3. If this coupon offer free shipping, check Allow free shipping checkbox
4. Set Expiry date for this coupon from dropdown calendar

Usage Restriction

1. You can set the minimum and maximum spend to use this coupon
2. Check the first and second checkbox if the coupon is restricted to one coupon code per order and the coupon is not applied to sale items — both are recommended.
3. If this coupon is applied to/exclude specific product / categories then add the product / categories
   *It is easy to find product by input first three letters of product or product ID

Usage Limits

1. You can limit how many times your coupon can be used – either per customer or total usage 
2. Click Publish if everything is set.
   

12.0 Insert Products

You can download sample csv file here or create your csv file

Create your CSV

Add one product in wordpress before export it as csv template

Add Product

1. Go to Products > Add New
2. Enter product title and description
3. Enter Product Short Description. This appear next to product image. Long description appear in Description tab.
   
   
   
4. Select Product categories for this product
5. Add Product tags
6. Set Product Image
7. Add additional product image to Product gallery (optional)
8. Click Publish

General

Price

Regular price – Enter item regular price
Sale price – Enter item discounted price (can schedule for certain date)

Inventory

Enable stock management in WooCommerce Settings > Products > Inventory, otherwise only stock status is visible

SKU 

Stock keeping unit
Unique identifier for each distinct product

Manage Stock

• Stock management at product level is disabled
  Updating stock status (either In stock, out of stock or on backorder)
• Stock management at product level is enabled
  Enter stock quantity (WooCommerce auto manage and update stock status)
  Select whether to allow backorders
  Choose a number for low stock threshold notification

Sold individually

Check box to limit one product to be bought per order

Shipping

Weight

• Set weight of the item

Dimensions

• Set length, width and height of the item

Shipping class

• Use by certain shipping methods to group similar products

Linked Products

Upsells

• Product you wish to encourage user to upgrade
• Search for particular product and select from dropdown list

Cross-sells

• Product that relate to user’s cart and display on cart page
• Search for particular product and select from dropdown list

Attributes

1. Select attributes you created from dropdown list (refer Add Attributes to create new attribute)
2. Click Add
3. Select terms
4. Check the box to visible on product page (Uncheck it to hide)
5. Click Save attributes once done. The attribute is added to this product.
   
6. Custom product attribute also can be select and applied
   (if you only want to use this attribute for one product)

Add Attributes

1. Go to Products > Attributes
2. Add Name
3. Add Slug
4. Check box of Enable Archives if you want all products have this attribute
5. Select default sort order from dropdown
   – Custom ordering (reordering value)
   – Name (sort alphabetically)
   – Name (numeric) -> relevant if value are numbers (sort based on numerical value)
   – Term ID
6. Click Add attribute
7. Attribute added to table on right
   
8. Select configure terms to add value
9. Add Name
10. Add Slug
11. Click Add new button. Value added at right table. You can add as many values as you wish for one attribute.
    

Advanced

Purchase Note

Enter optional note to send customer after they purchase the product

Menu Order

Custom ordering position for this product

Export Product CSV file

Create csv template to insert your website products

1. Go to Products in WordPress dashboard
2. Click Export button at the top
   
   
   
3. Export product screen display
4. Select export all columns or select columns to export using dropdown menu
5. Select export all products or select products to export using dropdown menu
6. Select export all categories or select categories to export using dropdown menu
7. Check box to export custom meta (if you need)
8. Click Generate CSV
   
   
   
9. Wait for exporting process to finish. Done.

Import product CSV file

Add new products to website with one upload

1. Go to Products from dashboard
   
2. Click Import button at the top
   
   
   
3. Upload CSV file screen display
4. Click Choose File to select the product CSV file
5. Click Continue
   
   
   
6. Column mapping screen display
   WooCommerce automatic match Column name from your csv to field
7. Use dropdown menu to adjust fields or indicate ‘Do not import’
   Any unrecognized column will not be imported
8. Click Run the importer
9. Import screen display. Wait until import process finish.
   
   
   
10. You are done
    

Set catalog visibility 

Set place for product to be listed

1. Click Edit
2. There are 4 options to choose from
   – Shop and search (visible everywhere)
   – Shop only (visible in shop page and category page)
   – Search results only (visible in search results)
   – Hidden (only visible in single product page)
3. Check box if this is a featured product
4. Click OK button
   

13.0 Add Widgets for sidebar

Widget are functionality that you can add to your sidebar 

1. Login to WordPress dashboard
2. Go to Appearance > Widgets
   

Option 1

1. Drag and drop the widgets from Available Widgets at left side to sidebar at right side
   

Option 2

1. Click widget title dropdown icon on Available widgets at left side
2. Select sidebar from dropdown list to add this widget
3. Click Add Widget button
   

Option 3

1. Go to Appearance > Customize
   
   
   
2. Select Widgets
   
   
   
3. Click sidebar available
   
   
   
4. Click + Add a Widget button
   
   
   
5. You will be able to add available widget from right panel
   
   
   
6. Select and Click one of the widget 
7. Edit it and Click Done. You had added the widget to sidebar. You can view the live preview at right.
   

Tips for Ecommerce Website

14.0 Add Privacy Policy, Shipping Details and Terms & Conditions Page

Privacy Policy

It is recommend to add privacy policy page 

• To inform website visitor that you are collecting their information
• Protect business from legal issues
• Help to build trust
• Comply with General Data Protection Regulation (GDPR)

Simple privacy policy page should contain

• Information you collect about website visitors
• Method you used to collect their information
• Mention third party advertisers that collect information on your website
• Privacy policy links for each advertising program you participate
• How user can block cookies of third party advertisement
• Your contact information

Shipping Details 

Shipping Detail page is required:

• to provide shipping information to your customers after they placed an order on your website
• Answer shipping related questions

Shipping Detail page should contain:

• Shipping cost
• Shipping method and delivery time
• Shipping restriction
• Return and refund policy

Terms and Conditions

Terms and Conditions page is required:

• To protect your business from legal liability
• Protect your intellectual property and trademark
• Explain your payment, pricing term and etc

Terms and Conditions page should contain:

• Limitation of liability
• Intellectual property / trademarks
• Pricing and payment terms
• Dispute resolution

Create Privacy Policy Page

1. Go to Settings > Privacy from dashboard. WordPress already create one draft for you.
   
   
   
2. Click Use This Page button / Click Create New Page button. If using default draft, Click Edit to make changes. In default draft, there are different sections. You need to change accordingly.
   
   
   
3. Click Publish button to save changes

Create shipping details page

1. Go to Pages > Add New. Create your shipping details page
   
   
   
2. Name your page Shipping Details
3. Click Publish when done
   Repeat the same for terms and conditions page

Add Privacy Policy link in footer

1. Go to Appearance > Menus
   
   
   
2. Click create a new menu link on top
   
   
   
3. Provide a name for navigation menu
4. Click Create Menu
   
   
   
5. Select privacy policy page from left column (either find page in Most Recent or View All)
6. Click Add to Menu button
   
   
   
7. Click Save Menu
   
   
   
8. Go to Appearance > Widgets from dashboard
   
   
   
9. Add Navigation Menu to Footer Widget Area
   
   
   
10. Enter a Title for this footer column
    
    
    
11. Select menu you created just now from dropdown list
12. Click Save button. Your privacy policy link appear in footer now.
    Repeat the same steps to add shipping details and terms & conditions link in footer
    You can add this two page to same menu as privacy policy page.

15.0 Insert links for button and contact information

You can use page builder to add a button to a page 
You also can add a button through WordPress classic editor

Add button and button link

1. Edit your page that you want to add button in dashboard
2. Click + icon at the top of the page to add new block
   
   
   
3. Click Buttons under Layout Elements section
   
   
   
4. Add your button text
   
5. Click link icon in toolbar
   
6. Add you url link for this button and Click submit icon at the right
   
   
   
7. Swap the toggle button to right to enable url link Open in new tab
8. You can select button text and background color on right sidebar
   
9. Publish / Update your page

Contact link

1. Go to your contact page
2. Highlight your contact number
3. Click link icon at toolbar
4. Insert link of tel:+60103456789(international format) – Allow visitor to call you directly from website
   Or Insert link of https://wa.me/60103456789 – Allow visitor to send you a message using WhatsApp
5. Click apply icon at the right
6. Publish / Update your page

Email link

1. Go to your contact page
2. Highlight your email address
3. Click link icon at toolbar
4. Link automatically added as mailto:abc@example.com
5. Swap the toggle button to right to enable url link Open in new tab
6. Publish / Update your page

Add custom link in navigation menu or footer

1. Go to Appearance > Menus from dashboard
   
   
   
2. Click Custom Links section
   
   
   
3. Add URL of contact link and Link Text
   
   
   
4. Click Add to Menu button. The contact link display in Menu structure.
5. Select one of the checkbox in Display location to display this contact link
   
   
   
6. Click Save Menu