how-to Tag Archives - Page 7 of 15

How to Make WooCommerce Pages Full Width in Storefront Theme

April 23, 2015 By John 20 Comments

EDIT: Storefront now has a full-width page template so you no longer need to use the custom code in this article. To remove the sidebar on WooCommerce pages, you can set the page template to Full Width.

If you are using Storefront theme and you want to use the Full Width template for your store and other pages, you might come across a problem. After you’ve set your page to the Full Width template, you can still see the sidebar. And that’s not the case with the other pages, since setting the template to Full Width effectively hid the sidebar.

shopimage — Here is a shop page that is supposed to be full-width but still shows the sidebar

And here is a product page which is supposed to be full-width but still shows the sidebar

This happens because all WooCommerce pages use the templates on the WooCommerce plugin. They do not use the Storefront templates. To resolve the problem, add the following code to your child theme’s functions.php.

add_action( 'wp', 'woa_remove_sidebar_shop_page' );
function woa_remove_sidebar_shop_page() {

if ( is_shop() || is_tax( 'product_cat' ) || get_post_type() == 'product' ) {

remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
add_filter( 'body_class', 'woa_remove_sidebar_class_body', 10 );
}
}

function woa_remove_sidebar_class_body( $wp_classes ) {

$wp_classes[] = 'page-template-template-fullwidth-php';
return $wp_classes;
}

This code would remove the sidebars on the product page, product categories, and the shop page. It would also add the page-template-template-fullwidth-phpclass that causes the layout to be in full width.

Now you know how to make WooCommerce pages full width in Storefront Theme! If you have further questions please let us know.

How to Fix Blurry Product Images in WooCommerce

February 26, 2015 By John 10 Comments

Sometimes you upload an image in WordPress/WooCommerce and it just doesn’t show up like you intended it. Sometimes they don’t align. Sometimes they don’t fit the placeholder. Sometimes the image just doesn’t show. And sometimes, the image gets blurry. Why the image gets blurry may be caused by one of a few problems. Here we discuss the common causes and how to fix blurry product images in WooCommerce.

You Uploaded a Blurry Image

If you uploaded a blurry image then don’t expect that you’re going to get a good image to show up. Maybe you viewed the image in a small screen so it looks okay but when you view it on a larger screen, you’ll find that it actually is blurry. If this is the case, there is hardly anything that you can do to fix the image. Image editing tools like Adobe Photoshop may be able to help a bit by making the image sharper but don’t be expecting any significant changes. Odds are you’ll have to get a better image.

WooCommerce Recommends Using Large Product Images

Before, WooCommerce images need to be a specific size that you set in WooCommerce settings. That is no longer the case. WooCommerce now uses a lighthouse so images pop up big when users click on it. Large images look great and will help sell your products. However, make sure they are properly optimized.

For most themes, WooCommerce recommends uploading an image that is at least 800×800 pixels. Don’t worry about the image being bigger than the placeholder as WooCommerce automatically sizes your images and will only show the full resolution when clicked.

To control thumbnail cropping of your product images, you can go to Appearance > Customize > WooCommerce >Product Images and then select your desired cropping settings.

If the image is not the problem, there might be a problem with how your images are rendered. You can try to regenerate image thumbnails.

How to Regenerate Thumbnails

Other than when changing image settings in WordPress and WooCommerce, you may also need to regenerate the image thumbnails on your website if they appear blurry after a redesign or changing to a different theme. The best and easiest way to regenerate image thumbnails is to use the Regenerate Thumbnails plugin. Simply install and activate the plugin and from there, go to “Tools” and “Regen. Thumbnails”. Just click on the button “Regenerate All Thumbnails” and the plugin will fix the blurry images like magic.

If you want to regenerate thumbnails for specific images instead, you can do this on the Media page on your admin panel. Make sure you are viewing images with List view. Simply hover over the image and the link to regenerate thumbnail should appear. You can also mark all the images you want to regenerate thumbnails and use Regenerate Thumbnails from Bulk Actions and then apply.

Best Practices on Image Use

There are a lot of things that you can do to avoid blurry images by following best practices. Once you set an image dimension, make sure that the images you upload comply with that requirement. Uploading a bigger image in WooCommerce is okay but make sure the image is optimized so as not to affect your page load speed. You can set how you want image thumbnails to be cropped. If you upload a smaller image, it might look okay on a mobile device but not on a PC or laptop. It is also important to know what image file types to use.

Another best practice for images is to always set an alt text for your image. If the image fails to load, the alt text will show up and the user will at least know what the image is about. Also, name your files properly. Don’t name your files after SEO keywords. If you have an image of a ukulele, give it a descriptive file name and not “buy-cheap-ukulele”.

How to Write Persuasive Copy for Your Online Store

September 23, 2015 By John Leave a Comment

Is your online store not giving the conversion rates you need? Something you might be overlooking is “persuasive copy”.

Persuasion and conversion go hand-in-hand. If you’re not persuading visitors, it’s going to be very hard for you to boost your conversion rate.

In this post, you’ll learn:

E-commerce Copywriting That Sells
E-commerce Copy Analysis – What’s Missing?
Elements of Persuasive Copy to Increase Sales
How To Write Seductive Sales Copy to Woo Your Customers

The Rise of Online Shopping

Online shopping is now extremely lucrative.

Just this month, Remarkety revealed that the world e-commerce market has amounted to trillions of dollars in sales projected for 2015. China has the biggest e-commerce market with $562.66B, followed by US with $349.06B and UK with $93.89B.

The numbers are surprising. No wonder both budding and existing entrepreneurs are taking advantage of the online market.

According to a study by Harris Interactive, 36% of customers gather information from a company website prior to making a purchase. Only 22% gather from face-to-face conversation with a salesperson, or other company representative.

This proves how important it is to fill your website with relevant information about your products or services. That information should be a credible, persuasive copy to enhance your visitors’ trust and convince them to buy from you.

E-commerce Copywriting That Sells

Your online store is part of a highly competitive web marketplace. It not only serves as a store, but also a catalog, marketing tool, and company information source. That is why you should know exactly how to sell with words.

Essentially, your copy must achieve two goals:

Establish trust and
Convince visitors that your product is right for them.

Setting Your Tone

Who, exactly, are you writing for?

For instance, if your store sells products for teenagers, you wouldn’t want to use the formal writing style. Keep your copy focused on your target audience. Let your company’s personality shine through.

Use this Customer or Buyer Persona to establish a tone for all of the copy throughout your site. Remember, each piece of copy is an opportunity to broadcast your brand.

There are three types of copy used by copywriters:

Informational. This is the type of copy often found in a site’s frequently-asked questions section. It offers customers to-the-point information. Straight-forward, uncluttered writing is often used, while still maintaining the tone.

Marketing. This copy is mainly used in promotional materials and product descriptions. It’s the most common form of copy, but it’s one of the hardest to write.

Notification. This copy appears when you want to notify a customer when they complete actions. They may encounter positive and negative messages. One example is when they stumble upon a dead link somewhere in your site.

Good Copywriting Samples

Being a copywriter isn’t easy. You need to have the ability to find the exact right words to sell whatever it is that your company is offering. Here are some websites with stellar copywriting.

Pay attention to their tones of voice.

1. UrbanDaddy

This Enter Bandman copy is really far from ‘boring’. UrbanDaddy’s unique tone can be found in every single one of their copies. From their homepage down to their editorial policy, the company clearly knows their audience.

2. GymIt

Instead of using the usual pics of ripped hunks and supermodels, with cliché fitness headlines, GymIt goes for a different approach. Their powerful copy is tailor made for the average Joe, and the humor’s great too!

3. Velocity Partners

This B2B marketing agency’s co-founder, Doug Kessler, is dubbed as the master of word economy. You can check out their popular slideshares here.

4. Tesco

Tesco uses short sentences to captivate their audience, and they do it with a punch. It’s witty, personal, and effective. Of course, it depends on what you’re trying to sell and who your target audience is.

5. ModCloth

ModCloth is known for their joyous, pun-filled, and clever copy, especially when it comes to their product descriptions. They also tend to tell the story of what you’ll do while wearing their items.

Basic Rules to Follow

Avoid long sentences. Long sentences are difficult to digest, and inappropriate for persuading your audience. Shorten sentences by refraining from too many adjectives, adverbs, and pointless modifiers. Don’t use ‘for the purpose of’ when you can use ‘for’ instead.

Avoid jargon and clichés. Your aim is to sell and not to impress your readers with your vocabulary. Using jargon will only confuse your customers. If customers don’t understand something about your product, they won’t take the risk to buy it. Clichés are unoriginal and can only distract your readers.

Write in an active voice. This makes it easier to persuade your visitors to buy your products. It means to lead with the noun that is doing the action.

Hemingway is a great tool to run your copy through and reduce the fat.

E-commerce Copy Analysis – What’s Missing?

If you’re running an ecommerce site and you’re not testing your copy, you could be missing a huge opportunity to boost your sales. It’s recommended to test your copy for conversion drivers – relevance, clarity, and urgency.

Relevance. Does the copy on the page relate to what the visitor thought he was going to see when he clicked on a link to your page? Be consistent with the incoming links.

Clarity. Does the landing page clearly articulate the value proposition? Clarity of content is often the most common factor ecommerce sites struggle with. If it’s hard to scan or understand, it can’t do its job.

Urgency. Is there an indication that the action needs to be taken now? The tone of the copy, offers, and deadlines can all influence urgency.

Test Your Copy

Businesses can make great gains by optimizing their site copy, content and headlines. As much as possible, find out what’s missing. Your visitors should understand your value proposition in your words.

While you’re focused on the merchandising aspects of your site, trying to get more products into carts, don’t neglect the benefits of testing copy.

Headlines

From the headline alone, do visitors understand why they should buy from your site, and not your competitors? Some sites bury their value proposition deep in the copy. Testing your headline can yield surprising results.

Most marketers know that connecting with customers on an emotional level is a key driver to increased sales and loyalty.

Transactional messages

Managing your customer’s expectations reduces buyer anxiety. This copy drives action, and guides the customer towards completing the sale. Clarify expectations such as when to expect their shipments, or what will happen when they click the order button.

Tone of copy

Are you conveying the words your customers want to hear? Of the two call-to-actions, the first one was clear, but not compelling. The second is more personalized, gives a more positive message, and therefore more effective.

“Please select your tax-deductible gift amount below.”

“Yes I will donate a tax deductible gift of:”

Ideas, not words

Once you know what’s missing, you can apply the results across all the copy on your site. If you’re testing the effect of customer-focused copy, you might learn something about how your customers react.

Elements of Persuasive Copy to Increase Sales

Your copy should be engaging and should bring customers closer to your brand, allowing them to see what’s in it for them. A copywriter persuades customers to see their point of view. They want their writing to influence others in a positive manner.

Let’s have a look at the elements that contribute to persuasive copy:

1. Conversational Tone

You won’t win over your readers with hyped copy. Customers turn away from anything over-the-top, especially those related to sales.

The first rule to writing persuasive copy is to write as you talk. Create that personal connection. This way it will be easier to read, since people usually have an internal monolog accompanying what they read.

2. Be an Expert

You don’t necessarily need a degree or years of related experience. Being an expert just demonstrates that you’re knowledgeable in your particular market.

True experts know what they’re talking about. Establish yourself as an influencer by conveying confidence and certainty in your copy. Sharing your knowledge so others can learn bestows authority – and authority leads to persuasion.

3. Good Structure

Copywriting is different from writing an essay or a short story. It’s more of a news article, wherein the most important information comes first.

This structure is called ‘inverted pyramid’. It starts with the relevant points, then followed by details. Make sure to captivate your audience with your headline, then motivate them to continue on with the benefits, features, and call-to-action.

4. Give a Reason

Psychologist Ellen Langer has demonstrated in her book ‘Mindfulness’ that people are more likely to comply with a request if they’re given a reason, via the word ‘because’. Why are you asking them to take action?

You can also use the words ‘imagine’ or ‘picture’ to influence your readers into putting themselves into their desired outcome.

5. Benefits, Then Features

By using a ‘benefit first’ content strategy, customers will immediately know what’s in it for them. A benefit answers the question, ‘so what’. When you show the benefits of your product, think of it like telling a story. You want to engage the audience and leave them feeling an emotional connection.

Take this example from Method Home.

Product features are physical characteristics of a product sold and marketed by the company. It includes the form, color, size, weight, odor, material, and tactile qualities. They provide added functionality to products on your site.

Take a look at the product features from Sperry.

5. Write for Scanners

Most online consumers scan a web page first, and if they find it interesting, they go on to read the whole article. A study by Nielsen Norman Group revealed that 79% of customers don’t read, but scan when they are browsing.

It’s because of the following reasons:

Reading on a computer screen strains the eyes.
People’s ever-dwindling spans of attention.
Customers who are mostly surfing the Internet are on-the-go.
There are millions of websites vying for their attention.

You can persuade your prospects to actually read your content by using some of these eye candy elements:

Headings and subheads, relevant and on topic
Bullet lists to highlight benefits and features
Font variations, bold, italics, and colored links
Short sentences and short paragraphs, each with one idea only
Images and infographics
Memorable captions

How to Write Seductive Sales Copy

Ecommerce merchants have many pages to write copy for. Home and landing pages, category pages, product descriptions, articles, and shopping messages are just a few. It’s always important to strengthen your editorial skills whether you’re a seasoned writer or a novice.

Formula for Persuasive Copy

You can always start with the 1-2-3-4 method. It’s a handy little checklist for any copy you write. It’s so simple you won’t have to look it up.

1. What I’ve got for you

What’s your product? What does it do? Who is it for? Let the folks know what they’re in for. Start with a simple overview, a birds-eye look at what you’ve got to offer.

What’s in the box? These are the ‘features’ of your product or service. The best way to list them is usually a series of fascinating bullet points. Include enough specifics to make the product feel valuable.

When you can, attach a benefit to each feature.

Instead of saying, “Next-action worksheets come with every module.”

A better version is, “Next-action worksheets come with every module, so you can take what you’re learning and immediately put it into action.”

2. What it’s going to do for you?

There’s a saying that goes, “sell with benefits, support with features”.

What’s better about life with your product? Talk about the great benefits of taking action. Describe the end result, or the “after” picture once your customer has bought your product and used it as you recommend.

3. Who are you?

Most of the time, you need to establish your authority. Show in your copy that you know what you’re talking about. Make your customers believe that you’re a trustworthy and worthwhile person.

For instance, if your site is all about gardening, and there’s a photo of you in front of your own garden, customers will consider you more credible.

4. What you should do next?

This is where call-to-action comes in play.

From a copywriting standpoint, it’s been proven time and time again that if you want someone to do something, you’ll get better results if you tell them exactly what to do. A MarketingSherpa experiment revealed that two or three “click” link words can lift click through rates by more than 8%.

Never assume that a customer knows the whole process. A reader needs to know specifically what to do next. Don’t just put a link in. Instead, tell her to ‘click here’.

7 Bulletproof Copywriting Techniques

Many people misinterpret the uniqueness of effective copywriting. It’s more than writing the hard-sell sales letter. A well-crafted copywriting should stand on its own without the overabundance of sales language and design embellishments.

Here are some seductive copywriting techniques from Henneke Duistermaat, a UK based content marketing expert:

1. Create a One Big Idea

A good headline focuses on one big idea – usually your product’s most important benefit. Focus on that one message that you want to communicate to your audience.

2. Short and Broken Sentences

Sales copy is different from academic writing. Readers will not make the effort of reading your entire content. Short sentences are much easier to read than long, spiritless sentences.

It doesn’t matter if you start a sentence with an ‘And’ or ‘But’. As long as it works. Shorter sentences improve the rhythm of copy. Don’t be afraid to cut long sentences into two.

3. Be Memorable with Sound Bites

Sound bites are described as easy-to-remember, easy-to-quote nuggets of wisdom. They communicate one idea in a short and simple way. Contrast or surprise is used to startle the brain and attract attention.

“Everything you need. Everywhere you go.”

“The thinnest, lightest, fastest iPhone ever.”

“So much more than before. And so much less, too.”

4. Be Credible with Technical Details

Technical details are not only a sign of expertise, but also enhance trust, and make you more convincing. Presenting exact details actually sell.

5. Fascinate with Stories

What stories can you tell about your product? Can you explain where the idea for your product came from? Sharing stories is a powerful copywriting tool. You can share the challenges you had to overcome, just make the delivery fascinating.

6. Persuade with Problems

Customers often search for solutions. So, present features and specifications as solutions to their problems. Consider what problem each of your product’s features solves.

7. Create a Persuasive Call-to-Action

Your site may have a compelling headline, a well-written sales copy, and an unbelievable opt-in offer. But all these things are of no use if you don’t include a clear call-to-action. A good CTA should stand out and be specific.

More inspiring call-to-action examples in this article.

4 Copywriting Tricks Swiped from Psychology

Good persuasive writing leaves you wanting more, right? Here are four useful, little-known tricks from Joanna Wiebe, author of “Copy Hackers”.

1. Don’t Be Sloppy – Write Rhyming Copy

A study conducted by Dr. Matthew McGlone found that rhyming phrases are somewhat believed more accurately.

Take this Animoto snippet for example. See that second line?

Rhyme has the power to influence the way we think, which relates to psychology. So, one rule to consider in writing a copy is, if it rhymes, it must be true.

2. Use a Word that Humanoids Don’t Expect to See

According to Wiebe, “unusual or unfamiliar material is easier to remember than common material.” This is actually called the Bizarreness Effect.

As a copywriter, you have to grab that chance for recall. And, recall is a big deal not only for converting visitors. Customers need to remember messages as they move through your site. A study from Purdue University found that people were best able to recall messages when bizarre nouns were mixed with common words in a standard sentence.

3. Repeat Your Message Again and Again

The more you hear a message, the more likely you are to believe it’s true. This is due to the Illusion of Truth Effect. In other words, repetition works.

It’s not just copying and pasting your marketing materials. For the Illusion of Truth Effect to work, you can use a copywriting technique called “3D”. It’s where you write the same message three different ways in sequence.

It actually works best when your audience isn’t that attentive. It doesn’t matter whether or not the audience is concentrating hard, repetition will increase persuasion.

4. Organize Your Lists so Peeps Remember the Right Stuff

This method is about the Serial Position Effect. It simply states that people remember what they saw first or last, but almost never what they saw in the middle. This affects online customers as well.

So, in creating your copy, what stuff are you okay with your visitors NOT seeing? That’s what you should put in the middle of your bullet list, or in your Features page.

However, there’s always an exception, right? The Von Restorff Effect states that if an item in the middle of your list stands out, your visitors may remember that part better.

Conclusion

Start spotting these persuasion elements in your online store and you’ll be on your way to increasing sales.

Your online store offers you the opportunity to connect with potential buyers and to differentiate your products while establishing credibility and trust. Make the most of this opportunity by diving into your website copy with a clear purpose in mind.

In creating the content for a product description, an advertisement, a landing page, or a sales email, you want the copy to be powerful enough to convert visitors to sales. Lead your boring copy out of the grave and make it live.

How to Create a Contact Form for WooCommerce

June 3, 2016 By John Leave a Comment

You might have used a good amount of your resources to create a website for your business. You have an inviting and irresistible call-to-action. The last thing you’d want to happen is for a potential customer to bounce away from your site because they couldn’t find your contact information.

The Contact Us page is one of the most important pages on your website. It is one of the easiest ways to give your visitors a means of getting in touch with you.

What Do You Need to Have on Your Contact Us Page?

Having a contact form is just about the easiest way that a user can contact you. If you have several departments such as customer support, sales, press, etc. it may be worthwhile listing the contact information for each department in addition to the contact form. This can include the name of the contact person, e-mail and a phone number. If you have an office that can accept visitors, then putting your office address and a map would help.

It is important to note that your contact information should also be easily visible on your website’s home page. This increases the trust rating of your website.

How to Create a Contact Form Using a Plugin?

There are several ways to add contact forms on your WordPress website. The easiest method is by using a plugin.

There are plenty of plugins to choose from and they easy are to set up. You can choose which fields you want to include on your contact form. Here are the ones that we can recommend.

How to Create a Contact Form Using Contact Form 7

Contact Form 7 is one of the most popular plugins for creating contact forms. Currently, it has over one million active installs. It is free and it gives you the ability to create multiple forms that you can modify with markup. You can also place a contact form in any post or page using a shortcode.

To create a contact form using Contact Form 7, you need to do the following steps:

After installing the plugin, mouse over “Contact” and then click “Contact Forms”.
Customizing the form may take a bit of HTML skills. Basically you use shortcodes to customize the fields. For example, the shortcodes for a text field looks like [text* your-name].
Under the “Mail” tab, you can configure the email that will be sent after the confirmation. You can add the values of the fields to your email using the corresponding tags. For example, the email field [email* your-email] has the tag [your-email].
Save the form.
Copy and paste the shortcode to insert the form to your Contact Us page or wherever you want it shown.

How to Create a Contact Form Using Visual Form Builder

Visual Form Builder was designed for fast and easy form building. There are no coding requirements. It has an intuitive drag and drop interface which lets you build forms fast.

You can insert your forms in any page or post using shortcodes. It has a logic based anti-spam system, a customizable confirmation message, and a multiple field layout option. It has an extensive FAQ page for customization and troubleshooting. It has an affordable premium version but the free version offers a lot too.

To create a contact form using Visual Form Builder, you need to do the following steps:

Install the plugin and navigate to “Visual Form Builder”.
To create a new form, click on “Add New Form” and fill in the required information.
Drag and drop the fields you need to the right and edit the details.
Save the form when you are done.
Under “Display Forms”, you can find the shortcode that you will paste on your Contact Us page.

How to Create a Contact Form Using Gravity Forms

Gravity Forms is the most popular paid contact form plugin for WordPress. It is one of most beginner friendly WordPress form plugins. With the help of some other add-ons, Gravity Forms can also be used to create surveys. It comes with premium support options and that is something you can get for spending extra bucks for this plugin.

To set up Gravity Forms, follow these steps:

Install the plugin and activate your product under Forms > Settings tab. Enter your activation key and you’re set to make your first contact form.
Create a new form and then start adding the necessary fields.
Customize the properties of each field.
Save your form.
Edit your contact page to insert the form by pasting the shortcode.

How to Create a Contact Form Using Ninja Forms

With its really simple, intuitive, drag-and-drop interface, Ninja Forms is an excellent and powerful tool for building contacts forms in WordPress. Ninja Forms’ base product is free. If you wish to extend its functionality like connecting with Campaign Monitor, Freshbooks, Salesforce, SMS notifications, etc., you can buy the corresponding premium extensions.

To create a contact form using Ninja Forms:

Once plugin is installed, find the “Forms” tab on your WordPress Dashboard then click on “Add New”.
In the “Form Settings” tab, you can see a lot of settings but the most important one to fill in is the form name. Other settings are quite intuitive but if you need some help, you can check out the Ninja Forms Documentation.
The “Field Settings” tab is where you actually build your form. Drag and drop the needed fields and fill out the information. It is very easy to navigate so you can play around to learn the features. The best way to learn how to do it is actually doing it yourself.
You can edit the email notifications in the “Notifications” tab.
Once you’ve completed your contact form, you can preview it in the “Form Preview” tab. Don’t forget to save it after.
Navigate to the ‘Edit’ mode of your Contact Us page. Find the section “Append A Ninja Form”, then select the form you just created and save the page.

How to Create a Contact Form Using Formidable Pro

Among WordPress users and developers, Formidable Pro is another popular choice. Formidable Pro provides a unique interface from which you can create stunning forms on your WordPress site. This form builder plugin has almost everything you’d need from a premium form plugin. Formidable Pro is a breath of fresh air. Its free version is powerful enough but going for the premium version gives you more features like integration with MailChimp, Aweber, Highrise, Twilio for SMS, WPML, and Zapier.

To set up a Formidable Pro contact form:

After installing, go to Formidable > Forms and click “Add New”’ at the top of the page.
You can start with a blank form or select from a template.
Drag and drop the needed fields. The field settings are quite intuitive so you will learn as you select them.
Click “Create” to save your form.
There are two ways to publish a form on your Contact Us page:
- Use the shortcode builder. Click “Formidable”, select the correct form, and then click “Insert into Post”.
  img1 – In the Edit mode of your page, click “Formidable”
  
  img2 – Select the correct form, then click “Insert into Post”
- Insert the shortcode manually. Navigate to your form and in the upper right corner click “Show” then copy the form shortcode.
  img1 – Click “Show”
  
  img2 – Copy either one of the two shortcodes

Note that the first shortcode [formidable id = 86], only shows the form itself. If you want the title and description to be displayed as well, copy the second shortcode [formidable id = 86 title=true description=true].

How to Create a Contact Form Using Fast Secure Contact Form

Fast Secure Contact Form is another popular free WordPress contact form plugin. Its name says it all. If you hate spam with a passion, then this is the plugin for you. It includes Akismet support to block spammers. You can also install a companion plugin to add CAPTCHA support.

To set up Fast Secure Contact Form:

Install the plugin.
Click the Plugin tab in the WordPress admin interface, then click “FS Contact Form”.
Under the basic setting fill in the form label and the welcome introduction. The most important thing is to fill in the email address where you should receive the user information.
The “Field” tab is where you actually build your form. You will see a default form with the default fields.
- To add a field, click “Add New Field”. To edit the field, click on “Show Details”.
- You can remove a field by clicking the “Show Details” then checking the “Disable Field”.
Save your form when you’re done and locate the form shortcode.
Copy and paste the shortcode to the Contact Us page.

Which is the Best Contact Form Plugin for WordPress?

Well there you have it! These are some of the more popular contact form plugins out there but there are more. Now you might ask what the best contact form to use is. Unfortunately, there is no definitive answer to that question as it will all depend on what you need in a contact form.

What is your favorite contact form plugin? Tell us in the comments.

How to Add a Hero Image in Storefront

July 1, 2016 By John 36 Comments

The idea of using hero images came about because of issues caused by homepage sliders. Using a homepage slider is discouraged as it will slow down your WooCommerce store and it doesn’t have good conversion rates. If your WooCommerce store running on Storefront has sliders and you are looking for a good alternative, you should consider using a hero image instead.

What is a Hero Image?

To better explain what a hero image is, let’s define what is the “fold” and “above the fold content”. Originally, the fold is a term used in the newspaper industry. Since newspapers are normally folded in half, the upper half of the front page will be the part of the newspaper that is exposed. This is where the most important content is featured, hence the term “above the fold content”. In web design, this is the area of the page that can be seen without scrolling down.

A hero image takes up most of the space above the fold. The trend is to make it large, attractive and relative to the content of the entire site.

It is important that you provide a complete overview of what your company/site is about with just a glance of your hero image. 90% of the time, the hero image has a large text in the center that is related to the branding of the site.

Preparing Your Images

Before you add your image, make sure you have it optimized for web use. You’d want to have the best image quality for the hero image, but you have to take into account the image size as well. As of 2016, the most common screen resolution is 1920x1080px. You should try not to go over this mark. Any excess is just a waste of page size and will just slow down your page load time.

Once you get the right resolution, try to further reduce the image size by down-scaling the image quality. You can actually reduce the image quality without having noticeable pixelation in the image. This is because the human eye can only see limited minute differences in the color changes. Try to strike a balance between having a small image size and having a good looking image. Check out this other post on how to optimize images. Once you are done preparing your image, just upload it to your WordPress site.

Adding a Hero Image in Storefront

To add a full-width hero image in Storefront, we need to use Storefront’s extensive hooks. We’ll just need to insert a few lines of code.

If you are comfortable working with code, you can paste the code below in the functions.php of your child theme. If you are a novice user, we recommend using My Custom Functions plugin to insert the code. Note that one error can cause your entire site to crash.

Copy and paste the code below. Just replace the “/wp-content/uploads/imageurl.jpg” with the URL of the image you uploaded earlier. Width set to 100% makes your image responsive to different screen sizes.

add_action( 'init', 'woa_add_hero_image_init' );
function woa_add_hero_image_init () {
   add_action( 'storefront_before_content', 'woa_add_hero_image', 5 );
}
function woa_add_hero_image() {
   if ( is_front_page() ) :
      ?>
         <div id="hero-image">
             <img src="/wp-content/uploads/imageurl.jpg" width="100%">
         </div>
      <?php
   endif;
}

Your hero image should now appear on your homepage below the main navigation.

If you want to add a link to the shop page or any other url on your image, copy and paste the code below. Just replace the “http://change_me_to_your_url” with the URL you want to link to.

add_action( 'init', 'woa_add_hero_image_init' );
function woa_add_hero_image_init () {
   add_action( 'storefront_before_content', 'woa_add_hero_image', 5 );
}
function woa_add_hero_image() {
   if ( is_front_page() ) :
      ?>
         <div id="hero-image">
             <a href="http://change_me_to_your_url"><img src="/wp-content/uploads/imageurl.jpg" width="100%"></a>
         </div>
      <?php
   endif;
}

Final Notes

Hero images are more effective than sliders in terms of aesthetics. You don’t have to keep using sliders if it’s slowing down your site. Explore more options. Keep your site simple and fast.

If you are still using sliders, you are most likely hurting your site speed. And a slow WooCommerce store will convert less. Your Google rankings could also suffer as a result. It’s time to do away with the slider. Go with a hero image instead.

Was this tutorial helpful? If you have any questions or anything you’d like to add, please let us know in the comments.

« Previous Page
1
…
5
6
7
8
9
…
15
Next Page »