How To Build Successful E-commerce Website -Using Astra Theme
Home » Blog » How to Build a Successful E-commerce Website – Using Astra Theme

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

E-commerce also stands for electronic commerce which is a buying and selling process via the internet. The first E-commerce concept is started from the year of 1971 by ARPANET is used to arrange cannabis sales between students. Conversely, the most flourishing moment of E-commerce activities began from the year of 2000, which the giant E-commerce website like Amazon.com, eBay started well establish and posts profit from the online buying and selling activities. Ever since develop an E-commerce website had become popular among corporate and also small business enterprises.

Today, to develop an E-commerce could be as simple as a few steps with the ready theme and plugin available from different frameworks. But, simple and fast development never represents quality. After doing a long research on available theme and framework on WordPress, we had found that Astra theme could achieve our requirement and also well-performing in many aspects. Therefore, we would like to do a sharing step by step on how to create a successful E-commerce website with Astra Theme and Woocommerce plugin. We had separated the contents consist of 3 pages as below:

Current Page: What is Astra and How to Setup Astra theme.
Page 2: What is Woocommerce and How to Setup Woocommerce with Astra Pro Function.
Page 3: Paypal Account Setup.

What is Astra?

Astra is one of the WordPress theme developed by a company from India – Brainstorm Force. Astra theme is free and it was objectively built for speed and focus on performance. It had been recommended by a few famous platforms like wpforms, atheme.com as the fastest theme of the year. Astra theme does have 3 types of Pro options that provide extra features for different types of user or agency. The addition features do come with valuable product bundles such as Ultimate Addons for Elementor, Convert Pro plugin and Schema Pro plugin which really could help to speed up the website development process.

Why Choose Astra?

Lite and fast in speed is the most important criteria that every website should have in order to get a better ranking from search engine especially Google. Following by a list of the benefit of using Astra Theme:

  • cut down development time
  • lighter (improve speed and performance of website)
  • compatible with popular page builder (eg:Elementor)
  • SEO friendly (content that is built based on search engine format)
  • easy for non-programmer to build a website
  • easy to install, upload either through dashboard or ftp
  • simple to find documentation, tutorials
  • compatible with plugin
  • compatible with WooCommerce
  • Can show real time live preview

Table of Contents

1.0 Install Astra Theme
2.0 Install Starter Template
3.0 Prepare Material for Your Website
4.0 Astra Pro Features & Functions
5.0 Header
6.0 Footer
7.0 Typography, Colors, Containers
8.0 Customize Scroll to Top button
9.0 Customize Blog
10.0 Tips to Improve Your Website Performance

Login WordPress Dashboard

Before begin you need to access to one WordPress website.

#1: Add /wp-admin at the end of your website URL.
(eg: https://www.yourdomain.com/wp-admin)

#2: Enter your username and password. Once login you will be redirect to WordPress dashboard.

1.0 Install Astra Theme

#1: Login to WordPress dashboard.

#2: Go to Appearance > Theme > Add New

#3: Search for Astra, Install and Activate it.

install-astra-theme-2

2.0 Install Starter Template

Starter templates provide you with a complete site template. All you need to do is add your content and image.

#1: Go to Plugin > Add New from dashboard

#2: Search for Starter Templates.

#3: Install and Activate it.

install-starter-template-1

#4: After that, Go to Appearance > Starter Templates

#5: Browse through the library and select the template without AGENCY label at the top right corner. This is because Agency template only available for Astra Premium Sites.

install-starter-template-2

#6: You can also click the dropdown to filter the templates.

install-starter-template-3

#7: Click on the template you want and the page below will shown. Preview at the left side will preview the whole site in new tab.

#8: Click Import Complete Site at the right.

install-starter-template-4

#9: A pop-out shown as below, Check all the box and Click Import.

install-starter-template-5

#10: Once the installation is completed, pop out shown as below. Click View Site if you want to view your imported site.

install-starter-template-6

3.0 Prepare Material for Your Website

  • Landing page banner – 1920x1100px
  • Homepage banner – 1920x1080px
  • Logo(white and color) – Small: 180x60px, Big: 360x120px, Vertical: 500x500px
  • About us and contact us banner – 1920x1100px, Sub image:1200x675px
  • Account banner – 1920x1080px
  • Carrying logo – 150x150px
  • Blog image – 1920x1280px

4.0 Astra Pro Features & Functions

Astra Pro Addon is a premium plugin that provides more customization options and features to Astra themes. Astra Pro features consist of the navigation menu, blog layouts, site layouts, WooCommerce, sticky header, page header, more color controls, better typography, custom layouts, scroll to top links, footer widget, header sections, more header designs, and spacing control. There are several packages offered by Astra. The Astra Pro package used here is Agency Bundle Package. Every customization option explained includes features in the Astra Pro package.

price-table-for-astra-pro-theme
Astra Pro Annual Price Table

Install Astra Pro

#1: Download plugin from store that you purchase Astra Pro.

#2: Compress the plugin to store as zip file.

#3: Go to Plugins > Add New

astra-pro-addon-1

#4: Click Upload Plugin.

astra-pro-addon-2

#5: Choose your plugin file in zip format.

astra-pro-addon-3

#6: Click Install Now.

#7: Go to Appearance > Astra Options

astra-pro-addon-4

#8: Activate features below Available Astra Pro Modules as your need.

astra-pro-addon-5

#1: Go to Appearance > Customize from dashboard

edit-header-1

#2: Select Header.

edit-header-2

5.1 Site Identity

Site identity allows you to customize your site logo, icon, title and tagline. Besides, site icon is the favicon of your website. Moreover, site title is typically the name of your site and site tagline is a short phrase/sentence that describes your site. Search engines normally will look at your site title and tagline thus it is important for search engine optimisation (SEO).

#1: Go to Header > Site Identity

#2: You can upload your site logo by clicking Select Logo.

edit-header-3

#3: Check the box of Different Logo for Retina Devices and Upload logo. This is because some devices (Apple device) have high pixels than normal device and normal site logo may appear to be too tiny for them. Check Different Logo for Mobile Devices if you have different logo for mobile device.

edit-header-4

#4: You also can adjust site logo width for different devices by select the device beside Hide Controls.

edit-header-5 edit-header-6

#5: Upload your site icon and the icon will appear in tab.

edit-header-7

#6: Add your site title and Check the box to Display Site Title in Header.
Check the box if you want to Inline Logo and Site Title. You also can adjust the font size of the site title.

edit-header-8

#7: Add your site tagline and Check box to Display Site Tagline. You can adjust the font size as well.

edit-header-9

This is the output of display both site title and tagline in header.
edit-header-10

#8: You also can adjust spacing of site identity.

edit-header-11

5.2 Primary Header

Primary Header allows you to customize header layout, width, border bottom size, border bottom color, mobile header layout, header background color, outside menu item color and header space.

#1: Go to Header > Primary Header

#2: You can choose a layout of header where 3 layouts are provided, width of header either content width or full width, customize border bottom size and color. You also can choose the layout of mobile header, background color of header, outside menu item color and customize header space.

edit-header-12 edit-header-13

5.3 Primary Menu

Primary menu allow you to customize menu, submenu, mobile menu, color, typography and spacing of menu, submenu, mega menu heading.

#1: Go to Header > Primary Menu

#2: Check box of Disable Menu will disable primary menu in header.

#3: You also can select last item in menu from dropdown list (either none, search, button, text/html, widget or woocommerce)
You can check the box to hide last item only for menu in mobile, also can take last item outside menu if you want last item have different layout from primary menu.

edit-header-14

#4: You can select submenu container animation (default, slide down, slide up or fade), adjust container border, border color.

#5: Check the box of Submenu divider if you need which allow you to select the divider color.

edit-header-15

#6: You can adjust the menu breakpoint where when it reach the width you set it automatically become mobile menu, add label beside mobile menu, choose the mobile menu style (dropdown, flyout, fullscreen or no toggle).

#7: This is a toggle button. edit-header-16You can choose its style (fill, outline or minimal) and its color.

#8: You can choose the dropdown target (icon or link), adjust border for menu items.

edit-header-17

#9: You can choose mobile menu border color.

#10: You can choose link/text color and background color for normal, hover and active menu and submenu. You also can select the background image for the normal menu. For mega menu column heading, you can select the color for normal and hover. You can also customize typography and spacing for menu, submenu and mega menu column heading.

edit-header-18 edit-header-19

5.4 Above Header / Below Header

This is Astra Pro Addon feature

#1: Go to Appearance > Customize > Header > Above Header / Below Header

#2: You can choose to merge above / below menu with primary menu on mobile. If you choose to merge, above / below  menu will appear inside the primary header toggle button. If you do not merge, separate toggle for above / below menu appear on mobile.

#3: Swap sections on mobile devices – You can swap section of 1 and 2 on mobile.

#4: Layout – you can display above / below header section inline or stacked on mobile.

edit-header-20 edit-header-21

5.5 Sticky Header

This is Astra Pro Addon feature.

#1: Go to Appearance > Customize > Header > Sticky Header

#2: Check box of Stick Primary Header if need header while scrolling through the page.

#3: Check box of Different Logo for Sticky Header if you want to change the logo for sticky header and upload the logo below Sticky Logo.

#4: Check box of Different Logo for retina devices if have any.

#5: You can adjust the sticky logo width.

#6: Check the box of enable Shrink effect if want the sticky header to be shrink while scrolling.

#7: Check box of Hide when scrolling down if want sticky header to be invisible while scrolling.

#8: You can select animation for sticky header (none, slide or fade).

edit-header-22

#9: You can select place to enable sticky header from dropdown list (desktop, mobile, desktop + mobile).

#10: You can customize elements (header, menu, submenu, mega menu heading, content) color above header, elements (header, menu, submenu, mega menu heading, outside item) color for primary header as well as elements (header, menu, submenu, mega menu heading) color below header.

edit-header-23 edit-header-24

5.6 Transparent Header

#1: Go to Header > Transparent Header

#2: Check this box if want to enable transparent header on complete website. After you check this box, there are more options appear.

edit-header-25

#3: Check the box if you want to disable sticky header on it.

edit-header-26

#4: Choose to enable on desktop, mobile or desktop and mobile.

#5: Check the box if want to enable different logo and upload it below Logo.

#6: Check the box if different logo for retina devices and upload logo below Retina Logo.

#7: You can adjust the logo width as well.

edit-header-27

#8: You also can adjust bottom border size and color.

#9: You can choose background overlay color, normal and hover site title color, normal menu, submenu link / text color and background color; hover menu, submenu link color, content normal text and link color, content hover link color.

edit-header-28

#1: Go to Appearance > Customize > Footer from dashboard

edit-footer-1

#2: Select Footer Widgets

edit-footer-2

6.1 Footer Widgets

#1: You can choose from 7 layouts provided or you do not want any widget.

#2: You can choose the width either content width or full width.

#3: You can adjust the padding and top border size.

edit-footer-3

#4: You can adjust top border color, select background color or background image, select content normal title, text and link color, content hover link color, customize typography of widget title and widget content.

edit-footer-4

6.2 Footer Bar

#1: Go to Footer > Footer Bar

#2: Choose from 2 layouts provided.

#3: In Section 1, you can choose to include either text, widget or footer menu. Normally section 1 custom text will include copyright but you can change as you wish. Section 2 dropdown list is the same as Section 1. 

edit-footer-5

#4: You can custom text in section 2, adjust footer bar width (either content width or full width), adjust border size, select border color, select background color or image, normal content text and link color, hover link color, customize content typography, adjust footer space.

edit-footer-6

7.0 Typography, Colors, Containers

Typography
– Go to Appearance > Customize > Global > Typography. You can customize base typography and headings. Refer here for documentation.

Colors
– Go to Appearance > Customize > Global > Colors. You can customize base colors and content color. Refer here for documentation.

Containers
– Go to Appearance > Customize > Global > Container. Refer here for documentation.

8.0 Customize Scroll to Top button

Scroll to top module on Astra Pro Addon help to add scroll to top action on web page.

#1: Go to Appearance > Customize

add-widgets-for-sidebar-4

#2: Select Global

customize-scroll-to-top-1

#3: Select Scroll To Top.

customize-scroll-to-top-2

#4: You can choose to Display on either Desktop, Mobile or Desktop + Mobile.

#5: You can choose scroll to top to align on left or right of page.

#6: You can adjust the icon size (size of icon font) and border radius (apply rounded border for icon background).

#7: You also can change normal and hover icon color and background color.

9.0 Customize Blog

9.1 Add Blog Post

#1: Go to Posts > Add New

#2: Enter title for your post.

#3: Enter body content of post.

#4: Set a featured image at right sidebar (usually shown on top of post and also is post’s thumbnail image).

customize-blog-1

#5: Add tags and categories for post at right sidebar. Categories more broader while tags more specific. Click Publish if done.

customize-blog-2

9.2 Create Separate Blog Page

By default, WordPress display blog post as home page.

#1: Create one home page and one blog page.

#2: Go to Settings > Reading

#3: Choose A static page as your homepage displays. Choose homepage for Homepage and Choose blog page for Posts page.

customize-blog-3

#4: Click Save Changes at the bottom.

#5: Go to Appearance > Customize

add-widgets-for-sidebar-4

#6: Select Homepage Settings

customize-blog-4

#7: Select A static page for Your homepage displays. Select home page for Homepage and blog page for Posts page.

customize-blog-5

#8: Click Publish after done.

9.3 Customize Blog Post

#1: Go to Appearance > Customize

add-widgets-for-sidebar-4

#2: Select Blog.

customize-blog-6

9.3.1 Blog / Archive

Blog Pro module in Astra Pro add more customization options for blog / archive and single post.

#1: Select Appearance > Customize > Blog > Blog / Archive. Archive page is a collection of posts

customize-blog-7

#2: You can choose either full content or excerpt for post content.
Full content – entire written text in post visible in archive page
Excerpt – display short extract of content, default length is 55 words but you can control the word count to display

#3: You can manage the post structure. You can reorder or hide featured image, title & blog meta, publish date, comments, category, author, tag and read time. To reorder simply drag and drop the items. To hide the item, Click the eye icon at the left. If you hide title and blog meta, meta options disappear too.

customize-blog-8

#4: You can adjust the content width of blog page.

customize-blog-9

#5: You can set typography for Archive title and Post title.

customize-blog-10

9.3.2 Single Post

#1: Go to Appearance > Customize > Blog > Single Post

customize-blog-11

#2: You can choose to display or hide featured image, title and meta by click on the eye icon.

#3: You also can display author information.

#4: It will load previous blog post below current post.

#5: You also can remove featured image padding but only work for Boxed and Content Box container layout.

10.0 Tips to Improve Your Website Performance

10.1 Save Image for Web using Photoshop

Things to take note:
Website speed is important for SEO, thus image need to be optimize before upload so that it won’t affect much on the loading speed of website. First you need to choose right format where colourful image should save as jpeg while transparent image save as png. Next, you need to use image compression tool. We suggest Photoshop where you can save save image for web to reduce file size without reducing the quality of image.

#1: Open your image in Photoshop.

#2: Go to File > Save for Web

prepare-material-save-image-for-web-using-photoshop-1

#3: A pop out shown, Select appropriate format and Click Save. Your image had been compressed.

prepare-material-save-image-for-web-using-photoshop-2

10.2 Add Image Alt Text 

Image alt text is important for search engine to crawl. It appears to describe the image if image fail to load on the webpage.

Take note for image alt text:
You must describe the image specifically, use keywords appropriately but not every single image which might cause keyword stuffing, alt text should not more than 125 characters and no special characters.

#1: Login to WordPress dashboard.

#2: Open post or page to edit the content.

#3: Click on the image to open Image Settings in Block tab of right sidebar.

prepare-material-add-image-alt-text-1

#4: Add appropriate Alt Text and Click Update.

prepare-material-add-image-alt-text-2

#5: Repeat the steps from 3 – 4 for all images in the website.

10.3 Add Heading Tags

Headings for web pages are important for readability and help to add SEO value. It shows the topic of a particular page which helps search engines to find the page easily when people search for it. It also used to differentiate heading and subheading from all the text in content. There are 6 heading tags size. H1 normally used for title of webpage, H2 breaking H1 contents into bits and H3 breaking H2 contents.

Take note for heading tags:
Normally H1 to H3 is sufficient enough for a web page unless the page is text heavy, maintain hierarchy level while using heading tags and don’t skip a level and do not use header tags just only for some text to stand out.

#1: Login to WordPress dashboard.

#2: Open post or page to edit the content.

#3: Highlight the text and Click ‘Paragraph’ options in toolbar.

prepare-material-add-heading-tags-in-wordpress

#4: Pick from six heading tags in dropdown list shown. The text appears as heading now.

10.4 Add Outbound Link

Outbound link is the link that link your website to others website. It is important to increase the trust and quality of the website. There are 2 types of outbound links where Nofollow tell search engine not to follow the link and Dofollow pass ranking power from your website to targeted page.

Things to take note:
Insert relevant natural outbound link into webpage (don’t force link), ensure link open in new tab so that reader can come back to your site later and best to have but not too much (may cause distraction and push visitor away from your site).

#1: Login to WordPress dashboard.

#2: Open post or page to edit the content.

#3: Highlight text and Click icon below in toolbar.
prepare-material-add-outbound-link-1

#4: Toolbar below appears below the text. Click settings icon.

prepare-material-add-outbound-link-2

#5: A pop out shown. Add the url link in URL field. Check box of Open link in new tab. Click Add Link and outbound link created.

prepare-material-add-outbound-link-3

10.5 Check Mobile Version

#1: Go to Appearance > Customize 

#2: Click the mobile icon at bottom. You can view the live preview at right side.

check-mobile-version

#3: Check for every page. Check on this website for mobile-friendly.

To continue reading, click on the page buttons below…

What is WooCommerce?

WooCommerce is an open-source, completely customizable commerce platform from one of the WordPress plugin. Previously, it was developed under one of the WordPress themes – WooThemes, and rapidly growing of eCommerce directly benefit to Woocommerce. Therefore, they become one of the most active plugins from WordPress. In the year of 2015, WooThemes and WooCoomerce were acquired by Automattic as the core contributor to WordPress.

Why WooCommerce?

It was free and open-source. You can sell anything. There is no limit on products, users and orders, it is built on WordPress and documentation provided. Besides that, it had many extensions and plugin contribute by the worldwide programmers to fulfill the needs of the eCommerce environment.

Table of Contents

11.0 How to Setup your E-commerce Website with WooCommerce?
12.0 Insert Products
13.0 Add Widgets for Sidebar
14.0 Add Privacy Policy, Shipping Details and Terms & Conditions Page
15.0 Insert Links for Button and Contact Information

11.0 How to Setup your E-commerce Website with WooCommerce?

Refer How to install Astra theme in page 1.

Before customization you need to install WooCommerce plugin:

#1: Go to Plugins > Add New

#2: Search for WooCommerce, Install and Activate the plugin.

woocommerce

Extend WooCommerce

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

11.1 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

Section 1: General

1.1 Store Address
  • Define your store address country and state.
1.2 General Options
  • Choose to sell to all countries or specific countries only (can select multiple specific countries).
  • Choose to ship to all countries or specific countries, you can disable shipping and shipping calculation.
  • Pick 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
  • Enable or disable tax rates and calculations on your store. Disable hide tax settings page.
  • 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 
1.3 Currency Options

Currency option affect how price display on front end:

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

Section 2: Products

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

2.1 General

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

Shop pages

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

Measurements

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

Reviews

  • You can enable or disable product reviews. If enable, following options shown:
  • Select if want to display reviewer bought the product.
  • Select if only allow buyer to leave the review (if disable then anyone can leave the review).
  • Enable star ratings on review.
  • Select if star ratings is required but not optional.
2.2 Inventory 
  • 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:
  • Hold stock (for unpaid orders) for x minutes. When this limit is reached, the pending order will be cancelled. Leave blank to disable.
  • Tick the box if want enable low stock/out of stock notification.
  • Notification recipient – Enter email address for notification
  • Low Stock Threshold – Number of products left over for low stock notification
  • Out of Stock Threshold – Number of products left over for out of stock notification
  • Out of stock visibility – Tick if want hide out of stock from catalog
  • Stock display format – Can choose always show, only show when low or never show quantity remaining in stock
2.3 Downloadable product 

File download method

  • 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)

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.

Filename

  • Select if want Append a unique string to filename for security ( it is not require if download directory is protected)

Section 3: Shipping

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

3.1 Shipping zones

Add New Zone

#1: Go to WooCommerce > Settings > Shipping > Shipping zones

#2: Click Add shipping zone.

woocommerce-settings-shipping-1

#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.

woocommerce-settings-shipping-2

#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.

woocommerce-settings-shipping-3

#8: Click Edit below the shipping method.

woocommerce-settings-shipping-4

#9: After done editing, Click Save changes. The zone is added to Shipping zones.

3.2 Shipping options

Calculations

  • Enable shipping calculator on cart page
  • Hide shipping costs until address enter

Shipping destination

  • By default ship to customer shipping address or billing address or only ship to customer billing address.

Debug mode

  • Enable for troubleshooting purpose.
3.3 Shipping class

It is used to group product of similar types, use by some shipping method such as flat rate shipping and 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.

woocommerce-settings-shipping-5

3.4 Flexible Shipping

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

Section 4: Payments

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 includes Direct bank transfer, Check payment, Cash on delivery and PayPal. Click the name of the payment gateway or Click Set up or Manage button can set up and adjust settings of payment gateway. Turn payment gateway on or off using Enabled toggle.

Section 5: Accounts & Privacy 

Control customer account and data retention.

5.1 Guest checkout
  • Select if allow customer to place orders/ checkout without creating an account.
  • Allow customer to log into an existing account during checkout – display login form and prompt on checkout page if customer not yet login.
5.2 Account creation
  • Select if allow customer to create an account during checkout.
  • Select if allow customer to create an account on ‘My Account’ page.
  • Automatic generate username from customer email – If disable, there will be input box for user to fill in their username.
  • Automatic generate account password – If disable, there will be input box for user to fill in their password.
5.3 Account erasure request
  • Remove personal data from orders on request – If enabled, user data will be removed from orders if it belongs to the user being erased
  • 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
5.4 Personal data removal
  • Allow personal data to be removed in bulk from orders – Add bulk action to remove personal data on Orders page
5.5 Privacy Policy

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

  • Select page for privacy policy
  • Registration privacy policy – shown on registration form on My Account page (should include information about privacy policy and link to Privacy policy page)
  • Checkout privacy policy – shown on checkout form (should include information about privacy policy and link to Privacy policy page)
5.6 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. Should retain:

  • Inactive accounts – account that not login or place order for a duration of time
  • Pending orders – Unpaid or abandoned orders
  • Failed orders – Unpaid or abandoned orders
  • Canceled orders – order cancel by admin or customer or timed out waiting for payment
  • Completed orders – Completed orders in the past

Section 6: Emails

Edit email settings and template.

6.1 Email notifications

#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 while multipart (sending both html and text).

#8: Click View Template at right corner to view the template.

#9: Click Save changes after done editing.

woocommerce-settings-email-1

6.2 Email sender options

Set “From” name and email address for sender.

6.3 Email Template

Customize WooCommerce emails:

Header image – Enter URL of image you want to show in email header
Steps: 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.

woocommerce-settings-email-2

Footer text – Text shown in email footer
Base color – Color for email template
Background color – Background color for email template
Body background color – main body background color
Body text color – main body text color

Section 7: Advanced

7.1 Page Setup

Page need to be set so WooCommerce know where to send users. Cart and checkout page normally created and set when installed WooCommerce.
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

7.2 Checkout endpoints
  • Append in page URL to handle specific actions during checkout. They should be unique.
7.3 Account endpoints
  • Append in page URL to handle specific actions on accounts page. They should be unique. Can leave blank to disable endpoint.

11.2 WooCommerce Customizer

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

#1: Go to Appearance > Customize

add-widgets-for-sidebar-4

#2: Select WooCommerce.

woocommerce-customizer-2

Section 1: 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).

1.1 Display Store Notice

#1: Go to Appearance > Customize > WooCommerce > Store Notice

woocommerce-customizer-store-notice-1

#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.

woocommerce-customizer-store-notice-2

1.2 Schedule store notice

#1: Go to Appearance > Customize > WooCommerce > Store Notice to view current notice
#2: Uncheck the 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.

Section 2: Product Catalog

Go to Appearance > Customize > WooCommerce > Product Catalog

2.1 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.
2.2 Category display 
  • You category page can show products, subcategories within a categories or both. If no subcategories, there would be no difference. Recommend to select one. Select either Products / Subcategories. Preview your selection in Category page.
2.3 Default product sorting
  • Control product order viewed on Shop and Category page.
  • Select one from dropdown.
    – Popularity by sales
    – Average rating by customers
    – Arranged 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.
2.4 Shop Archive Content Width 
  • You can select either default or custom width.
2.5 Layout
  • There are 2 shop catalog layouts to choose from.
2.6 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 and optimal experience for customers to view and buy.
2.7 Shop product structure 
  • It is shown below product image.
    woocommerce-customizer-product-catalog-1
  • 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.
    woocommerce-customizer-product-catalog-2
  • Check the box to display the page title, breadcrumb and toolbar.
    woocommerce-customizer-product-catalog-3
2.8 Content Alignment 
  • You can adjust the content either to left, center or right.
2.9 Box shadow, box hover shadow 
  • You can adjust box and box hover shadow.
2.10 Product Image Hover Style
  • You can select product image hover styles from dropdown.
  • There are 4 styles to choose from includes Swap images, Fade, Zoom and Zoom Fade.
2.11 Button
  • You also can adjust vertical and horizontal padding of the button.
2.12 Pagination
  • Can select either number or infinite scroll for shop pagination. Can select shop pagination style either square or circle.

Quick View, Stick Add To Cart and Off Canvas sidebar are 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.
    woocommerce-customizer-product-catalog-4
2.13 Off Canvas Sidebar

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 a link, button or etc. You can select Link, button, custom class or disable it.
  • For link, it appears as 3 line menu.
    woocommerce-customizer-product-catalog-5
  • For button, it appears as a button.
    woocommerce-customizer-product-catalog-6
  • With custom class, it helps you to place off canvas sidebar in any place you wish but only for the shop page. After enabling the off canvas sidebar, you need to add a widget in it to trigger the sidebar.
Add Widget in Off Canvas Sidebar (Astra Pro Only)

#1: Go to Appearance > Widgets > Off-Canvas Filters

woocommerce-customizer-product-catalog-7

#2: Drag the widget you want from available widgets to Off-Canvas Filters.

woocommerce-customizer-product-catalog-8

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

woocommerce-customizer-product-catalog-9

2.14 Colors
  • You can change the product title, product price and product content color.
2.15 Typography
  • You can change the typography for product title, product price and product content as well.

Section 3: Single Product

Go to Appearance > Customize > WooCommerce > Single Product

3.1 Gallery Layout

  • You can choose horizontal or vertical layout.

3.2 Image Width

  • You can adjust the image width.

3.3 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.
    woocommerce-customizer-single-product-1
  • 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.
    woocommerce-customizer-single-product-2

3.4 Product navigation

  • You can set different design for product navigation arrows either circle, circle outline, square, square outline. This is use when the product have more than one image.
    woocommerce-customizer-single-product-3

3.5 Product Description Tab

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

3.6 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.

3.7 Colors

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

3.8 Typography

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

Section 4: Product Images

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

4.1 Main image width

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

4.2 Thumbnail width

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

4.3 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) and Uncropped (image display using uploaded aspect ratio).

Section 5: Cart

Go to Appearance > Customize > WooCommerce > Cart. Check the box to enable upsells (show more expensive product).

Section 6: Checkout

Go to Appearance > Customize > WooCommerce > Checkout. Change appearance of WooCommerce Checkout Page.

6.1 Checkout Form Width

  • You can select default or custom width.

6.2 Company name field

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

6.3 Address line 2 field

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

6.4 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.
    woocommerce-customizer-checkout-1

6.5 Privacy policy page

  • Select privacy policy page you created from dropdown.

6.6 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.

6.7 Privacy policy

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

6.8 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.
    woocommerce-customizer-checkout-2

6.9 Two step checkout

  • Check this box to enable two step checkout where billing details and order section is separately displayed. First, billing details form appear, then customer can see order summary and proceed checkout.

6.10 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.
    woocommerce-customizer-checkout-3

6.11 Display apply coupon field

  • Check the box to display field to apply coupon. It 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.
    woocommerce-customizer-checkout-4

6.12 Distraction free checkout

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

6.13 Use label as placeholders

  • Check this box will display form label as placeholder. It help to reduce height of billing form.

6.14 Persistent checkout form data

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

11.3 WooCommerce Coupon

#1: Go to WooCommerce > Coupons
woocommerce-coupon-1

#2: Click Create your first coupon if this is your first coupon.
woocommerce-coupon-2
Or Click Add coupon if you already had coupon in website
woocommerce-coupon-3
Add new coupon page shown. There are three sections available: General, Usage Restriction and Usage Limits.
woocommerce-coupon-4

Section 1: General

  • 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
  • Specify the Coupon amount. If you’ve picked one of the % options, the number used here will determine the % discount. Besides, if you picked a fixed discount, it will determine the amount based on your store’s default currency.
  • If this coupon offer free shipping, check Allow free shipping checkbox.
  • Set Expiry date for this coupon from dropdown calendar.

Section 2: Usage Restriction

  • You can set the minimum and maximum spend to use this coupon.
  • 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.
  • 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.

Section 3: Usage Limits

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

12.0 Insert Products

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

12.1 Create Your CSV

Add one product in wordpress before export it as csv template.

12.1.1 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.
create-your-csv-add-product-4
#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.

Section 1: General

1.1 Price

  • Regular price – Enter item regular price
  • Sale price – Enter item discounted price (can schedule for certain date)
Section 2: Inventory

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

2.1 SKU 

  • Stock keeping unit.
  • Unique identifier for each distinct product.

2.2 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.

2.3 Sold individually

  • Check box to limit one product to be bought per order.
Section 3: Shipping

3.1 Weight

  • Set weight of the item.

3.2 Dimensions

  • Set length, width and height of the item.

3.3 Shipping class

  • Use by certain shipping methods to group similar products.
Section 4: Linked Products

4.1 Upsells

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

4.2 Cross-sells

  • Product that relate to user’s cart and display on cart page. Search for particular product and select from dropdown list.
Section 5: 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.

create-your-csv-add-product-1

#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) and Term ID

#6: Click Add attribute.

#7: Attribute added to table on right.

create-your-csv-add-product-2

#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.

create-your-csv-add-product-3

Section 6: Advanced

6.1 Purchase Note

  • Enter optional note to send customer after they purchase the product.

6.2 Menu Order

  • Custom ordering position for this product.

12.2 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.

export-product-csv-file-1

#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.

export-product-csv-file-2

#9: Wait for exporting process to finish. Done.

12.3 Import Product CSV File

Add new products to website with one upload.

#1: Go to Products from dashboard.

import-product-csv-file-1

#2: Click Import button at the top.

import-product-csv-file-2

#3: Upload CSV file screen display.

#4: Click Choose File to select the product csv file.

#5: Click Continue.

import-product-csv-file-3

#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.

import-product-csv-file-4

You are done

import-product-csv-file-5

12.4 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) and Hidden (only visible in single product page).

#3: Check box if this is a featured product.

#4: Click OK button.
set-catalog-visibility

Widget are functionality that you can add to your sidebar.

#1: Login to WordPress dashboard.

#2: Go to Appearance > Widgets

add-widgets-for-sidebar-1

There are 3 options to add widget sidebar.

Option 1

Drag and drop the widgets from Available Widgets at left side to sidebar at right side.
add-widgets-for-sidebar-2

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.

add-widgets-for-sidebar-3

Option 3

#1: Go to Appearance > Customize

add-widgets-for-sidebar-4

#2: Select Widgets.

add-widgets-for-sidebar-4

#3: Click sidebar available.

add-widgets-for-sidebar-5

#4: Click + Add a Widget button.

add-widgets-for-sidebar-6

#5: You will be able to add available widget from right panel.

add-widgets-for-sidebar-7

#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.

add-widgets-for-sidebar-8

E-commerce Compulsory Page

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

14.1 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 and 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

14.2 Shipping Details 

Shipping Detail page is required to provide shipping information to your customers after they placed an order on your website and answer shipping related questions.

The Shipping Detail page should contain:

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

14.3 Terms and Conditions

Terms and Conditions page is required to protect your business from legal liability, protect your intellectual property and trademark and 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

14.4 Create Privacy Policy Page

#1: Go to Settings > Privacy from dashboard. WordPress already create one draft for you.

privacy-policy-1

#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 so you need to change accordingly.

privacy-policy-2

#3: Click Publish button to save changes

14.5 Create Shipping Details Page

#1: Go to Pages > Add New. Create your shipping details page

shipping-details-and-term-and-condition

#2: Name your page Shipping Details.

#3: Click Publish when done. Repeat the same for terms and conditions page.

14.6 Add Privacy Policy Link In Footer

#1: Go to Appearance > Menus

privacy-policy-3

#2: Click create a new menu link on top.

privacy-policy-3

#3: Provide a name for navigation menu.

#4: Click Create Menu.

privacy-policy-4

#5: Select privacy policy page from left column (either find page in Most Recent or View All).

#6: Click Add to Menu button.

privacy-policy-5

#7: Click Save Menu.

privacy-policy-6

#8: Go to Appearance > Widgets from dashboard

add-widgets-for-sidebar-1

#9: Add Navigation Menu to Footer Widget Area.

privacy-policy-7

#10: Enter a Title for this footer column.

privacy-policy-7

#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 also add this two page to same menu as privacy policy page.

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

15.1 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.

insert-links-for-button-and-contact-information-1

#3: Click Buttons under Layout Elements section.

insert-links-for-button-and-contact-information-2

#4: Add your button text.

insert-links-for-button-and-contact-information-3

#5: Click link icon in toolbar.

insert-links-for-button-and-contact-information-4

#6: Add you url link for this button and Click submit icon at the right.

insert-links-for-button-and-contact-information-5

#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.

insert-links-for-button-and-contact-information-6

#9: Publish / Update your page.

15.2 Contact Link & Email Link

#1: Go to your contact page.
#2: Highlight your contact number / email address.
#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.
Link automatically added as mailto:abc@example.com (Swap the toggle button to right to enable url link Open in new tab).
#5: Click apply icon at the right.
#6: Publish / Update your page.

15.3 Add Custom Link In Navigation Menu or Footer

#1: Go to Appearance > Menus from dashboard

privacy-policy-3

#2: Click Custom Links section.

insert-links-for-button-and-contact-information-7

#3: Add URL of contact link and Link Text.

insert-links-for-button-and-contact-information-8

#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.

insert-links-for-button-and-contact-information-9

#6: Click Save Menu.

To continue reading, click on the page buttons below…

How to Setup Paypal Payment Gateway to your WooCommerce Website?

There are many types of payment gateway services in Malaysia, e.g: ipay88, Senangpay, Razer Merchant Services (Previously known as MOLpay), billplz and etc. But, if your target market is aiming for a worldwide audience, you may consider of Stripe or Paypal as well. In our case, we will take Paypal as an example to show how is the setup to your WooCommerce website to benefit your business.

What is Paypal?

Paypal is owned by PayPal Holding, Inc is an American company provide service for online payment systems worldwide. They are also one of the financial services and online payment methods that allow you to make a secure purchase, transfer money and accept payments. At the year of 2002, they were acquired by eBay, now PayPal had become one of the largest payment gateways in the world.

Why PayPal?

Four principles of PayPal which are they ensure provide world-class security, free return shipping, earn rewards and buyer protection drive Paypal to become the world’s most trusted gateway for most of the online transactions.

paypal-seller-fee-malaysia
Transparent and flexible seller fees offering by PayPal thru different target market.

Table of Contents

16.0 Set Up Payment Gateway (PayPal)
16.1 Get PayPal Identity Token
16.2 Get PayPal API Credentials
16.3 Set Up PayPal Sandbox
16.4 Make Test Purchase
17.0 Check User and Its Order
17.1 View Customers That Made Payment On Website
17.2 View Customer’s Order
17.3 Update User Status

16.0 Set Up Payment Gateway (PayPal)

#1: Go to WooCommerce > Settings > Payments

set-up-payment-gateway-paypal-1

#2: Click Set Up.

set-up-payment-gateway-paypal-2

#3: Check box to Enable PayPal standard.

#4: Set Title shown to customers during checkout.

#5: Add info shown to customers if they select PayPal.

#6: Enter Paypal account email address to receive payment in PayPal email.

#7: Check the box to Enable PayPal sandbox. Refer Set up PayPal sandbox to test payment before going live.

#8: Check Debug log for troubleshooting purpose.

#9: Enter primary address in Receiver email.

#10: PayPal identity token use to verify payment without PayPal IPN. It can provide token to customers so that they can get details of payment process. Refer Get PayPal Identity Token for steps.

#11: Invoice Prefix – initial code to help you identify transaction. Once purchase made, invoice number generated with unique number and prefix. It is useful if you owns more than one online store. By default, prefix is set WC.

#12: Check the box enable shipping details send to PayPal address instead of billing address.

#13: Address override – PayPal verify address thus this settings may cause error. Recommend to disabled.

#14: Choose Payment action.
– Capture – payment from customers process immediately without any verification, save time
– Authorize – you need to authorize payment manually before the payment is finalizing and complete, time consuming and customers easily get annoyed 

#15: Optionally enter name of page style you wish to use. It is defined within PayPal account and affect classic PayPal checkout.

#16: Optionally enter URL to image display as logo in upper left corner of PayPal checkout page.

#17: Enter your Live API username, password and signature. Refer Get PayPal API credentials for steps.

#18: Click Save Changes.

16.1 Get PayPal Identity Token

#1: Login to PayPal account.

#2: Click Settings icon at upper right.

#3: Select Account Settings from dropdown.

set-up-payment-gateway-paypal-3

#4: Select Website payments tab under Products & Services section.

set-up-payment-gateway-paypal-4

#5: Select Update at the right of Website preferences.

set-up-payment-gateway-paypal-5

#6: Select On for Auto return, Enter your website URL in Return URL and Click Save.

set-up-payment-gateway-paypal-6

#7: Select On for Payment Data Transfer. Done.

set-up-payment-gateway-paypal-7

16.2 Get PayPal API Credentials

#1: Login to your PayPal account.

#2: Click Settings icon at upper right.

#3: Select Account Settings from the dropdown.

set-up-payment-gateway-paypal-3

#4: Select Account access tab under Account & Security section.

#5: Click Update at the right of API access.

set-up-payment-gateway-paypal-8

#6: Scroll down the page of payment API credentials.

#7: Search for NVP/SOAP API integration (Classic).

#8: Click Manage API credentials.

set-up-payment-gateway-paypal-8

#9: View or Remove API Signature page display.

#10: Click Show and Copy your API username, API password and signature.

set-up-payment-gateway-paypal-9

16.3 Set Up PayPal Sandbox 

Create PayPal sandbox account to test PayPal processes before going live. Before beginning, you need to create or own one PayPal account.

#1: Open PayPal developer website.

set-up-payment-gateway-paypal-10

#2: Click Log into Dashboard button at top right.

#3: Enter your PayPal account email and password.

set-up-payment-gateway-paypal-11

#4: Click Log In.

#5: Navigate to Accounts under Sandbox.

set-up-payment-gateway-paypal-12

#6: Click Create Account to create sandbox account.

#7: Select Personal (Buyer Account) for Account Type.

set-up-payment-gateway-paypal-13

#8: Select country from dropdown list.

#9: Click Create. The account is created. 

#10: Click … at column of Manage Accounts.

set-up-payment-gateway-paypal-13

#11: Select View/ Edit Account from dropdown.

#12: Account Details prompt out display. You can either use generated Email ID and Password or create new Email ID and Password.

#13: Click Edit in the prompt out if want to create your own email ID and password.

set-up-payment-gateway-paypal-14

#14: You can change your email ID and password.

set-up-payment-gateway-paypal-15

#15: After change, Click Save at the bottom of prompt out.

set-up-payment-gateway-paypal-16

#16: Close the prompt out. Repeat the steps from 6 – 15 for Business (Merchant Account).

set-up-payment-gateway-paypal-17

#17: After that, Go to WooCommerce > Settings > Payments

set-up-payment-gateway-paypal-1

#18: Click Manage button.

#19: Select checkbox of Enable PayPal sandbox.

set-up-payment-gateway-paypal-18

#20: Enter merchant test account email created in Step 16 for PayPal email and Receiver email.

#21: Click Save changes at bottom of page. Now PayPal payment method is in test mode.

set-up-payment-gateway-paypal-19

16.4 Make Test Purchase

Make purchase using buyer test account.

#1: Go to your website. 

#2: Add some products to cart and Click Proceed to checkout.

#3: Fill in your billing details.

#4: Click Proceed to PayPal.

#5: Enter your buyer test account email and password.
set-up-payment-gateway-paypal-20

#6: Click Log In. You are being sent to test store (URL in address bar is www.sandbox.paypal.com ).
set-up-payment-gateway-paypal-21

#7: Click Pay Now button.
set-up-payment-gateway-paypal-22

#8: Click Return to merchant at bottom to complete your order. Checkout page display your Order details, Billing address and Shipping address. You have made payment without real money.

Note: Remember to delete testing order after done testing Paypal, untick Enable PayPal sandbox checkbox and enter real PayPal account email for PayPal email and Receiver email.

17.0 Check User and Its Order

17.1 View Customers That Made Payment On Website

#1: Go to WooCommerce > Customers
check-user-and-its-order-1
#2: View customers list on the right.
check-user-and-its-order-2

17.2 View Customer’s Order

#1: Go to WooCommerce > Orders

check-user-and-its-order-3
The details display include: Order number, Date of Purchase, Order Status and Purchase Total (it might be vary with yours).

check-user-and-its-order-4

#2: Select Screen Options at the top upper right corner to change the details display.

check-user-and-its-order-5

#3: Select the checkbox for columns you want to display and Click Apply button.

#4: Click eye icon to view the order details.
check-user-and-its-order-6
A modal popup display order details.
check-user-and-its-order-7

17.3 Update User Status

#1: Go to WooCommerce > Orders

check-user-and-its-order-3

#2: Click the Status (eg: Processing) / Order number of order you want to change.

update-user-status-1

#3: You will be redirected to Order Details Panel.

update-user-status-2

#4: Select the status you wish to change from the dropdown list. There are 7 types of status available:

  • Pending payment — Order received, no payment initiated. Awaiting payment (unpaid).
  • Processing — Payment received (paid) and stock has been reduced; order is awaiting fulfillment. All product orders require processing, except those that only contain products which are both Virtual and Downloadable.
  • On hold — Awaiting payment – stock is reduced, but you need to confirm payment.
  • Completed — Order fulfilled and complete – requires no further action.
  • Canceled — Canceled by an admin or the customer – stock is increased, no further action required.
  • Refunded — Refunded by an admin – no further action required.
  • Failed — Payment failed or was declined (unpaid) or requires authentication (SCA).
update-user-status-3

#5: Click Update at the right to save the changes.

update-user-status-4

In conclusion, to develop an eCommerce website is not a difficult task. But, choose the right themes is a very important decision shall make before starting the project. Because, after developing, it could let us run our business for at least 3-5 years. Astra theme is one of the themes that can fulfill the requirement of the search engine, especially Google.

Would you like to look for a hand to develop a hassle-free eCommerce website for yourself? Yes, we are willing to help. Here is the available package from us: https://latitudeinnovation.com.my/ecommerce-package/

1 thought on “How to Build a Successful E-commerce Website – Using Astra Theme”

  1. Pingback: How to Make a Good Website in 5 Steps? - Latitude Innovation Sdn Bhd

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top