• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Dominate Marketing

Why Dabble When You Can DOMINATE

  • Blog
  • Contact

3 Ways to integrate WooCommerce with Genesis

April 25, 2017 by Dominate Marketing

Generally, WooCommerce templates integrate nice with WordPress themes but not with the Genesis framework. It may cause problems with the theme layout. No need for panic, as we have the solution. We describe three ways to integrate WooCommerce with the Genesis framework.

https://www.wpstud.io/3-ways-to-integrate-woocommerce-with-genesis/

1. The Genesis Connect for WooCommerce plugin

This plugin is a save choice and it is the most easy solution, especially if you don’t want to edit the functions.php of your Genesis child theme. This Plugin replaces the WooCommerce built-in shop templates with its own Genesis-ready versions. The con is that some of the templates are out of date.

genesis connect woocommerce plugin

You can download the plugin here.

2. BeardedGinger Method

This method from Josh Mallard is pretty straightforward. Nonetheless, it works like a charm. In just three simple steps you’re able to fix the layout of your site and integrate WooCommerce.

Step 1: Create a new function in your theme’s functions.php file

function woocommerce_setup_genesis() {
woocommerce_content();
}
view rawWooCommerce with Genesis hosted with ❤ by GitHub

Step 2: Create a new file in your child theme directory with the name woocommerce.php. Add the following code to this file.

<?php
/**
* WooCommerce Template
*
* Template used for all WooCommerce views for your site
*
*/
//* Remove standard post content output
remove_action( ‘genesis_loop’, ‘genesis_do_loop’);
//* Add WooCommerce content output
add_action( ‘genesis_loop’, ‘woocommerce_setup_genesis’ );
genesis();
view rawWooCommerce Template hosted with ❤ by GitHub

This template will be used for all the WooCommerce pages within your site. It removes the default loop and replaces it with the WooCommerce content.

Step 3: Declare support for WooCommerce in your functions.php

//* Declare WooCommerce Support
add_theme_support( ‘woocommerce’ );
view rawdeclare WooCommerce support hosted with ❤ by GitHub

3. AlphaBlossom Method

I personally favour the AplhaBlossom method, which offers a complete solution. It’s one chunk of code that you place directly in your theme’s functions.php. I prefer to include it using include_once in the functions.php.

/**********************************
*
* Integrate WooCommerce with Genesis.
*
* Unhook WooCommerce wrappers and
* Replace with Genesis wrappers.
*
* Reference Genesis file:
* genesis/lib/framework.php
*
* @author AlphaBlossom / Tony Eppright
* @link http://www.alphablossom.com
*
**********************************/
// Add WooCommerce support for Genesis layouts (sidebar, full-width, etc) – Thank you Kelly Murray/David Wang
add_post_type_support( ‘product’, array( ‘genesis-layouts’, ‘genesis-seo’ ) );
// Unhook WooCommerce Sidebar – use Genesis Sidebars instead
remove_action( ‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’, 10 );
// Unhook WooCommerce wrappers
remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_output_content_wrapper’, 10 );
remove_action( ‘woocommerce_after_main_content’, ‘woocommerce_output_content_wrapper_end’, 10 );
// Hook new functions with Genesis wrappers
add_action( ‘woocommerce_before_main_content’, ‘youruniqueprefix_my_theme_wrapper_start’, 10 );
add_action( ‘woocommerce_after_main_content’, ‘youruniqueprefix_my_theme_wrapper_end’, 10 );
// Add opening wrapper before WooCommerce loop
function youruniqueprefix_my_theme_wrapper_start() {
do_action( ‘genesis_before_content_sidebar_wrap’ );
genesis_markup( array(
‘html5’ => ‘<div %s>’,
‘xhtml’ => ‘<div id=“content-sidebar-wrap“>’,
‘context’ => ‘content-sidebar-wrap’,
) );
do_action( ‘genesis_before_content’ );
genesis_markup( array(
‘html5’ => ‘<main %s>’,
‘xhtml’ => ‘<div id=“content“ class=“hfeed“>’,
‘context’ => ‘content’,
) );
do_action( ‘genesis_before_loop’ );
}
/* Add closing wrapper after WooCommerce loop */
function youruniqueprefix_my_theme_wrapper_end() {
do_action( ‘genesis_after_loop’ );
genesis_markup( array(
‘html5’ => ‘</main>’, //* end .content
‘xhtml’ => ‘</div>’, //* end #content
) );
do_action( ‘genesis_after_content’ );
echo ‘</div>’; //* end .content-sidebar-wrap or #content-sidebar-wrap
do_action( ‘genesis_after_content_sidebar_wrap’ );
}
view rawwoocommerce-genesis-theme-support.php hosted with ❤ by GitHub

The remove action deletes the WooCommerce hooks and wrappers. New functions will replace the WooCommerce before and after wrappers. The xhtml markup seems unnecessary. We all build themes in HTML5, right?

The last step is declaring support for WooCommerce in your functions.php.

//* Declare WooCommerce Support
add_theme_support( ‘woocommerce’ );
view rawfunctions.php hosted with ❤ by GitHub

Conclusion

Every solution got its pros and cons. For bigger projects and theme development I prefer the latter method. If you’re not comfortable with editing the functions.php you may choose the plugin. And, for a quick solution option two is great. As a matter of fact, I’ve recently used this option in two smaller projects.

Filed Under: Genesis, How To's & Tips n Tricks, Woocommerce

Categories

  • css tricks
  • Errors
  • Fixes & F**ups
  • Formidable Forms
  • Genesis
  • Google Apps Mail
  • How To's & Tips n Tricks
  • MailChimp
  • Media
  • Plugins
  • Scam Alert
  • Shipping
  • Shopping Cart Modules
  • Videos
  • Widgets
  • Woocommerce

Recent Posts

  • font gradient
  • Horizontal Genesis eNews E-Mail Opt In Subscribe Box Inline
  • Hide shipping rates when free shipping is available
  • How to Create a WooCommerce Wholesale System
  • Imagify vs EWWW vs Kraken vs WP Smush vs ShortPixel: The 5 Best WordPress Image Optimization Plugins Compared
  • Formidable Forms & Mod Security
  • Genesis Slide-in Widget
  • Genesis Plugins
  • Genesis overlay widget
  • Add refined CTA & Announcement widget areas etc
  • Migrate Weebly to WordPress: A Step-by-Step Guide
  • Sparkle
  • Remove WordPress Default Widgets
  • Some great css tricks on this website
  • Border Around A Button
  • Adding support for the new WooCommerce 3.0 gallery features
  • 100 WooCommerce Tips and Tricks
  • Woocommerce – Change number of products displayed
  • Genesis Footer Widgets
  • 3 Ways to integrate WooCommerce with Genesis
  • Emails fail on multisite setup
  • Video Embed & Thumbnail Generator
  • WP MS User Roles
  • Setup Gmail for Domain – Google Apps Mail
  • Remove default WordPress widgets
  • Re-Order Single Product Template
  • Change SKU Text
  • Don’t Get Caught by an Invitation To Register Domain – Fake Domain Renewal Letters Can Cost You
  • WooCommerce MailChimp Integration
  • Hide the shipping methods if the cart does not have the specific shipping class

Handcrafted with by Dominate Marketing
Web Design & Development, SEO & Ultra Nerdyness!
Sitemap | Terms of Service | Privacy Policy | Delivery Policy | Refund Policy | Owner Login