Lab Report: E-commerce site integrated with a Payment

Gateway.
Part 1: Installing WordPress and XAMPP.

The objective of this part is to set up a local development environment by installing WordPress,
installing XAMPP, configuring Apache, MySQL, and PHP. Additionally, the WordPress dashboard
will be accessed and explored.

Tasks Done:
1. Download and Set Up WordPress

 Download WordPress from https://wordpress.org.

 Extract the WordPress folder and move it to the htdocs directory inside the XAMPP
installation folder.

 Create a new MySQL database using phpMyAdmin.

 Configure wp-config.php to connect WordPress with the database.

 Complete the WordPress installation process by providing site details.

2. Install and Configure XAMPP

 Download XAMPP from the official website (https://www.apachefriends.org/).

 Install XAMPP by following the on-screen instructions.

 Start Apache and MySQL from the XAMPP Control Panel.

3. Access and Explore the WordPress Dashboard

 Log in to the WordPress dashboard using the admin credentials.
 Explore dashboard features such as posts, pages, themes, and plugin

Screenshots:
WordPress installation process:

Download WordPress.
Screenshot of Apache and MySQL running.

Screenshot of XAMPP running.

Screenshot of WordPress setup wizard.

WordPress Dashboard
Part 2: Installing WooCommerce & Creating Categories/Subcategories

The purpose of this part is to install the WooCommerce plugin and set up the foundational
structure for an eCommerce site by creating product categories and subcategories.

Tasks Performed:
1. Install and Activate the WooCommerce Plugin

 Navigated to the WordPress admin panel.

 Went to Plugins > Add New and searched for "WooCommerce".

 Installed and activated the WooCommerce plugin.

2. Run the WooCommerce Setup Wizard

 Completed the WooCommerce setup wizard by providing store details, payment methods,
and shipping options.
 Configured default currency and tax settings.

3. Create Product Categories and Subcategories

 Navigated to Products > Categories in the WordPress dashboard.

 Created main product categories and added relevant subcategories.
 Configured category descriptions and featured images.

4. Add Sample Products Under the Created Categories

 Navigated to Products > Add New.

 Added sample product details, including name, description, price, and images.
 Assigned products to appropriate categories and subcategories.
Screenshots:

Screenshots of the created categories and subcategories.

 Screenshots of the Editing Process:

Observations/Findings:
1. WooCommerce provides a seamless setup wizard for configuring an online store.

2. Categories and subcategories help in organizing products efficiently.

3. Adding products requires proper classification and description to enhance user

experience
Part 3: Adding Simple and Variable Products

The purpose of this part is to learn how to add simple and variable products in WooCommerce by
configuring product details, attributes, and variations.

Tasks Performed:
1. Add a Simple Product
 Navigated to Products > Add New in the WordPress dashboard.
 Entered product name, description, and price.
 Uploaded product images and assigned the product to a category.
 Published the simple product.

2. Add a Variable Product

 Navigated to Products > Add New.

 Selected "Variable product" in the Product Data section.
 Created product attributes (e.g., size, color) under Attributes.
 Enabled "Used for variations" and added values for each attribute.
 Configured product variations with specific pricing and stock management.

3. Set Pricing and Product Descriptions

 Entered relevant pricing for simple and variable products.

 Added short and long descriptions for better product details.
 Reviewed and published the products.

Screenshots:
Screenshots of the simple product configuration.
Observations/Findings:
1. Simple products are straightforward, with only a single set of attributes.
2. Variable products require defining attributes and creating variations for different options.
3. Properly setting up product attributes ensures a better user experience and inventory
management.

Part 4: Configuring Payment

The purpose of this part is to set up payment gateways for the eCommerce site, ensuring a seamless
checkout process.

Tasks Performed:
1. Set Up Payment Gateways

 Navigated to WooCommerce > Settings > Payments.

 Enabled and configured available payment methods (For our Website we use E-Sewa)
 Entered API keys and other necessary credentials for online payment gateways.
 Tested payment processing to verify successful transactions.

2. Test the Checkout Process

 Added products to the cart and proceeded to checkout.

 Selected different payment methods and verified transactions.

 Checked Delivery method selection and ensured correct calculations.

Screenshots:
Screenshots of the payment gateway configurations.
 Screenshots of the checkout process.

Observations/Findings:
1. WooCommerce provides flexible payment gateway integration, allowing multiple
payment options.

2. Shipping zones help customize shipping methods based on customer locations.

3. Testing the checkout process ensures smooth transactions and accurate shipping
calculations.

Part 5: Creating a Contact Us Page with Advanced Form Integration

The purpose of this lab is to create a functional "Contact Us" page using plugins like Contact
Form 7, Mailchimp, and advanced form integration to enhance communication and email
marketing capabilities.

Tasks Performed:
1. Install and Configure Contact Form

 Navigated to Plugins > Add New in the WordPress dashboard.

 Searched for and installed Contact Form

 Created a new contact form and customized fields (Name, Email, Message, etc.).

 Copied the form shortcode and embedded it into the "Contact Us" page.

2. Integrate Mailchimp for Email Marketing and Newsletter Sign-ups

 Installed and activated the MC4WP: Mailchimp for WordPress plugin.

 Connected Mailchimp API with the website.

 Created a newsletter sign-up form and added it to the "Contact Us" page.

3. Use Advanced Form Integration Plugins

 Installed additional plugins to enhance form functionality (e.g., reCAPTCHA, form

validation, auto-responder emails).

 Configured reCAPTCHA to prevent spam submissions.

 Set up automatic email responses for form submissions.

4. Add the "Contact Us" Page to the Website and Test Functionality

 Created a new page titled Contact Us.

 Embedded the Contact Form 7 shortcode and Mailchimp sign-up form.

 Published the page and tested form submissions.

Screenshots:
1. Contact Form Configuration:

Screenshot of form setup with fields and validation.

Screenshot of shortcode placement on the Contact Us page.

 2. Contact Us Page and Functionality:

Observations/Findings:
1. Contact Form 7 provides an easy way to create and manage contact forms.

2. Mailchimp integration allows efficient email marketing and lead collection.

3. Advanced form integrations, such as reCAPTCHA and auto-responders, enhance security

and user engagement.
 Part 6: Finalizing and Testing the Website

The purpose of this lab is to finalize the website and ensure all features are fully functional before
deployment.

Tasks Performed:

1. Test All Website Functionalities

 Reviewed and tested all major pages, including the homepage, product pages, and contact
form.

 Tested the checkout process to ensure successful transactions and order processing.

 Verified form submissions, email notifications, and database entries.

 Ensured mobile responsiveness and cross-browser compatibility.

2. Identify and Fix Issues

 Addressed any broken links or missing elements.

 Optimized website performance and loading speed.
 Tested security settings and user access permissions.
Screenshots:
1. Screenshots of the final website (homepage, product pages, etc.).

Observations/Findings:
1. The website successfully integrates eCommerce functionalities, including product
management and checkout.

2. Testing helped identify minor issues that were fixed before final deployment.

3. Mobile responsiveness and performance optimizations improved user experience.

Conclusion and Reflection:
In this concluding lab session, we rigorously tested and polished all functionalities of the eCommerce
website to deliver a smooth and intuitive shopping experience. The project provided hands-on experience
with WordPress, WooCommerce, and custom plugin integration, particularly focusing on implementing
Nepal's popular Esewa payment gateway alongside standard payment methods.

Key Development Phases:

WooCommerce Setup & Customization

 Configured product listings, cart functionality, and user accounts.
 Enhanced UI/UX with responsive themes and streamlined navigation.

Esewa Payment Gateway Integration

 Integrated Esewa’s API to enable local digital payments, addressing Nepal’s preference for wallet-based
transactions.
 Resolved challenges like SSL certificate requirements and transaction verification callbacks to ensure
secure, real-time payment processing.

Debugging & Optimizatio

 Fixed critical checkout errors (e.g., session timeouts, failed Esewa redirects) through WooCommerce
logs and PHP debugging.
 Improved site performance via caching plugins and image optimization.