Creating a real estate website is extremely easy when you are creating it only for the city or hometown where you live. When you come to a real estate website that serve the users on a national or international basis, the first option is to choose the city. Choosing a location requires additional technical work because the developers need to provide a ‘search’ function.
Without an additional step of ‘search’, a local real estate website can be created easily by using WooCommerce.
So here I will illustrate how you can create a real estate website using WooCommerce without functionalities for ‘search’. After that, I will add ‘search’ functionalities so you can see how a website can expand to be a national basis like Zillow.com or an international basis like Airbnb.com.
Step one: Find a domain name
Google just roll out domains.google . So the first step is go to https://domains.google and find a name you like.
Step two: Find a hosting company
Google Domains provides website building tool but currently it works with Bluehost for WordPress installation. So, you will go to bluehost.com to sign up a hosting plan.
After registering a domain in Google Domains, you will be presented with the option to build your website. Select that and continue to Bluehost website. You will be able to start building a website from there.
Continue directly to sign up website building at Bluehost right after registering a domain name:
If you come back later, you can go to domains.google, and log in, then click icon ‘Build Site’ to sign up Bluehost to build a website:
Step Three: Configure Your Domain Name
This is a little bit technical but is still very easy to do:
- in Google Domains, add the number shown in Bluehost.com as instructed.
- in bluehost.com, click “Done” button at the end of the page.
Screenshot at bluehost: here you will see the IP: 162.241.252.212 . Type that in Google Domains.
You will see the image below after you click “Done” button in the above page at Bluehost.
At this stage, you already complete creating a website.
Step four: Install WordPress and WooCommerce. (no!) Start configure your website and create first product.
Bluehost already installed WordPress and WooCommerce for you. So you don’t need to install it. All you need to do is to click buttons to customize your website.
So, follow what the screen says: click “Log in to WordPress” big button at the middle of the page. Then click the buttons all the way. The only button you don’t click is ‘Jetpack’, which require a username and password to log in. We will install and activate Jetpack later.
After clicking all buttons it asked you to click, you will have a website and one product.
Step five: Install Storefront theme
By default, Bluehost did not install Storefront theme for you. So we are going to install it here. Go to Theme under Appearance, type ‘Storefront’, install and activate it.
Step 6: Add pictures to Media library
Next you can add more product images to the Media library. Before you add products, add products images to Media so it will be easy for you to just pick the image you want when you create a product listing.
Step 7: Add products
Here we will add some products, which are houses.
Step 8: Add categories
Adding categories will allow you to select category for your products. We will add categories here. So in addition to adding pictures, we will also add categories before we create a product listing.
In our example, laretreats.com, we are showcasing houses in greater Los Angeles area. So I will include satellite cities such as Santa Monica, Beverly Hills, Bel Air, Pacific Palisades, Century City, and Newport Beach.
If your website is a place where you do not have additional satellite cities or districts, you can use zip code as your categories. Or you can use ‘Open House’, or ‘Sale by Owners’ category.
The difference between category and tag is that category has hierachy, tag do not have hierachy. Therefore, categories have subcategories. So for example, if you have a website that is about California, then you can have subcategories such as Los Angeles and San Diego. But with tags, there are no subcategories.
Now after uploading pictures and categories, you will create several more products.
Step 9: Polish homepage
After we have uploaded images, categories, and created products. Let’s visit the homepage. As you can see, the homepage has a nice layout except the top section.
Here we will add a picture in the top section. So the homepage will look nice and pretty.
It’s fairly easy. Just click ‘edit this section’, add an image in ‘Featured Image’ and type some words for your image.
Step 10: Polish product page
Now if we go to the 1 dream Street, we can see that the page has many unnecessary links on the right. We will remove these unnecessary links. Then we will add ‘Product Categories’.
At this stage, you can see that your product page looks better.
Step 11: Add footer
Here we will add some links at the bottom of the pages.
After this step, you can see that you have a website with professionally looking homepage and product page from top to bottom. We will come back later to polish them more. We will click “Coming Soon Active” link on the top of of the dashboard. Now we have a website: laretreats.com.
Step 12: Configure DNS, add SSL
Before we continue to create a fancy website, we would do some preparations. Building a website sometimes is like building sewage system or a highway or bridge, it requires many ground work and it is nothing fancy. But only with those foundations on the back-end will we have a fantastic website on the front-end.
The Google Domains DNS setting did not configure DNS automatically for you. So here you will need to add a couple of lines so that you have ‘www’ in addition to non-www. If you want your website to show as abc.om and not www.abc.com, then you don’t need to do that.
Bluehost gives you free SSL – so that your website will have https in addition to http. This is essential especially when customers are paying with a credit card. It is also a must because Google search engine very soon will show a website only if it is https. Theoretically, it should be already implemented on Bluehost and you don’t need to do anything. But I always find it necessary to click ‘support’ link and chat with a tech support to have SSL re-installed again. So you possibly will need to do the same here. To check whether your SSL is installed correctly, go to http://yourdomain.com and https://yourdomain.com and you will be able to see that.
Step 13: Configure website URL
After configuring DNS and SSL, we can go to Settings/General and type “https://www.your-domain.com” as URL address. In my case, I type “https://www.laretreats.com”
Before:
After:
Note that without correct DNS and SSL in place, you will run into problems when you change the URL. So, stop here and make sure your DNS and SSL is correct.
Some people prefer a name without www. So here I can also type https://laretreats.com. It is personal preference. Tech people like it without www arguing it is more concise. Business people like it with www arguing users like it. My perspective is to follow the leader. If you go to major website and see if they use www, then you can see that most major website still have www. For example, amazon will automatically redirect you to https://www.amazon.com if you type ‘amazon.com’ in URL.
Again, if you encounter any problems, go to Support and chat with Bluehost tech support. They will correct SSL for you and give you instruction on DNS configure in Google Domains. If you encounter DNS problem, then you will chat with Google support. This is what falls short of the partnership. One way to fix it is to sign up domain directly in Bluehost.com instead of Google Domains.
Permanent links:
Here we will go to Settings/permanent links and change ‘product’ to ‘home’ so that URL will look consistent with what this website is about.
Step 14: Add product attributes and tags
Here we will add some products attributes and product tags. Then in product page, we can select these attributes and tags.
Step 15: Add more content
Now that we have attributes and tags ready for selection, we can add more products.
Here I will add more images and products so we have more content to show what the website is about. I can also do that by clicking ‘edit’ in existing products to add more information to existing products.
These products (houses) are just for demonstration purpose.
Step 16: Preparations outside WordPress
Here we will activate plugin Jetpack by sign up a wordpress.com account. Then sign up a Stripe account and a PayPal account so that we can take money from customers.
I like the following features offered from Jetpack:
- post sharing buttons (free)
- protection against multiple login (free)
- fast images loading (free)
- backup plan (paid)
Until this point, we are not paying for anything. I strongly recommend paying for the backup plan. It is a disaster recovery plan. Every site should have it.
Now that we have a foundation of security and performance, next we will fine tune the website with some free and paid plugins and make the website looks really fantastic.
Step 17: Polish website before any plugins
- Polish product page
- Polish product archive page
- Add product filter widget
Step 18: Polish website with free plugins
I would try not to use plugins as long as I don’t have to. Here are plugins that I would use:
- WooCommerce Grid / List toggle
Step 19: Polish website with WooCommerce paid plugins
Until this step, the website is looking great without any paid plugins. We can customize the website easily with some of the WooCommerce paid plugins.
A list of WooCommerce paid plugins that I will install are:
- Storefront Blog Customizer
- PowerPack
- Membership
- Subscriptions
- Pricing Table
Storefront Blog Cusomizer allows you to change layout for Post. While you can change layout for Page without any custom coding or plugin, you won’t be able to do so for Post. So we are going to install Storefront Blog Customizer to do so for Post.
A default layout usually comes with a ‘sidebar’, which is a list of links on the left or right. When you change ‘page template’, you can change layout to full width without these links on the left or right. That’s what Blog Customizer can do for yout ‘posts’.
Next, I would install PowerPack to further customize navigation, header, homepage, and footer.
Install Woocommerce Membership and Subscriptions plugins
Until this step, we have everything ready. The website looks professional and users can browse through the houses. At this moment, I am inserting house listings through the wp-admin dashboard. Next, we will allow the users to submit listings. Before we allow them to submit listings, we will want them to pay. So here, Woocommerce Membership and Subscriptions plugins make the payment process very easy.
Now I would install them first, then I will show how you can configure it.
Video: installing membership and subscription plugins.
Membership:
Now we will add a membership. By adding a membership, we let only paid members to access certain pages according to their membership.
Here I create three pages for three membership plans: silver, gold, diamond.
for silver member, he can use silver page; gold member can use gold page; diamond member can use diamond page.
Video: create memberships
Then I will use plugin ‘Nav Menu Role’ and ‘Na menu role Woocommerce bridge’ to control which members can see which links and therefore which page.
Video: Control menu link visibility
Subscriptions:
The Subscriptions plugin allows a user to pay every month. Without this plugin, we can still charge the customer using the built-in payment tool such as Stripe and PayPal, but is only once. With this plugin installed, the customer will be automatically billed in every billing cycle.
I created three subscription plans: $129/month; $249/month; $399/month. To do so, I go to ‘Products’, ‘Add’ and added three products: A Silver membership that’s $129/month; a Gold membership that’s $249 per month, and a Diamond membership that is $399 per month.
Note that when I add a subscription product, in visibility section, I select ‘hidden’ so that the ‘subscription plan’ category will not show up in the Shop page, which is listings of all houses.
Plugin: Pricing table
With thee above three products, I have a product id for each. Now I will install Pricing Table plugin. With that I can use short code to create a pricing table. When using the short code, I type the product id in the short code. I insert this in the ‘List Rental’ page.
With these three plugins from WooCommerce, everything is ready for us to charge the customers. Next we will activate Stripe so the credit card payment will go to our bank accounts.
Install Formidable Form.
A form will allows people to submit house listing. It allows the website content to be generated by users.
Here we will install Formidable Pro. It is a paid plugin.
Creating a form mapping Woocommerce products takes a little more time. We also need to insert some codes here. This is your once your time time to become a one-day copy and paste developer. So, just copy and paste the code I put here and put it in your wpadmin dashboard. That’s it.
Final roundup:
So we use 4 paid plugin here:
- Woocommerce Membership
- Woocommerce Subscriptions
- Woocommerce Powerpack
- Formidable Pro
Step 20: Getting paid: activate Stripe:
Upon installing Woocommerce, Stripe will send you an email asking you to activate your stripe account. All you need to do is to click that link and select your password. Then add your bank account number in your Stripe dashboard. Then that’s it! You can now accept credit card payment online.
Step 21: Polish website
As of this moment, this website is up and running with functionalities enough for for tasks we want to be accomplished. We can polish it in the following areas:
- Userbility
- Typography and graphics
Userbility:
Now as we look at left side of the browse page, the filter does not look very appealing. Here I install Woocommerce Product Filter. It allows users to select houses according to their criteria.
Video: Add product filters
The Woocommerce Product Filter also do a very good job in typography. So as you can see, the font size and all upper-cap for title makes sense and is coherent with the rest of the page. Below is a comparison of the woo filter and the default filters that is included in the default installation.
Typography and Graphics
Woocommerce already have most of the layout ready so there is nothing I have to do in terms of typography other than top menu and footer. The menu already looks good. The only thing I need to do is to change font type and size for branding purpose. Here I would leave it as is.
Footer: Previously I dragged some elements to footer so I have something there. But as you can see here, there are unnecessary icons next to links.
To add links to footer, we can simply go to Appearance/Widgets. On the left side, we can see some widgets such as ‘Text’, ‘Categories’. Here I will click ‘Text’ and click ‘Footer Column 4’. Then I will type the link that I want to add. Note that I will select ‘text’ tab as opposed to ‘visual’ tab. After I type text I want, I will switch to ‘visual’ to add URL destination. If you type text in ‘visual’ tab, you will add unnecessary paragraph space between each link.
Video: Polish footer:
I would also install Font Awesome plugin. It allows me to add some icons to make this site looks more interesting.
I would also install Storefront Footer Bar. It allows me to add one more layer on top of footer, which I can add some text to describe the site or add several social media icons.
Step 22: Marketing:
For this website, I would use only two marketing strategies: search engine marketing and email marketing. Not only that they are free, but also they are the proven most effective marketing strategies. Google brings visitors to the website, and emails convert the visitors to sales.
Search engine marketing: Woocommerce does an excellent job for search engine rankings. The way codings are constructed tremendously boost search engine ranking for each product page. For example, the URL will show product name. Product title also has H1 tag. If I also correctly put product name in image that I upload, then I have the product name in three places: URL, title, image. But if I want to control what shows up in search engine result, I can further use Yaost SEO plugin to control the snippets that shows in the search result page. So, all I do here would just be write correct name for image and have good writing in through help of Yaost in each product page. I would also install plugin “XML Sitemap Generator” to generate sitemap. After that, in Google Search Console, I will enter my sitemap URL.
Having a sitemap in Google Search Console will make sure my site will be found when people do a search in Google.
Email marketing: Upon installation, Bluehost by default already installed MailChimp. So I don’t need to additionally install MailChimp. You can find the name of plugin called ‘Mailchimp for WooCommerce’. If you don’t see this plugin, you can install it from WordPress plugin lists.
MailChimp is the most popular email marketing plugin today. I would use this plugin for email marketing. Mailchimp offers many email marketing tools. Here I would use it for the following:
- Create a popup signup form to collect emails
- Add a checkbox in WooCommerce signup form so that I add my registered users to my email list
- Send users marketing emails
- Send a list of new house listings every week to my registered users.
I break down how I collect emails in two ways: via a popup form and via WooCommerce signup page
I also breakdown how I send emails: fixed content and dynamic content
Fixed content means that the email that I send is pre-designed. The content is exactly what I type. There is no change. What I see is what I send out.
Dynamic content is the newly listed content every day. The content showing up in email depends on what is inserted into the products.
With fixed content I use ‘Trigger’. When a user sign up, I send him a email next day and every day after that.
With dynamic content, I send users new house listings whenever there is one.
One word of caution with dynamic content is the use of segmentation. So if a user want to receive a listing that is for sale only, I would need to ask him to checkbox his preference. so that he does not receive a listing of houses that is for rent.
Video:
How to set up a popup form in Mailchimp
How to embed email signup checkbox on WooCommerce signup page
While a popup form is created in Mailchimp.com dashboard, setting up a email signup checkbox is done in WordPress dashboard ‘MailChimp for WooCommerce’ page.
Here you would checkbox whether you want the email subscription visible or you don’t want it at all at ‘Checkbox Display Options’ under the tab ‘List Settings’.
How to create trigger email marketing Campaign
We can send a email to all of subscribers with the same content. But we can also send email based on user behavior. For example, when a user made a purchase or abandon a shopping cart. One tool I find very useful is the Date Based email.
When a user sign up email subscription – whether via popup form or via WooCommerce sign up page, we can set up the campaign to send the user a welcome message. Then in the following days, we can send the user an email each day. Each email is customized according to user’s signup date. So each user receive a different email.
For example, if we are going to send a 7-day action plan for finding a perfect home. Nancy sign up on Monday. She will receive action plan Day 1 on Tuesday and action plan for Day 2 on Wednesday. Jennifer sign up on Tuesday, she will receive action plan for Day 1 on Wednesday, and action plan for Day 2 on Thursday.
How to send users new blog posts or newly listed products (RSS)
Sending new blog posts or new product listings can be achieved by using the ‘Share Blog Update’ in MailChimp. Setting up is very easy like other email campaign. The only part that might create problem is the RSS URL. If your blog is like most blog, then your RSS URL will be xxx.com/blog/. If your WooCommerce is like most WooCommerce website, then your default shop page URL and RSS URL will be xxx.com/shop/
Video: Creating an email marketing campaign in MailChimp to Send newly listed houses
In addition, note that in order for the product ‘featured image’ to show up in email, I install plugin ‘RSS Featured Image’. Once I install this plugin, the image will automatically show up in the email.
Segmentation:
RSS campaign becomes more complex when you have segmentation. For example, users who only want to receive a list of houses for sale and not for rent. Here I would go to the specific page to find the RSS feed link by right clicking the mouse and select ‘page source’ . From there, I can see the link for RSS. For L.A. Retreats, because I rename permanent URL for shop page, my shop page RSS feed URL will be “https://www.laretreats.com/houses/feed/ ” , which you can see in line 16.
If I want to further segment recipients by their preference such as houses for sale, for rent, or ‘open house’. I can also do so by selecting the segment of recipients who will receive this automated emails. In the above video, I select entire list. But you can always test your segmentation.
However, segmentation plays a vital role in email marketing success. Here I haven’t shown the the testing emails. But all of automation tools provided in MailChimp is very helpful so you can always play around it to see what it works.
Step 23: Add a Search
Earlier in this article, I mentioned that, if we are not going to add a Search functionalities, it is extremely easy to build a website without any plugins and custom codings.
However, as you can see in most website, everything starts with a search.
One of benefits in providing search is that the website can collect information from users to know what users are searching for. This gives website an opportunity to customize the website for the users and to provide information users are interested at.
So here, after all is done, I am going to add a search box at homepage to further polish this website.
The search box I am using is the default WooCommerce search box.
For now, I use a code snippets that I am attaching screenshots. There are several ways to create search. I will talk about that later.
Step 24: All other small details
- Social Icons: Since every website has social icons, adding these icons will make my site look more complete. Here I will add some social icons by using plugin “Social Icons” published by “ThemeGrill”. After install and activating it, I go to “Appearance” “Customize”, “Widgets” “Footer Column 1” and add a social icon widget.
Step 25: All other business considerations and technical structure considerations:
As you can see from the links on the top, if you click Rent, I don’t have a page for it. For this website, I can make it houses ‘or sale’ only, or ‘for rent’ only, or both.
There are three ways I can categorize houses ‘for rent’ or ‘for sale’:
- Add it in product categories
- Add it in product attributes
- Add it in product tags
There is no right or wrong way no matter which way you choose. There is, however, the best way.
Note that when selecting one of these options, it will also affect your permalink (URL), and how your users will filter the houses.
Here I will illustrate what it looks like when choosing each option.
- Add it in product categories
Here I would change ‘Categories’ depending what I plan to do. So I would need to have a Parent category ‘For Sale’, and under that, have sub-categories such as Beverly Hills, Newport Beach. Then Have one more parent category ‘For Rent’ and put Beverly Hills, Newport Beach and other cities as sub-categories.
Video: Add ‘For Sale’ and ‘For Rent’ to product categories
2. Add it in product attributes
Here I add an attribute ‘Condition’ and created ‘for sale’, ‘for rent’ as attribute terms. Then in each product, I assign an attribute to it.
Video: Add ‘For Sale’ and ‘For Rent’ to product attributes
3. Add it in product tags
Here I will create product tags called ‘For Sale’, and ‘For Rent’. And in each product, I can add it.
Comparison of three methods:
All of these three methods can create an archive of the houses ‘for sale’ or ‘for rent’. The major difference is URL name.
Let’s see what the URL is like in each of these options:
- Use category: The ‘For Sale’ URL will be : https://www.laretreats.com/homes/for-sale/
- Use attributes: The ‘For sale’ URL will be https://www.laretreats.com/condition/for-sale/
- Use product tag: The ‘For Sale’ URL will be https://www.laretreats.com/house-tag/for-sale/
These URL are set in ‘Settings/Permalink’ page.
Now I set my product category base as ‘homes’, product tag as ‘house-tag’, and I change the default archive for all products from ‘product’ to ‘house’. These changes will affect my URL.
Since the ‘category’ URL looks nicer as it use ‘homes’ so I decided to use this in menu link.
However, note that categories can be added in our ‘filter’. So now let’s look at what the filters will look like in each of these three options if I add ‘category’ to my filters.
Comparisons of Filter look:
Filters when using ‘product category’ as permalink:
Filters when using ‘product attribute’ as permalink:
Filters when using ‘product tag’ as permalink:
When looking at each these options, I decided that filters that does not include ‘for sale’ in categories make better sense. So I would remove ‘Condition’ from Filters and rename ‘category’ to ‘Locations’ and use first option – using ‘product category’ as my permalink and place it in my menu.
This is my updated version of filter when users click ‘Buy’ in menu which I use ‘product category’ as permalink.
One word of caution is that, at this moment, if you go to my shop base which show all of houses for sale and for rent, the filter will show both houses for sale and for rent.
If you go to a product-tag, for example, ‘open house’, you will also see the product categories show on the left filters. But you can determine which filters to show on the left filter section and name the attributes depending how you think can help users to find the information they are looking for.
As you build your own website, you will find that categories and attributes play a vial part in determining a website’s success since that is how the content is organized.
But if you know what you want to achieve then as you can see, there is nothing technically challenging.