Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

style.css

index.php

page templates ...

We have many, so We choose the best!

Just other Template Files for other Content!

1. Using Exist WooCommerce Stye

2. Modify Layout

Modify template

Just copy teplate you want override from Woocommerce plugin to your theme

any question ?

THANK YOU !

WooCommerce Theme

Dangngocbinh.dnb@gmail.com

Make your WooCommerce Theme

What is a Theme?

Using wooCommerce Hook

"Wordpress Themes are files that work together to create the design and functionality of a WordPress site."

- codex.wordpress.org

your-theme

3. Modify style

style.css

Start a theme

Override css

index.php

- few changes => override css

- big changes => woocommerce.less

header.php

Using Blank theme from DigWP

You have almost files your need!

...

XHH Case Study

woocommerce

.woocommerce div.product form.cart .button:hover{

background-color:#5cbf2a;

}

--> woo-template-here

It's the simple theme using WooCommerce!

We will learn HOW TO :

- How to start a theme from scratch

- Modify template layout

- Override Woocommerce CSS

- How to start a theme from scratch

- Modify template layout

- Override Woocommerce CSS

let do what you want !

which template ?

copy to theme to override

Wordpress Theme Structure

WooCommerce Theme

plugins

woocommerce

your-site

wp-content

themes

twentyeleven

your-theme

Essential Files!

Doctype info

<head>

Site title

templates

Site description

header.php

wp_head() hook

Main navigation

more widget areas

copyright info

wp_footer()

footer.php

web designer links

...

additional theme functionality

functions.php

Principles of Theme

Template Hierachy

Basic Template File

Template Files

header

content

CSS

Javascript

<html>

<?php if( have_post() ) ?>

</html>

What we have to do ?

to create a Theme

create template files for our content !

footer.php

<h1> Footer </h1>

footer

header.php

<h1> Header </h1>

<?php get_header(); ?>

<?php get_footer(); ?>

template.php

widget areas

sidebar.php

Learn more about creating dynamic, engaging presentations with Prezi