Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Services
    • Site Maintenance
    • AI SEO and Content Marketing
  • Blog
    • How-To Articles
    • Code Snippets
    • SEO For E-Commerce
    • Theme and Plugin Reviews
    • Wooassist News
    • WordPress/WooCommerce News
    • Interviews
  • About Us
  • Contact
You are here: Home / Archives for plugins

How to Edit Storefront Theme Header

March 6, 2017 By John 24 Comments

Editors Note: We have decided to retire the plugin mentioned in this article as the compact mode of the plugin no longer works with the new version of Storefront theme.

Editing a theme’s header is difficult for the average WordPress user. However, we’ve made it easier to do this for Storefront theme. With just a few clicks, you’ll be able to edit the format of the header, hide header elements, or change background, text and link colors.

But Why Storefront?

Storefront is the best theme to use with WooCommerce, which is the most popular e-commerce platform on WordPress. The theme was made and is being updated by the same people who created WooCommerce so compatibility will never be an issue. If you are already using Storefront theme on your WooCommerce store, then good for you. If not, you should consider using it to prevent any issues in the long run.

We’ve come across many WooCommerce stores that had a lot of problems due to conflicts with the theme. Each and every time, we recommended the use of Storefront theme. And each and every time, using Storefront fixed the problem.

Hence, we’ve created the Storefront Header Picker Plugin to make editing your header that much easier.

How to Install Storefront Header Picker Plugin

Header Layout - How to Edit Storefront Theme HeaderYou install the plugin just like any other plugin.

  1. Go to your WordPress Dashboard and click on “Plugins”.
  2. Click on “Add New” and search for “Storefront Header Picker”.
  3. Click on “Install” and then activate the plugin.

How to Edit Storefront Theme Header

  1. To edit your Storefront theme header, click on Appearance > Customize > Header.
  2. Here you can choose between three header types: Default, Compact, and Centered.
  3. You can also choose to hide the product search bar and the cart. Just check/uncheck the corresponding boxes.
  4. At the bottom, you can change text and header colors.
  5. Once done, just click on “Save & Publish”.
Centered-Layout-How-to-Edit-Storefront-Theme-Header
Centered Layout
Compact-Layout-How-to-Edit-Storefront-Theme-Header
Compact Layout

Will This Work for Any Other Theme?

Unfortunately, this plugin will only wok for Storefront theme. It makes use of Storefront action hooks and filters. Activating the plugin when you are using a different theme will bring up a warning message.

Did this plugin help you edit your Storefront theme header? Do you have any questions about the plugin? Let us know in the comments.

Filed Under: How-To Articles, Theme and Plugin Reviews Tagged With: design tweaks, marketing strategy, plugins, Storefront, website development, Wooassist

13 Routine Maintenance Tasks that You Should Do on WordPress and WooCommerce

April 2, 2018 By John Leave a Comment

Routine Maintenance Tasks for WordPress

Maintaining a WooCommerce store is a lot of work. There are a lot of routine maintenance tasks for WordPress and WooCommerce that need to be done on a regular basis. In this post, we list down the most important tasks that you should do on your WooCommerce store.

1. Create Regular Website Backups

Create Regular Website BackupsCreating regular site backups is critical. It is your first fallback in case something breaks on your site. While you can make backups manually, it is important to make regular automated backups. Check with your hosting provider if they create regular backups of your database as well as a complete backup of your site. You can also install a backup plugin such as Updraft Plus or BackWPup and set it up to make regular automated backups for you. We still recommend creating manual backups before doing major work on your WooCommerce store though.

2. Update WordPress, WooCommerce, Themes and Plugins

Updating all elements of your WooCommerce store should be done on a regular basis. Do this weekly if you have the time. If not, monthly updates are good enough. Updates include updating WordPress Core, themes, WooCommerce and all other installed plugins. Remember to backup up your site before proceeding with updates since updates could cause your website to break. If you have a development site, it would be best to test the updates first on this staging environment. Then, do some user testing to make sure that there are no errors. After that, you can proceed to update your live site. When that’s done, you will need to do another round of testing. Some important elements to test include checkout, add to cart, contact form emails, opt-in forms and other customizations that were done on the site.

3. Update WooCommerce Template Files

After updating WooCommerce, you will sometimes get an error notifying you of outdated WooCommerce template files. This just means that your theme has not updated to include the latest WooCommerce template files. In some cases, this could cause some formatting issues on your store. If there are no errors on your store, you can simply wait for your theme to release an update that includes the most recent template files. Or you can also fix this manually by following the steps in this documentation from WooCommerce.

4. Change User Passwords

It is important to use strong passwords. However, it is just as important to change passwords on a regular basis. There are times when security breaches can go undetected for a long time. Changing your password regularly blocks out these security breaches that you might not realize are there. You should change your password for WordPress admin, FTP, database and cPanel. And a pro-tip, never use “admin” as your username. This is the first username that hackers try out when brute forcing into websites.

5. Optimize Your Product Images

We’ve always emphasized the importance of optimizing images for your WooCommerce store to keep your site running fast. If you have uploaded any product image that is more than 100KB in size, it might be a good idea to replace that image with an optimized product image. To learn more, you can check out our blog post on how to optimize images.

6. Approve and Respond to Product Reviews

Moderate Product ReviewsIf you are not asking your customers for product reviews then you might want to reconsider. Most people who buy online look for product reviews before they decide to purchase something. One study found that 85.57% of users read reviews before they purchase. And if you are asking your customers for product reviews, then you will need to approve reviews on a regular basis. A word of advice, do not remove negative reviews of your products. Instead, make it an avenue where you can show good customer service. Respond to the negative review. Offer a replacement for a defective product or offer a refund. People reading reviews will want to see some negative reviews to get a well-rounded picture of your product. When moderating reviews, you only need to remove the spam reviews.

7. Approve and Respond to Blog Comments

If you have a blog that is made to drive customer engagement, then your blog will most likely attract comments. Same with product reviews; don’t delete the negative comments. Rather, address them positively. Remove any spam comments as this will negatively impact the user experience of your blog. If you are using Akismet: Anti Spam plugin, this will block out most spam comments. However, some spam comments can still get through and you will need to manage them manually.

8. Test Your Contact Forms and Email Opt-in Forms

Every now and then, you will need to make sure that your contact forms and email opt-in forms are working. Just fill in your forms and send. If you receive it in your email, then you’re all good. But if you don’t, there’s something wrong and you need to do something about it. Have your developer look into it.

9. Optimize Your Database

Over time, your database accumulates a lot of gunk and you need to clean it to make sure your website runs fast. Before you go about this task, make sure you create a backup. You can choose to clean your database manually if you are comfortable and familiar with working on your database. Otherwise, you can use a plugin to do the optimizations for you. Notable plugins include WP-DBManager and WP-Optimize. You can check out our guide on how to clean your database.

10. Test Your WooCommerce Store’s Speed

If you have not yet made optimizations to your WooCommerce store’s speed, you should consider doing it now. Site speed has become increasingly important for WooCommerce store owners. Google now considers site speed as a ranking factor for SEO. Also, if you have a slow site, this will negatively impact the customer’s experience on your site. It is easy for your customers to buy instead from your competitors. You can test your site speed on Google’s Page Speed test and Google will provide you with recommendations on how you can improve your site’s speed. Other notable tools that you can use to test your site are Pingdom Website Speed Test and GTmetrix.

11. Scan Your Site for Malware

One way to keep on top of your website’s security is to regularly test your site for any malware. If you are connected to Google Search Console, it will let you know if malware is detected on your site. If your site has been found to have any form of malware, Google Chrome will actually alert your visitors that your site is dangerous. This can have devastating effects on your traffic and conversion rate. No one will want to enter their payment information on a site that has malware. In extreme cases, Google may block your site from appearing in the Google search results page. You want to prevent this from happening. It would be best to invest on your site’s security by installing a security plugin such as Sucuri Security and WordFence. Even if you have those plugins installed, it is still a good idea to a manual scan. You can scan your website at Sucuri’s Website Malware and Security Scanner, or at SiteGuarding. If any manual scans detect anything malicious, you can contact your developer to fix the issue. You should get it fixed before Google applies any penalties. Wooassist also offers a security hardening service to improve the security of your site so you can prevent this from happening.

12. Fix Broken Links

Broken links are bad for user experience so check your site regularly for any broken links. You can use W3C Link Checker or any other similar tool to check for broken links. Once you’ve found the broken links on your site, you can start fixing them. You can either remove the links or points the links to a new relevant URL.

13. Test Your Checkout Process

Last but definitely not the least; you should regularly test your checkout process. If you suddenly experience loss of sales, it’s a good idea to test your checkout. There might be an error that prevents your customers from checking out. Testing also gives you a feel of what your customers go through so you can optimize your checkout. Once you’ve determined that your checkout has problems, you can check out our post on how to fix the most common checkout problems in WooCommerce.

Final Notes

By doing these tasks on a regular basis, you can keep yourself on top of any issues that may occur on your WooCommerce store. If you find yourself overwhelmed by the all these, you can hire someone else to do it. You can also contact us and our team will be glad to assist with any of these tasks.

Are there any other routine maintenance tasks for WordPress and WooCommerce you think should be done on a regular basis? Do you have any suggestions? Let us know in the comments.

Filed Under: How-To Articles Tagged With: blog, contact form, conversion optimization, image optimization, plugins, security, site speed optimization, website maintenance, WooCommerce, WooCommerce products, WordPress, WordPress SEO, WordPress updates

Update Your WooCommerce Store Regularly to Prevent Your Site from Breaking

March 19, 2019 By John Leave a Comment

Update Your WooCommerce Store

Many times, when WooCommerce store owners come to us seeking for help, we usually find that the cause of the problem is an outdated site. In some cases, we find that the site’s plugins and themes have not been updated in years. And when a WooCommerce store site has not been updated in years, suddenly updating can sometimes break more things. Our recommendation is to update regularly.

Why Should You Update?

If you update your site regularly, you’ll be dealing with a lot less problems on your WooCommerce store. While it’s true that site updates may cause issues, these issues are usually less severe than issues that come up when you don’t update. In addition, you can troubleshoot these issues on a staging site which will have no effects on your live site. If your site breaks because it is outdated, your live site can go down for an indefinite period. That means no sales until you fix the issue. If this happens during a critical time for your business, it can have negative effects on your sales. Imagine running TV ads and then your site breaks due to being outdated. That’s advertising dollars down the drain.

How Often Should You Update Your WooCommerce Store?

The best schedule we’ve found for site updates is doing them at least monthly. You can update more often especially when severe security issues are patched.

What Happens When You Don’t Update?

When you don’t update your site, one or a few of these things could happen:

  • Your site may go down and become inaccessible
  • Your site layout may break
  • Images and icons may not load
  • Your payment processor may stop working
  • Your shipping plugins may stop working
  • Your product page may break
  • You may have various problems on your cart and checkout
  • Your sign-up forms and contact form may stop working
  • Your site may be hacked and infected with malware
  • Your SEO rating may drop
update woocommerce to increase security

What Do You Need to Do Before Updating Your Site?

Test Updates on a Development Site

It is important to test updates on a development site. If you do not have a development site, also called a staging site, you can check with your hosting company if they offer a staging service. Some hosting companies like WPEngine provide an easy-to-set-up staging service. You can also set up a staging site yourself. You can check this blog post to learn how to create a staging site for WordPress.

Before you update your live site, test updates on your development site first. Then do some user testing to find out if there are any issues with the updates. Some things you need to test are:

  • Your Site Layout
  • Opt-in Forms
  • Contact Forms
  • Shopping Cart
  • Checkout
  • Any custom development you’ve done on the site

If you find any issues on your staging site, it’s time to get fixing. If you do not know how to go about fixing the issue, you can check out our guide on troubleshooting for WooCommerce. You can also drop us an email so we can help you out.

Create a Backup

If there are no issues on your staging site, it’s time to update your live site. But first, don’t forget to create a backup. For backups, we can recommend UpdraftPlus or BackWPup. Once backup is successful, you can proceed to update then test your live site again. If more issues come up, proceed to troubleshoot.

backup your woocommerce store before updating

I updated my WooCommerce Store but my Site is Still Broken

Renew Your Plugin Subscriptions

Sometimes, issues may persist because automatic update are not available for your plugins. This is usually because your plugin subscription has expired. If this happens, you will need to renew your subscription. It is now easier to manage WooCommerce plugin subscriptions. You just need to connect your WooCommerce account to your WooCommerce store. For third-party premium plugins, you may need to check manually.

Do a Plugin Audit and Remove Abandoned Plugins

Another common reason why some websites break after updates is that it has a plugin that has been abandoned by the plugin developer. If a plugin is abandoned by the developer, it will not receive any updates and will eventually stop working. And it can break your site. Worse, it can even become a backdoor for hackers to get into your site. It is not easy to detect if your plugins are no longer being updated by the plugin developer so you will have to do it manually. View the details of each plugin on your plugin list and check when it was last updated. If the plugin has not been updated in a year or more, then remove that plugin right away. If a plugin has not been updated in over 6 months, use your better judgment if the plugin can be removed.

Find Incompatible Plugins

In some cases, plugins may break compatibility with each other. This is one reason why it is best to keep plugins to a minimum. Having more plugins can cause more problems. When plugins break compatibility, various errors can pop up on your site.

To troubleshoot incompatible plugins, deactivate all plugins on your site except WooCommerce. Then enable them one by and one while testing for the error. With some trial and error, you’ll be able to shortlist the incompatible plugins. When you find the incompatible plugins, you can replace one plugin with a compatible one. You can also report the issue to the plugin developers so they can address it.

WooCommerce Templates are Outdated

Sometimes you’ll find an error on your WordPress Dashboard alerting you of outdated WooCommerce templates. Most theme developers update their WooCommerce templates so check if your theme is updated. If your using a premium theme and have an expired license, you will receive automatic updates. If this is the case, update your subscription to get the updated templates. You can also fix this issue by following this guide from WooCommerce.

Final Notes

Add updating your WooCommerce store to your monthly to-do list to ensure your site is secure and won’t break in an uncontrolled environment. Renew your plugin subscriptions and do a plugin audit. If you find that you do not have time to do the monthly WooCommerce store updates yourself, the Wooassist team can help.

Filed Under: How-To Articles Tagged With: backup, plugins, security, shopping cart, WooCommerce, WooCommerce updates

How to Create a Contact Form for WooCommerce

June 3, 2016 By John Leave a Comment

How to Create a Contact Form for Your E-Commerce Store

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

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:

  1. After installing the plugin, mouse over “Contact” and then click “Contact Forms”.
  2. 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].Contact Form 7_Add New
  3. 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].Contact Form 7_Mail Tab
  4. Save the form.
  5. 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

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:

  1. Install the plugin and navigate to “Visual Form Builder”.
  2. To create a new form, click on “Add New Form” and fill in the required information.
  3. Drag and drop the fields you need to the right and edit the details.Visual Form Builder_Add New
  4. Save the form when you are done.
  5. 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

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:

  1. 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.
  2. Create a new form and then start adding the necessary fields.
  3. Customize the properties of each field.
  4. Save your form.
  5. Edit your contact page to insert the form by pasting the shortcode. Gravity Forms_Form Editor

How to Create a Contact Form Using Ninja Forms

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:

  1. Once plugin is installed, find the “Forms” tab on your WordPress Dashboard then click on “Add New”.
  2. 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.Ninja Forms_Form Settings
  3. 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.Ninja Forms_Field Settings
  4. You can edit the email notifications in the “Notifications” tab.
  5. Once you’ve completed your contact form, you can preview it in the “Form Preview” tab. Don’t forget to save it after.
  6. 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.Ninja Forms_Append

How to Create a Contact Form Using Formidable Pro

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:

  1. After installing, go to Formidable > Forms and click “Add New”’ at the top of the page.
  2. You can start with a blank form or select from a template.
  3. Drag and drop the needed fields. The field settings are quite intuitive so you will learn as you select them.
  4. Click “Create” to save your form.
  5. 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”.

      Formidable Pro_Shortcode Builder
      img1 – In the Edit mode of your page, click “Formidable”

      Formidable Pro_Shortcode Builder_Insert
      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.

      Formidable Pro_Show Shortcode
      img1 – Click “Show”

      Formidable Pro_Show Shortcodes
      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:

  1. Install the plugin.
  2. Click the Plugin tab in the WordPress admin interface, then click “FS Contact Form”.
  3. 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.
  4. 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”.
  5. Save your form when you’re done and locate the form shortcode.
  6. 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.

Filed Under: How-To Articles, Theme and Plugin Reviews Tagged With: admin, e-commerce, how-to, plugins, WordPress

How to Add a Hero Image in Storefront

July 1, 2016 By John 36 Comments

laptop_Hero-Image

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.

How-to-add-a-hero-image-in-Storefront-Appearance-Functions

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.

how to add a hero image in storefront

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.

Filed Under: Code Snippets, How-To Articles Tagged With: admin, best practices, code snippet, conversion optimization, design tweaks, how-to, image optimization, plugins, site speed optimization, Storefront

  • « Previous Page
  • 1
  • 2
  • 3
  • 4
  • 5
  • …
  • 8
  • Next Page »
Let us support your online store so you can manage your business

Get started today

Get 2 Hours of FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That’s 4 hours for only $75

BUY NOW

Free eBook

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

Quick Links

  • How it Works
  • Pricing
  • Blog
  • Contact
  • About Wooassist
  • My Account
  • Checkout
  • Privacy Policy
  • Cookie Policy
  • Terms and Conditions

Wooassist

Australia:
59 Luke St.
Hemmant QLD 4174

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

     

Copyright © 2026 · Wooassist

Yours FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales