Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jonathan Grieve
Treehouse Moderator 91,253 PointsIntegrating WooCommerce with my Custom Theme (WordPress)
Alright,
I've searched high and low for answers to this but I am a newbie when it comes to Woocommerce development. For all I know I'm approaching this in completely the wrong way and it;s not possible to to simply design a theme and then integrate WooCommerce into it. But then, why do other out of the box WooCommerce themes that you can get work so effortlessly with the plugin?
The last thing I want to do is use an out of the box solution. Mainly because I've spent a lot of time developing the theme prior to WooCommerce but with WooCommerce in mind. It has to be a custom theme.
Which then of course means I need to customise the front end which is fine, I expect that but I can't see for the life of me why I dont get any output at all and why it defaults automatically to the page.php file. I've done all the right things as far as I can see to hook up WooCommerce to the theme including follwing the instructions here.
https://docs.woothemes.com/document/third-party-custom-theme-compatibility/
Here's my functions.php code.
<?php
add_theme_support( 'menus' );
add_theme_support( 'widgets' );
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}
/*To dom_import_simplexml
Theme Development Tasks
----> Remove version numbers from file front end
----> "Hot off the hook" front page images - Maybe use as Custom Post Type?
----> Download plugins - Custom Post Type UI and Advanced Custom Fields
----> Maybe we don't need the modal form for adding to the cart. -- Woocommerce will drive form filling
----> Add pagination on main product page. https://codex.wordpress.org/Pagination
WooCommerce Tasks
*/
/****ENQUEUE SCRIPTS AND STYLES****/
function c2h_scripts() {
/*
//second parameter is an array of dependents for js files array('')
//third parameter - version number of enqueued file (optional)
//final parameter - location of file path in front end - header or footer. True to appear in footer, false for header
*/
wp_enqueue_script('main-jquery', get_template_directory_uri() . '/js/jquery-min.js', array('jquery'),'', false);
wp_enqueue_script('jquery-migrate', get_template_directory_uri() . '/js/jquery-migrate-min.js', array('jquery'),'', false);
wp_enqueue_script('slick_js', get_template_directory_uri() . '/js/slick.js', array('jquery'),'', false);
}
function c2h_styles() {
wp_enqueue_style('normalize', get_template_directory_uri() . '/styles/normalize.css');
wp_enqueue_style('style_css', get_template_directory_uri() . '/style.css');
/*wp_enqueue_style('modal', get_template_directory_uri() . '/styles/modal.css');*/
}
add_action('wp_enqueue_scripts', 'c2h_scripts');
add_action('wp_enqueue_scripts', 'c2h_styles');
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {
echo '<ul class = "list">';
}
function my_theme_wrapper_end() {
echo '</ul>';
}
?>
As well as adding
<ul class="list">
<?php woocommerce_content(); ?>
</ul>
To the page.php template.
Any thoughts?
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi Hando, Thanks for your reply :)
I won't be able to verify this until I get back to the project tomorrow morning but I believe I've tried this already and unfortunately only get the word "Shop" returned.
But until then I'm keeping my fingers crossed. :)
Is there some sort of hook in the function that pulls in different content based on which template is selected as the cart tc.?
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi Hando.
I've verified I have woocommerce,php but it's still not picking up the template. It's still bringing up the page.php template. :)
Hando Lukats
8,819 PointsDo you have any items made for testing? (Items must have prices to show up i think) And did you set up your shop base in woocommerce settings?
If Shop page picks up page.php instead of woocommerce.php then i would suspect that in wp admin Woocommerce->Settings you do not have shop base set to Shop page, so Shop just acts as a basic page.
There is no need to add anything in functions.php to get basic functionality working.
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi Hando,
Yes I have 6 products for testing set up already. Actually only one of those products has a price set up, this is how I know that somewhere in the back end, the cart is being totalled and prices added.
I have 3 sets of product listings.
I have my home page that acts as a landing page and below the landing page part is a loop that brings up the 6 most recent products added. I then have 3 other loops in 3 separate templates that bring up products based on their assigned category. So if I wanted a "shop" page, I'd want it to be that home page if possible.
So I've now set the "shop" base page and it lists the 6 products I currently have. But the cart/checkout pages still don't show up and default to page.php. :( Thanks for all your help so far.
Hando Lukats
8,819 Pointsnp:) Just in case, take a look if you have cart and checkout base set in Woocommerce -> Settings -> Checkout You also have to eventually set Terms & Conditions page there, so check that as well when there :)
Jonathan Grieve
Treehouse Moderator 91,253 PointsThe setup is as follows,
Basket Page set to Cart
Checkout Page set to Checkout
At the moment there's no Terms and Conditions page set, although I think I can easily set up a template for that. Is that critical for the other pages to work? :)
Hando Lukats
8,819 PointsWell, then everything should be working. You can of course test with default theme to see how and if it brings up content. Terms and conditions is not needed for other pages to show up.
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi Hando,
I do have a test theme installed that I've used to verify the cart is adding products. Everything there works perfectly (short of setting up my payment gateways). But nothing when i switch back to my custom theme.
So guess now then it's a case of detective work to see what's showing up on the templates for that theme that I don't have on mine?
There is one other thing that may not be an issue but is just a wild stab in the dark.. Do I perhaps need to delete and reinstall the WooCommerce plugin? The reason I ask is the "Products" link looks a little different. On my version of WooCommerce, 2.5.5, the link shows up as "products", rather than "Products". I truly don't know if this is some sort of glitch and there's corrupt files or if it's a new thing.
I may take the step of doing this as I've still got my template files and only 6 products for testing. :-)
Hando Lukats
8,819 PointsHando Lukats
8,819 PointsYou probably figured it out already, but you should use <?php woocommerce_content(); ?> in woocommerce.php, not in page.php. And set up your shop page.