Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Site Maintenance
  • 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 / How-To Articles / How to Integrate WooCommerce into a non-WooThemes Theme

How to Integrate WooCommerce into a non-WooThemes Theme

March 2, 2015 By Nick J Leave a Comment

how to integrate WooCommerce into a non-WooThemes themeWooCommerce (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-WC or custom theme supports woocommerce and make the integration flawless.

WC gives us two methods to do this in their documentation: either we use hooks or make use of their catch-all woocommerce_content() function. The second method is the easier of the two so I’ll only talk about the second method of the catch-all woocommerce_content() function in this post.

To start, know that it’s basically divided into 5 simple steps of which I’ll clearly 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 of your choice or cPanel file manager. Find your page.php file which is usually located in wp-content/themes/[YOURTHEME]/page.php.

copying page-php

 

creating woocommerce.php

All themes should have this file so simply make a copy of yours then rename it as woocommerce.php. Basically, you’re creating a file called woocommerce.php in which the code written inside is the same as in page.php.

Minor disclaimer: 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:

the loop

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 just 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(); ?>

I know what you’re thinking and the answer is yes. 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:

woocommerce-content

Now, save it.

STEP 4: Declare support for WooCommerce

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

woocommerce does not support notice

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 pesky notice should be gone now.

STEP 5: Bask in your success

Yup, you heard that right. We’re done here. Bask in your success a little.

 

So that’s about it – that’s how to integrate woocommerce into a non-Woothemes Theme. For the unavoidable instances that you need to make use of a non-WC or custom theme, you just need to follow those steps above and you’re free to use woocommerce however you like.

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

People that read this article also liked

How to Change the Arrows in Pagination for Storefront and WooCommerce wooassist favicon-featureHow to Add a Favicon to your WooCommerce Store How to Rename Primary Menu in Mobile View for Storefront Theme How to Make WooCommerce Pages Full Width in Storefront Theme

Filed Under: How-To Articles Tagged With: code snippet, design tweaks, e-commerce, how-to, WooCommerce, woothemes

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Woocommerce Support

wooassist-team-in-Iloilo

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

Happy Wooassist Customers

Awesome! Fantastic! I just went to our site and I see that our site has been fixed!! We are getting orders again thanks to you all at WooAssist! Our site has not worked and looked this good for many months!! You all are awesome! Thank you so much for fixing our site! You have a customer for life! Thanks for making my day wonderful!

Kenneth Arnold

We have been quite pleased working with WooAssist as they help fill in the gaps of our development needs, all at a great price. They are always timely and communicate great, I highly recommend their services.

James Grasty

My husband and I am EXTREMELY pleased with the WooAssist Team. They provide excellent service, are very knowledgeable, and super easy to communicate with. The team ALWAYS has our company's best interests in mind. I love WooAssist! All of you make my job easier.

Jennifer Taft leetaft.com

Categories

  • Code Snippets
  • How-To Articles
  • Interviews
  • SEO For E-Commerce
  • Theme and Plugin Reviews
  • Wooassist News
  • WordPress/WooCommerce News

Recent Posts

  • The Ultimate Guide on How to Set Up Shipping on Your WooCommerce Store
  • WordPress Site Gets Infected
  • Where to Hire a WooCommerce Developer?
  • Recent Spike in Attacks Targeting Outdated WordPress Plugins
  • Security Vulnerability in Spam protection, AntiSpam, FireWall by CleanTalk
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

Your subscription could not be saved. Please try again.
Your subscription has been successful.

YOURS FREE!

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:
8 Storie St.
CLONTARF QLD 4019

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Copyright © 2023 · Wooassist

Yours FREE!

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