Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

WooCommerce Theme

No description
by

Binh Dang

on 25 October 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of WooCommerce Theme

WooCommerce Theme
What is a Theme?
"Wordpress Themes are files that work together to create the design and functionality of a WordPress site."
- codex.wordpress.org
Wordpress Theme Structure
Principles of Theme
WooCommerce Theme
Just other Template Files for other Content!
Make your WooCommerce Theme
1. Using Exist WooCommerce Stye
XHH Case Study
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
Essential Files!
style.css
your-site
wp-content
themes
twentyeleven
your-theme
index.php
page templates ...
header.php
footer.php
sidebar.php
functions.php
Site title
Site description
Main navigation
wp_head() hook
widget areas
more widget areas
wp_footer()
copyright info
web designer links
additional theme functionality
Doctype info
<head>
Template Files
Basic Template File
header
content
footer
<?php get_header(); ?>


<?php get_footer(); ?>
template.php
Template Hierachy
We have many, so We choose the best!
plugins
woocommerce
templates
...
2. Modify Layout
Using wooCommerce Hook
Modify template
Just copy teplate you want override from Woocommerce plugin to your theme
your-theme
style.css
index.php
header.php
...
woocommerce
--> woo-template-here
3. Modify style
- few changes => override css
- big changes => woocommerce.less
Start a theme
Using Blank theme from DigWP

You have almost files your need!
which template ?
copy to theme to override
let do what you want !
<h1> Header </h1>
header.php
<h1> Footer </h1>
footer.php
What we have to do ?
to create a Theme
create template files for our content !
Dangngocbinh.dnb@gmail.com
any question ?
THANK YOU !
<?
php
if( have_post() ) ?>
<html>
</html>
CSS
Javascript
.
woocommerce

div
.
product

form
.
cart
.
button
:
hover
{

background-color
:
#5cbf2a
;
}
- How to start a theme from scratch
- Modify template layout
- Override Woocommerce CSS
Override css
Full transcript