Develop Custom WooCommerce Theme

By Raddy in WooCommerce / WordPress · June 10, 2020

In this article, I’ve dropped some of the key things that you need to get started with the development of a custom WordPress theme that supports WooCommerce.

Watch the full video to learn how to code your WordPress WooCommerce enabled theme:

Design your shop first

This is the design that we will be using to create our WooCommerce shop. The design was made in adobe XD and you can download the file by using the button below.

Download the design or watch how to design one yourself here – Watch o n YouTube

Download the project files

Setting up our Development Environment

1) Setup Localhost
2) Download WordPress
3) Set up URL

This is where we setup XAMPP to work with a custom domain name

Start Apache and MySQL

Alternatives software:
Local by Flywheel
WampServer
Mamp

Setting up our local domain name

We need to locate the following files: httpd-vhost.conf and hosts file.

To locate httpd-vhost.conf file follows the following path for windows.

C:\xampp\apache\conf\extra -> httpd-vhosts.conf

Add the following code at the bottom of the file and replace the woocommerceshop with the folder that you are using and replace the server name with the one that you want.

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/woocommerceshop"
    ServerName woocommerceshop.com
</VirtualHost>

Open Notepad – Right Click Run as Admin

Locate the hosts file.

C:\Windows\System32\drivers\etc

Add the following code at the bottom. Again, replace the woocommerceshop.com domain name with the one you want to work for you.

127.0.0.1 woocommerceshop.com

Creating a local database

http://localhost/phpmyadmin/server_databases.php?db=

Install WooCommerce

[Talk about the setup]

Custom Theme Structure

📂 js
📂 scss
📂 -style.scss
🌍 404.php
🌍 archive.php
🌍 footer.php
🌍 front-page.php
🌍 functions.php
🌍 header.php
🌍 index.php
🌍 page.php
🌍 search.php
🌍 sidebar.php
🌍 single.php
✨ style.css
🌍 template-shop.php
🌍 woocommerce.php

functions.php

Enqueue your styles and scripts

/* Adding CSS & JS */
function mycustomtheme() {
    wp_register_style( 'custom_css', get_template_directory_uri() . '/scss/style.css', false, '1.0.0' );
    wp_enqueue_style( 'custom_css' );
}
add_action( 'wp_enqueue_scripts', 'mycustomtheme' );

Add Custom Menu

// Creating Custom Menu
function my_custom_menu () {
    register_nav_menu('my-custom-menu',__('MyCustomTheme Custom Menu', 'mycustomtheme'));
}
add_action('init', 'my_custom_menu');

Add Theme Thumbnail Support

// Thumbnail Support
add_theme_support('post-thumbnails');

If you are building a theme that supports but does not require WooCommerce, you should always wrap your WooCommerce functionality (think cart links etc) inside a conditional. That way if WooCommerce is activated, the functionality is simply ignored instead of producing fatal errors.

if (class_exists('WooCommerce')) {
// Write snippets withing this blog
}

Add Theme WooCommerce Support

// WooCommerce Support
function customtheme_add_woocommerce_support() {
   add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'customtheme_add_woocommerce_support');

If you wish to remove the WooCommerce Styles

// Remove WooCommerce Styles
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

// Remove WooCommerce Styles
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Remove Shop Title

// Remove Shop Title
add_filter( 'woocommerce_show_page_title', '__return_false' );

Add Product gallery zoom, lightbox and slider support

add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );

Show cart contents/total

The original WooCommerce snippet can be found here: https://docs.woocommerce.com/document/show-cart-contents-total/

Add this to the page where you want to display your cart / basket.

<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a>

To ajaxify your cart viewer so it updates when an item is added (via ajax) use (add this in your functions.php):

/**
 * Show cart contents / total Ajax
 */
add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment' );

function woocommerce_header_add_to_cart_fragment( $fragments ) {
	global $woocommerce;

	ob_start();

	?>
	<a class="cart-customlocation" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
	<?php
	$fragments['a.cart-customlocation'] = ob_get_clean();
	return $fragments;
}

If you wish to download the full theme you can find it on GitHub:

Project Files – GitHub

Donate Via PayPal

More Resources: