Blog – Maham Batool

Making your WordPress website turn into a business is not a cumbersome task. Here in this tutorial, I’ll be sharing with you a step-by-step guide by following which you’ll be able to set up an eCommerce site very easily.

💻 Prerequisites

Before actually digging into the guide there are a few essentials that need to be fulfilled.

Buy a relevant domain name for your eCommerce website.
Find a web hosting provider.
Install WordPress.

I will not be going into details on these prerequisites, if you want to learn more about them then you can search it up. For this tutorial, I’m assuming that you already have done the above steps.

💯 WooCommerce

E-commerce offers a great deal of revenue potential. Choosing the right platform is a key factor. WordPress is known for its ease of use even for non-programmers, and this is also the case with WooCommerce.

WooCommerce is a WordPress plugin that helps you create, manage, measure, and maintain an online store without any difficulty or getting your hands dirty with code.

WooCommerce is a free and open-source WordPress plugin that provides an ultimate solution to all e-commerce businesses. Even if you do not know much about the technical side of things, you can still enjoy a lot of flexibility in selling your products with WooCommerce. To add ease to the user experience, the layout is very simple.

One of the key benefits of WooCommerce is its ability to track customers’ behavior, predict trends, and analyze your marketing efforts accurately and comprehensively.

This guide will help beginners set up their own e-commerce store, so without further ado let’s dig into that.

Install & Activate WooCommerce Plugin

Once you have installed WordPress, follow the below steps for installation and activation of the plugin.

In your WordPress dashboard, click on Plugins, followed by Add New.
Type in ‘WooCommerce’ in the search bar and click on the Install Now button. After clicking you’ll see installing written on that icon and after a few minutes, it will disappear indicating that the plugin has been installed successfully.

After installing you need to Activate the plugin by clicking on the activate button.

Setting Up WooCommerce Plugin

Once you have installed and activated the plugin, it will appear on the left side of your WordPress dashboard.

After reading the basics you will be directed to the Home page where the real selling will start after filling in the necessary details. The below image shows six of the mandatory steps that need to be set up for your online store. Let’s discuss them in this article.

Store Details

Upon clicking the store details, a welcome to WooCommerce page will pop up. Firstly, you need to fill in the basic information for your online store e.g address, country, email, etc. After filling in this information click continue and fill in the other necessary details asked for your store.

Industry

After clicking continue you’ll be taken to the industry section where you have to mention that your online store will target which sector e.g education, health, beauty, or other, etc. You can check more than one checkbox. If your store doesn’t fall under any sector then check the other checkbox and write a description for your store.

Product Types

After clicking on the continue button you move on to the Product Types section. Here you’ll be asked to choose the types of products you’ll be selling in your store.

If your selling product requires shipment then choose Physical Product. Other than that, you can also choose other options like downloads, etc depending on your product.

Click continue to move on to the next section.

Business Details

After you finish with product types, you have to fill in details about your business.

Choose the option best suited to your business and Continue.

After continuing you’ll be taken to the Free Features section that you can see right next to the business details written.

You’ll see a box pre-checked to install free features for your website stating Add recommended business features to my site. You need to uncheck this option as it will install several other WooCommerce extensions that you may not need. If you need them later, then you can always install them on your own.

Click on the Continue button for the next step.

Theme

Next, you have to choose a theme for your online store. You can continue with your current default theme, choose Storefront, Deli, Boutique, or any of the free options listed on the page. You can also go for paid themes or upload a theme you like for your store.

Woohoo!! You have now successfully completed the basic WooCommerce setup.

Add Products

After the basic setup, you are ready to start adding products to your online store and start the selling process.

Go to your dashboard and click WooCommerce, you’ll see that the Store Details checkbox has been checked since you completed setting it up. The next click on to Add My Products and begin with adding products to your store.

Next, a section will appear where you’ll be asked to start with a template that is recommended, or you can choose other options as well.

By clicking that you’ll be taken to the add new product section. You’ll have to give your product that you’ll be selling an adequate name which the people will refer to.

Next, you’ll be asked to describe the product you’ll be selling by writing a small product description here as shown in the image below.

Product descriptions play a vital role when it comes to online buying the product as the customers cannot physically see the product, so they rely fully on the product’s description whether to buy or not.

Choosing Product Type is the next step to follow.

You have to choose the right type for your product. Click the scroll-down menu and a list of options including simple product, grouped product, external/affiliate product, variable product, simple or variable subscription, options will appear.

Right next to the product data you’ll see two checkboxes labeled as virtual and downloadable.

If your product doesn’t require any shipment then check the Virtual checkbox.

And if, your product is based on downloading some files then check the Downloadable box otherwise leave both the options.

You are doing all this drill just to make money online by selling your product, so without mentioning the price of your product you won’t be able to sell any item.

WooCommerce helps you put two price tags for the same product i.e regular and sale price. You can also schedule your sale price.

After this, you will have to write down a short description of your product here as shown in the image below.

Now that you have assigned a price to your product and also have described it, you need to upload an image of your product too. This image will be shown in your store catalog. Here is how you can set your product image.

If you want your customers to find your product then it is recommended to add tags related to your product. Adding Product Tags is optional but highly recommended.

Next, you have to add categories to your product so that it becomes easy to search it up. You can add the category here as shown in the image below.

The last and final step is to publish your product by clicking on the publish button.

Here is a demo product for you that I created while following the above steps. Hope it helps!

Set Up Payments

After adding products to your online store you need to visit your WooCommerce home in your dashboard and then you’ll see the first two options been checked as you completed it. Now you need to work on other available options.

In this guide, I’ll be helping you out with the basics things that will help beginners to start selling their products online. So, the next step is to set up a payments method.

With WooCommerce Payments, you can securely accept major cards, Apple Pay, and payments in over 100 currencies. Track cash flow and manage recurring revenue directly from your store’s dashboard – with no setup costs or monthly fees. Other than that you can also choose other payment methods like Paypal, Stripe, etc.

Set Up Tax

Once you’re done with payments repeat the same steps i.e go back to the home section of WooCommerce and there click Set Up Tax. Whenever you are into any business then paying taxes is a must. To avoid problems later on, WooCommerce provides solutions in the beginning.

Set Up Shipping & Marketing Tools

Selling your product is not a big deal, but what comes with it can cause problems if not taken care of. Yes, I’m talking about delivering the product to the customer. When you are selling the product online then it is considered mandatory to deliver that product at the customer’s doorstep too. Otherwise, why would people opt for online shopping if they’re not getting the product where they want.

For this purpose, WooCommerce helps you with the entire shipment process. In the Home section of WooCommerce click set up shipping and fill in the details to run the process smoothly while you sit at your home.

If you have completed the above steps then Good Job!

All these steps will not be of value if you just create an online store and not market it well. For that, the next step is to set up the right marketing tools, so that more people will see your product and buy it.

Again in the home section, you will find this option and get started with the one you are more comfortable with.

Personalize My Store

The last step to follow is to personalize the store that you create. This includes uploading a logo for your business, creating a custom homepage, etc.

Extensions

Once you have followed these steps, as a beginner you would want some more features. For that, you can install any extension that you require. In your WordPress dashboard, go to the extension’s icon in the left bar and click it.

You can either go for free extensions or paid whatever you like.

The most popular is to get started with Jetpack. It is recommended to avoid any security issues that can affect your store.

I will highly recommend that for beginners, setting up Jetpack can really up your online store game.

🙌 Wrapping Things Up!

If you are a newbie and have little or no tech knowledge and want to become an e-merchant, WooCommerce is there to save your day. By following these step-by-step guide you will be able to create an online store and sell your products efficiently.

If you have any questions feel free to reach out in the comments section below.

Peace. ✌

Create Animated Forward Arrows with CSS3 Animations

By Maham Batool

On February 24, 2022

In General

Learning never stops especially when it comes to web development, knowledge is never enough. Every single day I see myself learning new things. If you think that getting a degree in computer science or taking that famous web development Bootcamp will make you a pro in the field then my friend you are wrong.

While doing any new side project I always end up creating something new that I had no prior knowledge of. This I feel is the fastest way of learning and gives me a lot of confidence.

Just like this, one day while working on a project I was looking for a pre-built forward arrow feature online. I was unable to find it so ended up coding one for myself. While looking for an online service for creating simple animations to formulating one in less than 1 hour for myself that fitted the requirement of my project, gave me an adrenaline rush.

I am super excited to share with you how I created the animated forward arrows feature with CSS3 animation keyframes. It’s simple to create and use in your website’s design.

Happy Learning!

Project

Here’s what you’ll be making by the end of this tutorial:

HTML

First, let’s write the basic HTML for this project.

<!-- HTML Code for Animated Forward Arrows -->
<p>A simple representation of animated forward arrow!</p>

<div id="ForwardArrow">
  <div class="GlidingArrow">
    <div class="arrow"></div>
  </div>
  <div class="GlidingArrow delay1">
    <div class="arrow"></div>
  </div>
  <div class="GlidingArrow delay2">
    <div class="arrow"></div>
  </div>
  <div class="GlidingArrow delay3">
    <div class="arrow"></div>
  </div>
</div>

I added a div with the id called ForwardArrow. This div is responsible for creating all the forward arrows elements. Inside this div id, I added four div classes with another class of arrow inside the main div class elements, each representing a single arrow.

CSS Styles

Let’s first style our basic elements. The below code block defines the optional CSS styles for the p tag and the body to make your final project appealing to the eyes.

/* OPTIONAL: Styles for the demo. */
body {
  background: #ffc40c;
  padding: 2rem;
}
p {
  font: 1rem/1.45 "Operator Mono";
  color: black;
  text-align: center;
}

Styling #ForwardArrow Id

Next, I styled my arrows with the following properties:

/* CSS for animated Forward Arrows.*/
#ForwardArrow {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

I used the flexbox (i.e., display: flex;) property to place the animated forward arrows in the middle of the page both horizontally and vertically.

.arrow {
  width: 2vw;
  height: 2vw;
  border: 2vw solid;
  border-color: black transparent transparent black;
  transform: rotate(-225deg);
}
.GlidingArrow {
  position: absolute;
  -webkit-animation: slide 5s linear infinite; 
          animation: slide 5s linear infinite;
}
.delay1 {
  -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}
.delay2 {
  -webkit-animation-delay: 3s; 
    animation-delay: 3s;
}
.delay3 {
  -webkit-animation-delay: 4s; 
    animation-delay: 4s;
}

To create an arrow I have given a constant viewport width i.e 2 vw for width, height, and border in the .arrow class. The transform property rotated the arrow in the direction I wanted. You can play around and see what happens when you change the values.

The most interesting part here is the animation property. I am using WebKit animation property to create multiple animations with prescribed delays. The first arrow runs once in 2s and repeats itself infinitely, the third after 3s and so. I am using this delay property so that each element does not start to animate at the same time.

Creating Animation Keyframe

Keyframes are used to define the animation behavior and give us complete control of one cycle of a CSS animation. To create an animation, I used the -webkit-animation in conjunction with the @-webkit-keyframes keyword/at-rule, which allowed me to define visual effects in my animation.

If you want several animation transitions, you can define a range of percentages each containing a list of styling selectors. That’s what I did inside the @keyframe.These percentages can be listed in any order and with any difference between them. A simple representation of these percentages is shown below.

Let’s now write the code for the keyframe which I wrote to create my Forward Arrows Animation:

@-webkit-keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); }	
   20% { opacity:1; transform: translateX(-9vw); }	
   80% { opacity:1; transform: translateX(+9vw); }	
  100% { opacity:0; transform: translateX(+15vw); }	
}
@keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); }	
   20% { opacity:1; transform: translateX(-9vw); }	
   80% { opacity:1; transform: translateX(+9vw); }	
  100% { opacity:0; transform: translateX(+15vw); }	
}

To create the moving effect, I used the CSS transform property to change the coordinates of a given element hence transforming the location of each arrow.

With this transform property, I’ve used the translateX() function which takes one input repositioning an element horizontally on the 2D plane.

The Final Product

Here’s the complete code of this animated Forward Arrows:

HTML Code

<!-- HTML Code for Animated Forward Arrows -->
<p>A simple representation of animated forward arrow!</p>

<div id="ForwardArrow">
  <div class="GlidingArrow">
    <div class="arrow"></div>
  </div>
  <div class="GlidingArrow delay1">
    <div class="arrow"></div>
  </div>
  <div class="GlidingArrow delay2">
    <div class="arrow"></div>
  </div>
  <div class="GlidingArrow delay3">
    <div class="arrow"></div>
  </div>
</div>

CSS Code

/* OPTIONAL: Styles for the demo. */
body {
  background: #ffc40c;
  padding: 2rem;
}
p {
  font: 1rem/1.45 "Operator Mono";
  color: black;
  text-align: center;
}

/* CSS for animated Forward Arrows.*/
#ForwardArrow {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrow {
  width: 2vw;
  height: 2vw;
  border: 2vw solid;
  border-color: black transparent transparent black;
  transform: rotate(-225deg);
}
.GlidingArrow {
  position: absolute;
  -webkit-animation: slide 5s linear infinite; 
          animation: slide 5s linear infinite;
}
.delay1 {
  -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}
.delay2 {
  -webkit-animation-delay: 3s; 
    animation-delay: 3s;
}
.delay3 {
  -webkit-animation-delay: 4s; 
    animation-delay: 4s;
}

/* Defining animation Keyframes */
@-webkit-keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); }	
   20% { opacity:1; transform: translateX(-9vw); }	
   80% { opacity:1; transform: translateX(+9vw); }	
  100% { opacity:0; transform: translateX(+15vw); }	
}
@keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); }	
   20% { opacity:1; transform: translateX(-9vw); }	
   80% { opacity:1; transform: translateX(+9vw); }	
  100% { opacity:0; transform: translateX(+15vw); }	
}

About a week ago, I conducted my first workshop. It was an excellent experience. I spent months planning how I can help the local community of Civil Engineers (especially female engineers) here in Pakistan. I’m quite passionate about structural & interior designing — so as you can imagine AutoCAD is one of my favorite tools.

🔥 AutoCAD On Web 2019 | News Flash

By Maham Batool

On November 9, 2018

In General

AutoCAD is an essential software not only for engineers and designers but also for common people. Now one doesn’t need to install the whole software. We can access AutoCAD from our web browser. 💻

If you forgot your laptop at home in which you have installed AutoCAD, and you want to create new designs then nothing to worry about💯. As now Autocad web application 2019 allows one to create, view and edit designs without installation of the whole software. Just type web.autocad.com, and you get access to the software.

With the help of AutoCAD mobile app, you can create, view, edit and even share CAD drawings with anyone 📱. Now people working on site doesn’t need to carry the burden of those enormous number of drawings with them as all of them are available by just a click of a button. Further, internet connection is also not vital as once you have downloaded the file you can work without internet connection as well. With this new version, you can access your files from any device.

🛣 Plastic Roads — A Revolutionary Step Towards New Beginning

By Maham Batool

On September 23, 2018

In General

Plastic pollution has always been on the hot list for many years. Non-biodegradable plastic has adversely affected the ecosystem. This problem now doesn’t remain unresolved as engineers have started working on using recycled plastic in construction.

Girls and Civil Engineering!

By Maham Batool

On September 21, 2018

In General

Opting for Civil Engineering as my profession wasn’t easy for me. The world that we live in is entitled to be a male-dominated arena. The birth of feminism opened many opportunities for women.

Maham Batool

Civil Engineer | From building Buildings to building Websites | Aspiring Web Developer

An Easy Guide to Set Up an eCommerce Website with WordPress

💻 Prerequisites

💯 WooCommerce

Install & Activate WooCommerce Plugin

Setting Up WooCommerce Plugin

Store Details

Industry

Product Types

Business Details

Theme

Add Products

Set Up Payments

Set Up Tax

Set Up Shipping & Marketing Tools

Personalize My Store

Extensions

🙌 Wrapping Things Up!

Create Animated Forward Arrows with CSS3 Animations

Project

HTML

CSS Styles

Styling #ForwardArrow Id

Creating Animation Keyframe

The Final Product

HTML Code

CSS Code

Wrapping Up!

🔥 My Second Workshop on AutoCAD Essentials & Startup Ideas for Civil Engineers

9th Asian Young Geotechnical Engineers Conference & 15th International Conference on Geotechnical Engineering

1 Kanal-4500 Sq Ft House Plan In 2D

🚀 2018 Year in Review — Civil Engineering, Design, & Next?!

🌟 My First Workshop on AutoCad Fundamentals

🔥 AutoCAD On Web 2019 | News Flash

🛣 Plastic Roads — A Revolutionary Step Towards New Beginning

Girls and Civil Engineering!