Sam
Author Archives: Sam

How to Setup WooCommerce

setup woocommerce pages

Setup Woocommerce

The most utilized plugin for WordPress eCommerce websites is WooCommerce. If you are running a store or have your own digital products if you set up WooCommerce, it is pretty easy for you to get started and maintaining, and if you want to expand it, it has lots of extensions.

Though it’s relatively simple compared to many other available solutions, WooCommerce needs to be configured to perform every function precisely. A few pages must be set up for the whole buying process to work correctly. This example will reveal how you can turn your WordPress website into a fully functional web shop.

After installing the plugin, it usually creates the necessary pages. But sometimes issues like a conflict with the theme or any of the other plugins arise and those pages don’t get created automatically. In this situation, you have to set up the WooCommerce pages yourself. Otherwise, your store won’t be operational, and buyers won’t be able to purchase. These are the most relevant pages you must have, to get WooCommerce up and running properly.

  • Cart
  • Checkout
  • My account

Cart: When a visitor clicks add to cart on a product it’s gets added to the shopping cart. Every product he wants to acquire first goes to the shopping cart. You can conceive of the cart like the basket or trolley we use at supermarkets to put all the products in it. When the buyers go to the shopping cart page, it will show all the goods they added in the cart and from there they could remove it if they want and increase or decrease the quantity of each item.

Checkout: This is the final step of the purchase, and is where the customer input the payment details and pay for the goods. Similar to the cash counter at real stores, it works the same way. The buyers, if given a choice, can choose from multiple payment options. If you want, you can use a coupon code field on this page as well.

My account: This page is the account page of a buyer and isn’t strictly necessary for the store to be fully operational, but having this page is the usual way of doing it. This page makes it much easier for buyers to check their previous orders and keep track of their info.

Having the cart and checkout pages is necessary. If your store’s shopping cart and checkout buttons don’t work, it is a need to check if these pages are present from the ‘All Pages’ tab and if you can’t see these pages you have to create them. Now setting these pages up isn’t that complex, and you don’t have to be a code wizard to do this. To guide you through how to configure the WooCommerce pages, I have made a step by step guide. Just follow it, and you will have them done in no time.

Setup Woothemes Cart:

How to Setup WooCommerce  How to Setup WooCommerce

Click ‘Add New’ under Pages tab. Give a page title and paste ‘[woocommerce_cart]‘ on it. Don’t copy the inverted commas, just from one bracket to the other. Then click publish.

Checkout: 

How to Setup WooCommerce

Similar to the last step create a new page and paste ‘[woocommerce_checkout]’ without the inverted commas. Next, just click publish.

 

My account: 

How to Setup WooCommerce

As it was with the earlier step go to ‘Add New’ under Pages and paste ‘[woocommerce_my_account]’ and click publish.

Now that you have these pages created you just have to point to them from the WooCommerce settings. It’s easy, and you just have to follow these steps:

First, go to ‘Settings’ tab under WooCommerce and click ‘Checkout.’
How to Setup WooCommerce

Next step is to scroll down, and you will see the ‘Cart Page’ and ‘Checkout’ fields just under ‘Checkout Pages.’ Then Select the pages you created earlier on both fields, scroll down and click ‘Save changes.’
How to Setup WooCommerce

Finally, we need to The final step is to go to the ‘Accounts’ tab, in the ‘My Account Page’ field select the page you created in the previous steps, that is the account page.

How to Setup WooCommerce

Don’t have the payment methods set up yet? Do it from ‘Checkout Options’ which is on the ‘Checkout’ tab.

When you have done these steps, you should be able to set up woocommerce pages without any extra trouble correctly. Now you just need to add products and they are finally ready to be sold!

How to Embed Youtube Videos in WordPress Posts

How to embed youtube videos in WordPress posts

As the saying goes ‘an image is worth a thousand words’. Having youtube videos in your posts makes it more rich and users become more engaged to watch videos that can describe or show something more vividly rather than reading about it. But most of the time users get confused about embedding youtube videos the way they want to. I am about to show you a few easy ways of how to embed youtube videos in WordPress posts.

There are two methods when it comes to, how to embed youtube videos in wordpress posts. One is simple as 1,2,3 and the other with more customization options involve a tiny amount of coding. With the following steps on how to embed a youtube video is going to be much easier than you can imagine.

 

The simple way:

1.  Go to the youtube video’s page you want to embed. I am using an example video in the following. Than copy the link.

How to Embed Youtube Videos in WordPress Posts

2. Now paste it in the post editor.

How to Embed Youtube Videos in WordPress Posts

3.  In seconds the video will load on page and ready for users to view.

How to Embed Youtube Videos in WordPress Posts

The downside of this method is that you can’t change the alignment and the resolution.

 

Customized way:

1. Go to the youtube video’s page and click ‘share’. You can see three options: Share, Embed and Email. Click on ‘Embed‘. Then you will see a line of code just below. Copy the full code.

How to Embed Youtube Videos in WordPress Posts

2. Now paste the full line of code while you are in the ‘Text‘ mode of the post editor. Make sure you are in the ‘Text’ mode otherwise the code won’t work.

How to Embed Youtube Videos in WordPress Posts

3. After pasting the code move back to ‘Visual‘ editor, there you can see the video.

How to Embed Youtube Videos in WordPress Posts

4. By default the video size will be 560X315.  If you want to change it’s resolution it’s a very simple edit. Head back to ‘Text’ mode and in the embed code change the ‘width‘ and ‘height‘ values according to your needs.

How to Embed Youtube Videos in WordPress Posts

5. If you want to center the video simply go to ‘Text’ editor and add ‘<center>‘  just before the beginning of <iframe> tag.  And add </center> just after the last <iframe> tag.

How to Embed Youtube Videos in WordPress Posts

With the <center> tags the video will be precisely centered on page.

How to Embed Youtube Videos in WordPress Posts

After doing this few a times you should be able to get the hang of this method. Among the two described methods of how to embed youtube videos in WordPress posts, I personally suggest using this one mostly because of the customization options it gives you.

So the next time you want to embed a youtube video in your wordpress website, you know how to do it like a pro. Having appropriate videos in your posts will give users a much better experience and they will become more engaged and return to your website.

How to Modify Contact Form 7 Design

With today’s web 2.0 standards every website needs a contact form. A contact form let’s your users to engage themselves more with your website and stay in touch. And if you are running an online business than a contact form is a must have feature.

There are many wordpress contact form plugins available to use both free and premium ones. Some of the highest rated ones include Contact Form 7, Gravity Forms, Fast Secure Contact Form, Contact Buddy, and Ninja Forms. Among these Contact Form 7 is one of the most highly used and it’s free as well without any upgrade plans, so you have all the features in your hand to deploy.

Contact Form 7 is very easy to configure and run compared to many other contact plugins. It’s very light weight in terms of resources for your hosting account, as a result your page won’t have any extra loading time or lag.

Though Contact Form 7 is easy to use and maintain, one biggest problem of it is the design. The form design that comes with it appears very plain and it isn’t device responsive. Meaning on cell phone and tablets the form fields don’t auto resize which can be problematic for users. If you are running a website with dynamic theme Contact Form 7’s average design layout very likely won’t blend in and the responsiveness issue adds more to it.

Now don’t worry a bit, luckily Contact Form 7 design can be modified and given a nice looking appearance and auto responsiveness functions with correct customizations. You don’t have to learn programming or anything else to do this. We have made a nice step by step tutorial to help you accomplish this.

  1. Assuming you already have Contact Form 7 installed in your wordpress admin panel. In case you don’t already have it, just install it from ‘Add New’ under Plugins.
  2. Next go to ‘Add New’ under ‘Plugins’. In the search bar write ‘simple custom css and js’ and search for it.

How to Modify Contact Form 7 Design

3. Now you can see the Simple Custom CS and JS plugin as shown in the picture below. Click ‘Install Now’.
How to Modify Contact Form 7 Design

4. Then when the installation is complete, which only takes a few seconds you have to activate the plugin in order for it to work. Click ‘Activate Plugin’.How to Modify Contact Form 7 Design  How to Modify Contact Form 7 Design

5. After the plugin is active you will see ‘Custom CSS and JS’ on the left side of the admin panel. Put your mouse pointer on it and you can see more options. Click ‘Add Custom CSS’ from the options.How to Modify Contact Form 7 Design

6. Now give a title to it (ex: Contact Form 7) and in the body delete any existing text first. Then copy the following code into it:
#responsive-form{ max-width:400px; margin:0 auto; width:100%; } .form-row{ width: 100%; } .column-half, .column-full{ float: left; position: relative; padding: 0.65rem; width:70%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color:#222; font-size:17px; font-weight:600; } .clearfix:after { content: ""; display: table; clear: both; } /**---------------- Media query ----------------**/ @media only screen and (min-width: 48em) { .column-half{ width: 70%; } } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { padding: 8px; border: 1px solid #ccc; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #eee !important; border: none !important; width: 70% !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; font-size: 14px; color: #222 !important; padding: 16px !important; } .wpcf7 input[type="text"]:focus{ background: #fff; } .wpcf7-submit{ color: #002060 !important; margin: 8px auto 0; cursor: pointer; font-size: 20px; font-weight: 600; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 6px 20px; line-height: 1.7em; background: transparent; border: 2px solid #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; } .wpcf7-submit:hover{ background-color: #eee; border-color:#eee; padding: 6px 20px !important; } span.wpcf7-not-valid-tip{ text-shadow: none; font-size: 12px; color: #fff; background: #ff0000; padding: 5px; } div.wpcf7-validation-errors { text-shadow: none; border: transparent; background: #f9cd00; padding: 5px; color: #9C6533; text-align: center; margin: 0; font-size: 12px; } div.wpcf7-mail-sent-ok{ text-align: center; text-shadow: none; padding: 5px; font-size: 12px; background: #59a80f; border-color: #59a80f; color: #fff; margin: 0; }

How to Modify Contact Form 7 Design

After copying the code click publish.

Personal customizations

Now if you want to change the colors of different elements to match with your website, you can do that too.

To change the font color, font size and background color of the fields, you have to modify the following elements described and marked in the picture below:How to Modify Contact Form 7 Design

Under ‘.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {‘ modify the following elements for your personal changes.

‘background-color’ refers to each fields background color. If you want to change it just replace the #eee color code with your own. But don’t delete ‘!important;’ text. Otherwise it will malfunction.

‘font-size’ refers to the size of the font in the fields. Just change the number text next to it for increase or decrease.

‘color’ refers the font color itself. If you want to have different color just change the ‘#222’ color code with your own color code.

To modify send button, customize the following elements under ‘.wpcf7-submit’:

How to Modify Contact Form 7 Design

‘color’ refers to the text color on the button. If you want anything different simply change the ‘#002060’ color code with the color code you want.

Font-size depicts the font size of the text on the send button. Simple change the number if you want smaller or larger font.

Border is the border of the button. If you want to increase it change it from 2px to more and vice versa. It currently has black color(#000). You can change it with your own as well.

Now the ‘Send’ button has hover effects too. It changes color when you hover the mouse pointer over it. To change the hover effect colors as well, just change the following under ‘.wpcf7-submit:hover{‘How to Modify Contact Form 7 Design

background-color here means the color of the background during hover.

border-color also refers to the color during mouse pointer is over the button.

There you go! You now know how to modify Contact form 7. I hope you enjoyed the article and are well on your way to modify Contact Form 7 to your liking.

Download Contact Form 7 by clicking here.