WooCommerce + ClassiPress (free sample child theme included)

Someone in the forums asked this questions and i thought i should check how difficult or easy it is.It turns out its easy enough, in my case i made a typo causing me headaches 🙁

Disclaimer: This works with the default ClassiPress theme (3.5.7) and WooCommerce (2.6.4) Download the sample child theme here

What i did,

  • a child theme
  • copied the template files of WooCommerce in my child theme
  • added WooCommerce support for my child theme
  • Edited the ‘archive-product.php’ , the file used to display the shop page
  • Edited the ‘single-product.php’ file used to display a product

This is enough for the integration but you may need to edit CSS or more templates if you need to.

Child theme for ClassiPress like all WordPress child themes needs 2 files, style.css and functions.php

style.css


/*
Theme name: CP WC child
Theme uri: http://en.simplesteps.gr
Description: Child theme for ClassiPress with WC support
Author:Dimitris Bakalidis
Template: classipress
Version:1.0
*/

functions.php , the add_action(‘after_setup_theme’,’woocommerce_support’); makes sure the theme is compatible with WooCommerce.


<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}
?>

Go to your ‘wp-content/plugins/woocommerce’ folder and copy the ‘templates’ folder to your ‘wp-content/themes/woocommerce/your-child-theme’.This should be the contents of your child theme.

cpwc-contents

Now that you have all the WC templates you can edit the ‘archive-product.php’ file to match the style and structure of your ClassiPress site.You can copy the html from page.php of ClassiPress in this file like this


<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.0.0
*/

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

get_header( 'shop' ); ?>

<div class="content">

<div class="content_botbg">

<div class="content_res">

<div id="breadcrumb"><?php cp_breadcrumb(); ?></div>

<div class="content_left">
<?php
/**
* woocommerce_before_main_content hook.
*
* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb - 20
*/
do_action( 'woocommerce_before_main_content' );
?>

<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

<h1 class="page-title"><?php woocommerce_page_title(); ?></h1>

<?php endif; ?>

<?php
/**
* woocommerce_archive_description hook.
*
* @hooked woocommerce_taxonomy_archive_description - 10
* @hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>

<?php if ( have_posts() ) : ?>

<?php
/**
* woocommerce_before_shop_loop hook.
*
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );
?>

<?php woocommerce_product_loop_start(); ?>

<?php woocommerce_product_subcategories(); ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php wc_get_template_part( 'content', 'product' ); ?>

<?php endwhile; // end of the loop. ?>

<?php woocommerce_product_loop_end(); ?>

<?php
/**
* woocommerce_after_shop_loop hook.
*
* @hooked woocommerce_pagination - 10
*/
do_action( 'woocommerce_after_shop_loop' );
?>

<?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

<?php wc_get_template( 'loop/no-products-found.php' ); ?>

<?php endif; ?>

<?php
/**
* woocommerce_after_main_content hook.
*
* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
?>
</div><!-- /content_left -->
<?php
/**
* woocommerce_sidebar hook.
*
* @hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
?>
<div class="clr"></div>

</div><!-- /content_res -->

</div><!-- /content_botbg -->

</div><!-- /content -->
<?php get_footer( 'shop' ); ?>

Easy, you can do the same for the ‘single-product.php’ file,


<?php
/**
* The Template for displaying all single products
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 1.6.4
*/

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

get_header( 'shop' ); ?>
<div class="content">

<div class="content_botbg">

<div class="content_res">

<div id="breadcrumb"><?php cp_breadcrumb(); ?></div>

<div class="content_left">
<?php
/**
* woocommerce_before_main_content hook.
*
* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb - 20
*/
do_action( 'woocommerce_before_main_content' );
?>

<?php while ( have_posts() ) : the_post(); ?>

<?php wc_get_template_part( 'content', 'single-product' ); ?>

<?php endwhile; // end of the loop. ?>

<?php
/**
* woocommerce_after_main_content hook.
*
* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
?>
</div><!-- /content_left -->
<?php
/**
* woocommerce_sidebar hook.
*
* @hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
?>
<div class="clr"></div>

</div><!-- /content_res -->

</div><!-- /content_botbg -->

</div><!-- /content -->

<?php get_footer( 'shop' ); ?>

Done!

Download the sample child theme here