In this SUPER long video I take you through how to make an online store with WordPress, Woocommerce and X Theme. If you've got the time and effort to put in and watch, i'll show you how I made a site for one of my clients (which they paid good money for!). Don't worry if you've got no experience of making websites, i'm hear to take your hand and guide you through it.
The video covers every step you need to take to create a fantastic online shop with WordPress including:
- Domain names and hosting
- Installing WordPress
- Setting up a shop with products
- How to change the look and feel of the site including adding a logo and changing the colours
- Basic onsite SEO (search engine optimisation.
Custom CSS
Here's the custom CSS used in the video. Just past in to your X Theme options under Custom – > Edit Global CSS.
blog {
background: #f3f3f3 none repeat scroll 0 0;
}
.single-post {
background: #f3f3f3 none repeat scroll 0 0;
}
.x-feature-box.left-text.top-text.cf {
list-style: none ;
margin-left: -20px ;
}
blockquote.x-blockquote.small-quote {
font-size: 18px;
line-height: 26px;
}
blockquote.x-blockquote.no-top-border {
border-top: 0px;
padding: 1px 0 1em 0;
}
.x-colophon.top {
background: #222222;
}
.x-colophon.bottom {
background: #000000;
}
.widget {
text-shadow: none;
}
.widget ul, .widget ol {
border: none;
box-shadow: none;
}
.widget ul li, .widget ol li {
border-bottom: none;
box-shadow: none;
}
.widget_nav_menu .current-menu-item>a {
background-color: transparent;
}
.widget ul li:hover, .widget ol li:hover {
background-color: transparent;
}
.widget_nav_menu ul li a:hover, .widget_meta ul li a:hover, .widget_pages ul li a:hover {
background-color: transparent;
}
.archive.woocommerce {
background: #f3f3f3;
}
div#woocommerce_products-2 {
background: #222222;
}
.x-alert-info, .buddypress #message.info, .bbp-template-notice.info {
background-color: #7FEE10;
border-color: #7FEE10;
color: #ffffff;
}.x-alert, .wpcf7-response-output, .buddypress #message, .bbp-template-notice {
text-shadow: none;
box-shadow: none;
}
.product-addon-gift-service-message h3.addon-name {
display: none;
}
h3.addon-name {
margin-top: 0;
font-size: 24px;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 15px;
padding-right: 15px;
}
aside.x-sidebar.right {display: block;
padding: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}
.x-navbar {
background-color: #222;
}
.x-topbar {
border-bottom: 1px solid #222;
background-color: #222;
}
.desktop .sub-menu {
background-color: #222;
}
.h-widget {
text-align: center;
}
footer .textwidget {
color: #fff;
}
footer .widget ul li a, .widget ol li a, .x-comment-time {
color: #fff;
}
.woocommerce li.product .entry-wrap {
padding: 15px;
min-height: 125px;
}
.woocommerce li.product .entry-header .button, .woocommerce-page li.product .entry-header .button {
display: none;
}
.woocommerce-checkout form .form-row.terms label {
float: left;
margin: 0 5px 20px 5px;
padding: 0;
}
div#pi_tweet_scroll-2 {
min-height: 60px;
}
}
Things mentioned in this video:
- WP Engine
- Hostgator (USE COUPON EAGLEPENNY)
- X Theme
- GraphicRiver
- Setting up product attribute video
- Creating a logo video
- Working with Slider Revolution video
Chapters
Setting up your hosting: 4:34
Installing X THEME: 11:05
Exploring X Theme options: 19:00
Setting your logo: 19:48
Setting up the homepage: 22:41
Adding a slider to the homepage: 25:25
Styling the slider text: 29:00
Adjusting the site colours: 38:51
Adding Pages: 40:10
Changing the Permalinks (to friendly URLs): 44:10
Adding the main navigation menu: 45:25
Setting up Woocommerce (the shop!): 47:07
Adding the shop to the menu: 50:32
Adding products to the shop: 50:52
Adjusting Shop Button Colours: 1:00:21
Working with the shop page: 01:05:40
Working with the sidebar: 1:08:30
Using custom CSS to make design changes: 01:16:53
Continuing to build up the homepage: 01:19:38
Adding recent products to the homepage: 01:26:15
Adjusting fonts some more: 01:30:50
Adding content to the internal pages: 01:32:33
Adding space / gaps: 01:49:17
Hiding the page title: 01:54:39
Adding customer quotes: 01:59:40
Adjusting font size using custom CSS: 02:02:10
Adding contact forms to the site: 02:04:57
Configuring the website footer: 02:15:15
Making a product “featured”: 02:23:12
Adding a menu to the footer: 02:24:54
Adding a menu to a widget: 02:29:30
Adding social media buttons: 02:33:27
Adding a background image to the website: 02:35:17
Adding social sharing buttons: 02:38:58
Setting up the shop: 02:47:20
Adding the shopping cart to the menu: 02:50:20
Setting up shipping and payment methods for you shop: 02:55:06
Setting the name of your site: 02:58:28
Installing your SEO plugin: 02:59:05
Optimising products for SEO: 03:05:22
Adding Product options: 03:07:47
Customising the emails the website sends out: 03:17:25
LINK TO SLIDER REV VIDEO 03:20:17
How to add you twitter feed : 03:20:17
Adding a mail chimp form to the website: 03:28:29
setting up 301 redirects: 03:34:52
Making the website LIVE: 03:34:51
Setting up HTTPs and correcting links 03:42:41
Allowing Search Engines in IMPORTANT!: 03:45:59
