WooCommerce

WooCommerce integration may seem a little tricky at first. However, we've got you covered with a relatively simple setup. If you follow these steps exactly, you shouldn't have any trouble integrating your new theme with WooCommerce.

I do want to note that there are a number of ways to do this. The following is just what I've found to be the ideal way to set things up. Feel free to experiment.

Create a new functions file

First, open app/bootstrap-autoload.php and add a new functions file to autoload in the file-autoloading section. As shown in the code below, we've added functions-woocommerce.

# ------------------------------------------------------------------------------
# Autoload functions files.
# ------------------------------------------------------------------------------
#
# Load any functions-files from the `/app` folder that are needed. Add additional
# files to the array without the `.php` extension.

array_map( function( $file ) {
	require_once( get_parent_theme_file_path( "app/{$file}.php" ) );
}, [
	'functions-assets',
	'functions-setup',
	'functions-template',
	'functions-woocommerce'
] );

Now, create your app/functions-woocommerce.php file and drop the following code into it (make sure to change references to Mythic to your theme namespace):

<?php
/**
 * WooCommerce integration.
 *
 * This file integrates the theme with WooCommerce.
 *
 * @package   Mythic
 * @author    Justin Tadlock <justintadlock@gmail.com>
 * @copyright Copyright (c) 2018, Justin Tadlock
 * @link      https://themehybrid.com/themes/mythic
 * @license   http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 */

namespace Mythic;

use function Hybrid\Template\path;

/**
 * Adds theme support for the WooCommerce plugin.
 *
 * @since  1.0.0
 * @access public
 * @return void
 */
add_action( 'after_setup_theme', function() {

	add_theme_support( 'woocommerce' );
} );

/**
 * This overrides the top-level WooCommerce templates that would normally go in
 * the theme root. By default, we're looking for a `resources/views/woocommerce.php`
 * template, which falls back to `resources/views/index.php`.
 *
 * @since  1.0.0
 * @access public
 * @param  array  $files
 * @return array
 */
add_filter( 'woocommerce_template_loader_files', function( $files ) {

	return [
		path( 'woocommerce.php' ),
		path( 'index.php' )
	];

}, PHP_INT_MAX );

/**
 * Filters the path to the `woocommerce` template parts folder.  This filter
 * moves that folder to `resources/views/woocommerce`.
 *
 * @since  1.0.0
 * @access public
 * @param  string  $path
 * @return string
 */
add_filter( 'woocommerce_template_path', function( $path ) {

	return path( $path );
} );

Add a content template

Now that you have your functions code in place, create a new template in resources/views/content named woocommerce.php. You can copy one of the other templates or use the code below.

<div class="app-content">

	<main id="main" class="app-main">

		<?php woocommerce_content() ?>

	</main>

	<?php Hybrid\View\display( 'sidebar', 'primary', [ 'sidebar' => 'primary' ] ) ?>

</div>

The important part is the call to woocommerce_content(). Customize everything else how you like.