code snippet Tag Archives

How to Integrate WooCommerce into a Non-WooThemes Theme

March 2, 2015 By John Leave a Comment

WooCommerce (WC) and themes from WooThemes go hand in hand when building an e-commerce website. But what if you wanted to use a theme not from WooThemes? There may be some compatibility issues but it could still work. To solve these problems, we’ll need to set it up in such a way that your non-WooCommerce or custom theme supports Woocommerce and make the integration flawless.

WooCommerce provides two methods to do this. Either we use hooks or make use of their catch-all woocommerce_content() function. The second method is the easier of the two so we’ll only talk about the second method of the catch-all woocommerce_content() function in this post.

To start, know that it’s divided into 5 simple steps which we’ll outline below:

STEP 1: Duplicate your page.php file and rename it as woocommerce.php

For this, you’ll need to access your website files using an FTP program or cPanel file manager. Find your page.php file which is usually located in wp-content/themes/[YOURTHEME]/page.php.

All themes should have this file so make a copy of yours then rename it to woocommerce.php. Basically, you’re creating a file called woocommerce.php where the content is the same as page.php.

If you’re using a child theme, you’ll need to copy the page.php of the parent theme and place woocommerce.php on the child theme so that you don’t have to worry about it being overwritten when the theme is updated.

STEP 2: Edit woocommerce.php and locate the loop

After creating the file woocommerce.php, you then need to edit it with the editor of your choice. When it’s opened, browse through and look for code that looks like the one below:

It usually starts with

<?php if ( have_posts() ) :

and ends with

<?php endif; ?>

but in our case it ends with

endwhile; ?>

so it’s not always the same. This bit is called the loop and you need to determine where it starts and where it ends.

STEP 3: Replace the loop with <?php woocommerce_content(); ?>

Now, after finding the loop, replace it with:

<?php woocommerce_content(); ?>

That lengthy bit of code will be replaced by just this one line. And that’s entirely the point – nothing to be alarmed of. And when you’ve done that, it should look like the one below:

Now, save it.

STEP 4: Declare support for WooCommerce

Next, we’ll do something about the notice message that looks like the one below.

To do this, we’ll need to add:

add_theme_support( 'woocommerce' );

to our functions.php. If you’re using a child theme, you’ll need to find the functions.php file that is inside the child theme folder. Once you’ve found the correct functions.php, place the code exactly at the end. Now, save. And that’s it. That notice should be gone now.

STEP 5: Bask in your success

And that’s how to integrate WooCommerce with a non-Woothemes Theme. For the unavoidable instances that you need to make use of a non-WooCommerce or custom theme, you need to follow the steps above.

Do you have any other suggestions? Feel free to comment below.

How to Add a Favicon to your WooCommerce Store

February 29, 2016 By John Leave a Comment

What is a Favicon?

Favicons are typically 16×16 square images. Old versions of Internet Explorer refer to the bookmark section as “favorites”. Hence the name “favorites icon” or favicon for short.

What is the Point of Having Favicons?

The main purpose of having favicons is to easily distinguish different websites in the bookmarks page. Here is a snapshot of a bookmarks page. Notice that the pages without favicons are hard to distinguish if they belong to the same website or not.

Search engines and websites then are not as powerful and strongly connected with links. If you came across a good site, it was usually a good idea to bookmark it. As a result, people often have a long list in their “Favorites page”. The favicon answers the need to tell each website apart in the list at a glance.

Favicons are not limited to bookmarks pages though. It is also used around different parts of the browser like the history page, tabs, and more. Favicons play a huge role in online branding providing easy recognition and association. If you are serious in brand recognition, then you must add a favicon to your site.

Adding a Favicon to Your Woocommerce Store

Starting from WordPress 4.3, you can now add your favicon directly using the admin panel. Navigate to Appearance > Customize > Site Title, Tagline, and Logo.

Simply select a 512×512 image from your media library or you can upload a new one. If you select an image larger than 512×512 or a non-square image, you will receive a prompt to crop your image.

After this, click save and publish. Refresh or restart your browser to see your new favicon.

Note that this is a default feature since WordPress 4.3. If you don’t see this feature in the theme you are using, contact your theme’s support for assistance. Or you can do it the old fashioned way with the steps below.

How to Make a Favicon?

If you have a small logo, that would be good to use for a favicon. Otherwise, you’ll have to create a miniature version of your logo. If you are not comfortable working with graphics, you can contact your graphic designer to help you out.

How to Manually Add a Favicon?

To add a favicon to your WooCommerce store, start by saving the image to one of your site’s folders. You can upload it using FTP or via media library upload. After saving it, take note of the filename and file path. It is best to save your favicon in your website’s root folder or in the images folder of your theme’s folder.

On your Dashboard, navigate to Appearance > Editor. Find your theme’s header.php file. Remember, the best way to edit your theme’s files is via a Child Theme. You can select one from several Storefront child themes to help you customize your WooCommerce store.

Paste the code below in your header.php file just below the other lines starting with “<link rel=”.

<link rel="icon" href="http://www.domain.com/favicon.png" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.domain.com/favicon.ico" type="image/x-icon" />

Replace “http://www.domain.com/favicon.ico” with the file path of your favicon. Save the file and you’re done. You may need to restart your browser to see the new favicon.

I hope we helped you in adding a favicon to your WooCommerce store. If you have any questions and feedback, leave us a comment below. We are always ready to help.

How to Create a Child Theme for Storefront

February 26, 2016 By John 2 Comments

Optimizing your website usually means making changes to your theme. These changes can range from simple to complex. It’s easy to make changes on your website but the problem is that you will lose all your changes when you update your theme.

There are ways to update your theme without losing your customizations and the best way is to use a child theme. In this post, we will teach you how you can use a child theme to make the website development process easier.

We’ll teach you how to create a child theme for Storefront theme. Storefront is the official theme for WooCommerce. It’s a good parent theme to work on as it’s built with the same high standards as WooCommerce. It is entirely free and 100% compatible with WooCommerce.

What is a Child Theme

A child theme is not a full theme. It only inherits all the code, styling and functionality of the main or parent theme. Changes made in a child theme do not affect the parent theme. This allows users to tweak a theme without having to worry about losing the customizations when updating the theme. Using a child theme is best practice for altering an existing theme.

A parent theme is the default of all your WordPress themes. It contains the templates, design and functionality needed to run your website on WordPress. Note that parent themes are different from theme frameworks. A parent theme is a complete theme that you can use right away while a theme framework like Genesis is a developmental template.

Why You Should Use a Child Theme

There are thousands of themes out there that you can use for your WordPress installation. The problem is they all look generic and may not exactly fit your website needs. Modifying the theme with CSS is recommended. Here are some reasons why you should use a child theme:

Speed Up Site Development

Child themes allow you to quickly add or modify specific functions or template files. It allows you to significantly speed up site development as you would not need to write a lot of code from scratch. You’ll get a great deal of flexibility especially from powerful theme frameworks like Genesis.

Preserve Theme Changes

Themes get updates from time to time. These updates are important as these address security exploits that come to light. Updating your theme will wipe all the changes you made to the base theme. However, if you use a child theme, you can preserve any changes you make to the child theme when you update the base theme.

Safe Fallback

Creating or editing a theme entails a lot of work. However, when you make customizations on a child theme, you have your parent theme’s codes and functionality as fallback in case you mess up something. The child theme will only change a specific function or style when you want it to.

Secure Your Site

WPBeginner found out that 83% of hacked WordPress sites are not upgraded properly. The safest way to update your theme is by using a child theme.

When to Use Child Themes

If you are in any way customizing your theme, then you should be using a child theme. Using a child theme is best practice.

If you are not familiar with CSS and PHP, creating your own child theme can be a challenge. You would also need to learn about the functionalities of your parent theme.

Robust frameworks can be more challenging as they have their own filters and hooks.

How to Create a Child Theme

Setting up a child theme for any WordPress theme is easy but you need to pick a good parent theme. Not all themes can be good parent themes. We recommend Storefront or the Genesis framework.

A good parent theme is a solid foundation for your site. You will be building your child theme over it so it has to be flexible and coded properly.

You can use plugins to generate a child theme or you can do it manually. You just need three things to start: child theme directory, style.css file and functions.php file.

Child Theme Folder

This folder will serve as the container for your stylesheet and function files. It is ideal to use the name of your parent theme as folder name and append it with “-child”. In this case, we named our directory “Storefront-child”. Make sure that your child theme’s directory name has no spaces to avoid possible errors. For the meantime, you can create this folder in your computer.

Child Theme Stylesheet

This is a basic style.css file. You need to set this stylesheet to inherit the styles from your parent theme. To do that, insert the stylesheet header below and replace them with relevant details. Note that customizations done here will override parent theme styles.

/*
 Theme Name:   Storefront Child
 Theme URI:    http://sitename.com/storefront/
 Description:  Storefront Child Theme
 Author:       Nick J
 Author URI:   http://sitename.com
 Template:     storefront /*this is case sensitive*/
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, full-width, responsive-layout, accessibility-ready
 Text Domain:  storefront-child
*/
/*Theme customisations start here*/

We won’t teach you how to use CSS. It is impossible to cover that in one article. You can learn CSS here or have a developer do the CSS tweaks on your website.

Child Theme Function

Previous methods suggest that you use “@import” in your stylesheet to load your child theme. This is no longer considered best practice. You just need to “enqueue” your parent theme’s stylesheet in your child theme’s functions.php file. To do this, you can use “wp_enqueue_scripts action” and use “wp_enqueue_style()”.

The stylesheet for your child theme is usually loaded automatically. If not, you will need to enqueue it as well. You also need to make sure that the child stylesheet gets priority. You can use the code below instead. This code sets ‘parent-style’ as a dependency so your child-theme stylesheet loads after it.

<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Activation

To add a child theme to your WordPress themes, you need to create a .zip file of your child theme folder. You can use 7-zip or Winrar to do this. Make sure that you have your style.css and functions.php inside your child theme folder.

It is best to take note and keep records of other plugin settings before you activate your child theme. Once you’re done, you can upload this in your WordPress via Appearance > Add Themes.

WordPress will install your child theme just like any other theme. Once installed, you need to activate this by clicking on ‘Activate’.

You can also choose to activate your child theme later when you go to Appearance > Themes.

Once installed or activated, you can apply any edits to functions.php and to the stylesheet directly on the child theme files

Popular Child Themes for Storefront

If creating your own child theme is proving to be a bit too difficult for you, you can always purchase one.

There are a handful of child themes for Storefront right now. Note that you should install Storefront base theme first before installing these child themes.

Boutique

Boutique is simple and easy to customize. You can start selling after you create your color theme, add your logo and content.

Deli

If you want to add more personality to your store, you can use Deli. This child theme is great for small businesses. It has color schemes and textures that are inspired by nature.

Conclusion

Having a child theme is best practice when doing development work on your WooCommerce site. More importantly, using a child theme allows you to freely update your theme without losing any customizations you made on the child theme. A good and solid foundation is important for child themes. Hope this article has been helpful. Do you have any questions about child themes or anything you’d like to add? Let us know in the comments.

How to Fix Checkout Problems in WooCommerce

June 6, 2016 By John 84 Comments

One of the biggest problems a WooCommerce store owner can encounter is when the checkout fails. There are a lot of different types of issues that could happen during checkout, but these can be fixed easily if you can identify what is causing the problem. However, finding out the cause is not always easy for the average user. In this post, we will teach you how to fix the common checkout problems in WooCommerce.

The information in this post may or may not help with the specific problem that you are experiencing with your checkout. You may have a similar problem but the source could be different, hence the solutions mentioned here may not work for everyone. It is best to have a developer adept in both WordPress and WooCommerce make the suggested fixes for you. We also recommend that you create a staging/development site and do your debugging there rather than on the live site.

Most Common WooCommerce Checkout Issues

Here at Wooassist, a lot of new clients come to us with problems on their checkout. Having issues on the checkout page can be daunting as it can be difficult to figure out the cause. The checkout page is crucial because it is the last page of the “user shopping experience”. A simple error that could be fixed in a few minutes can hurt your business if it is not addressed swiftly. You could end up losing business opportunities and customers. To fix the problem, we need to figure out what the error is first.

Below are some common issues we encounter that you could be experiencing right now on your WooCommerce store.

Checkout Page Isn’t Available and is Just Redirecting Back to an Empty Cart

While there are many reasons why checkout would redirect to an empty cart, it’s usually because your hosting is not totally compatible with WooCommerce.

The issue is most common with stores that enabled “force https on checkout”. In this case, the issue could be caused by a PHP security module called Suhosin. WooCommerce already has an official fix posted for this.

Simply paste the code below in your server’s PHP settings.

suhosin.session.cryptdocroot = Off

Review Order Section is Stuck on Loading

When a customer enters their shipping/billing information, this triggers a script to reload the review order data. When there is an error in the script, it will just get stuck without an error shown that would’ve helped you understand what’s happening.

This usually happens when the returned data is not what WooCommerce expects. This is caused by either a plugin or template conflict. To fix this, you will need to check compatibility with all plugins installed and update any outdated WooCommerce templates.

Payment Option is Not Working

Some popular payments options are PayPal, Stripe, Authorize.net and eWay. These are the services that you’ve installed in your store to handle the payment process between you and your customers. This is the page where users enter their credit card information and hit the “place order” button.

Here are some scenarios where the payment option does not work:

Payment option is not available on checkout

You are sure that you have completely configured your payment option but it’s not showing up on the checkout page. This usually happens with stores that don’t have an SSL certificate installed and the payment option requires one. You can learn more about SSL in this post.

Authentication error pops up

When an authentication error pops up, this means there is something wrong between the connection of your store and your payment option service provider. To fix this, check that the credentials you entered in the payment option’s settings are correct.

Unknown error pops up

Unknown error popping up could mean that a PHP script in WooCommerce isn’t working properly. There are many things that could cause this. It may be due to a plugin conflict, or your hosting doesn’t support the custom AJAX endpoints utilized by WooCommerce. To fix this you will need to check each plugin installed. Try disabling the plugins one at a time and see if that fixes your problem.

Nothing happens after clicking “Place order” button

If nothing happens when you click the place order button, then most likely there is a JavaScript conflict in the checkout page. The best way to fix this is to check your browser’s console to see which scripts are in conflict. You’ll want a developer to do this for you though.

Did any of these help solve your checkout page problem? If you have any other problems with checkout on your WooCommerce store, you can hit the comments or contact us and we’ll see what we can do for you.

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.