Category: WooCommerce

Different color for each menu item in WordPress

by Muhammad Jawaid Shamshadin Designing, Ecommerce, HTML/CSS, Javascript, jQuery, PHP, Technology, Web, Web Development, WooCommerce, WordPressLeave a Comment on Different color for each menu item in WordPress

In a recent project, I got a requirement that each menu item should be highlighted in a different color when visited. The menu items and their required active colors were:

  • Home – Green
  • Portfolio – Blue
  • Team – Yellow
  • Contact – Red

These colors were to be applied only when that page is being visited otherwise color of the menu item should be the default black color.

So, if a user is visiting the home page then the menu item should something like this

home_menu.png

And if the user is visiting the Portfolio page then the menu should be something like this

portoflio_menu.png

Considering that this was a WordPress theme project where we were using Understrap as a base theme which is based on Twitter Bootstrap. So, when user visits, for example, a home page WordPress will attach a .active CSS class to it. Taking advantage of that we added different classes for each menu item and then used the following rule to make menu item colors different:

.navbar-nav > .home.active > a {
    color: green!important;
}
.navbar-nav > .portfolio.active > a {
    color: blue!important;
}
.navbar-nav > .team.active > a {
    color: yellow!important;
}
.navbar-nav > .connect.active > a {
    color: red!important;
}

CSS Class Chaining Method

We utilized the class chaining method here. If you note that .home.active classes are chained together without space and which means it will select an element with both these classes.
That did the trick and all menu items were in a different color.

Rollover image – Change image on hover/mouse over

by Muhammad Jawaid Shamshadin .Net, Ecommerce, Javascript, jQuery, OpenCart, osCommerce, Ruby, Technology, Web, Web Development, WooCommerce, WordPressLeave a Comment on Rollover image – Change image on hover/mouse over

Often when designing websites static or dynamic, PHP or ASP.Net, Laravel or WordPress, you have to design in a way that if the user hovers an image it gets changed and an alternate image is displayed. This can be easily achieved via simple HTML events. Here is the trick:

<img src="FIRST IMAGE URL GOES HERE"
onmouseover="this.src='SECOND IMAGE URL GOES HERE'"
onmouseout="this.src='FIRST IMAGE URL GOES HERE - AGAIN'" />

It is simple as that.

Click here to read more tips.

How to start E-commerce business in Pakistan? Part-1

by Muhammad Jawaid Shamshadin Ecommerce, OpenCart, osCommerce, Technology, WooCommerce, WordPressLeave a Comment on How to start E-commerce business in Pakistan? Part-1

It is very impressive how Pakistan is progressing in the field of IT, telecom and broadband penetration. Pakistan’s e-commerce market is growing tremendously and presents great opportunities for everyone.

Pakistan’s broadband penetration has grown to over 40 million (38 million are on 3G/4G), up from just 2 million in April 2014. With more than 45 million smartphones in the market, Pakistan is on track to become one of the largest internet population in the world.

Foreign players and giants like Alibaba group are planning to enter Pakistan’s huge potential market. It is still a rising market and there is a massive potential for small businesses alike.

Why e-commerce?

E-commerce has several advantages over the traditional physical business. A few major benefits are:

  • Low investment as compared to a physical business
  • Can target a wider audience
  • You can start business immediately

Physical vs Online

For a physical business initial investment is huge. You need a place, a shop or an office. If you are going to buy it will cost you millions. If you go for the rental, you will still have to pay a considerable amount in advance and your monthly operational cost will be high. Then there are other one-time costs involved like furniture, lighting, and other stuff. You have to spend a big amount even before you start selling.

As compared to starting an e-commerce business you just need to buy a domain and hosting or go for platforms like Shopify or BigCommerce. You can get your site developed at very cheap rates from freelancers or if you are a power user then you can set up your own site that will cost you free. Few ready-made solutions that are available are:

  • WordPress/WooCommerce
  • OpenCart
  • Prestashop
  • Magento

There are even lot of other solutions available that you can search and try. If you do this on your own it will cost you free.

Setup and Operations cost is low

The next step would be to enter your inventory in your e-commerce store. That shouldn’t take more time. It could even be done sooner than setting up a physical shop. Due to this, you can start an online business immediately as compared to a physical store.

Target wider audience

If you have a physical store then you can target only the people in your area or city depending on where you are located. If you are a small businessman with a shop in your locality, your customers could only be from your nearby areas. If you have a shop in a bigger mall or market then your audience would be wider. But if you open an online e-commerce store you can target not only your city but your country, or you can even go international, resulting in huge potential for great revenue.

This is just the tip of the iceberg. But remember you must have some business sense since an online store is also a business. Without business strategy and marketing since you won’t be successful.

In the coming episodes, we’ll talk more about setting up an e-commerce store, the role of technology, business and marketing tips, how to grow your online business and much more.

If you feel this is a good read and want to read more about a topic you are interested in then feel free to leave me feedback and I’ll add it to my upcoming topics list.

WooCommerce Per Product Shipping Price Calculation

by Muhammad Jawaid Shamshadin Ecommerce, Web, Web Development, WooCommerceLeave a Comment on WooCommerce Per Product Shipping Price Calculation

If you have different rates depending on the item you will need to set up each one in the ‘Flat Rate‘ shipping method and ensure it is selected on the Product itself.

First, you will need to have a Shipping Class setup:

Go to the menu on the left hand, under Products you will find Shipping Classes.
Give your Shipping Class a name and a description and then hit “Add New Shipping Class”

Once that is done you can go back to the Shipping Setup, Under WooCommerce Settings.

Click on Flat Rate and at the bottom of the screen click on “Add New Rate”
Choose your Shipping Class.
Give it a cost and a handling fee.

Why will you need separate shipping classes?

Imagine you sell small items but just so happen to have one large item you want to sell on your site. You obviously cannot charge the same as you can with the small items.