Making WooCommerce Your Own

Slide 1

Slide 1 text

Making Your Own with @leogopal

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

@leogopal 3 Q’s Why? Who? How?

Slide 4

Slide 4 text

@leogopal Why… Everyone wants to stand out.     Customising your WooCommerce Store with solid a solid Brand Identity to set you apart will help customers identify you, recognise you, and share you with others. BUT - only if they want or care about your product in the ﬁrst place.     Design is an ampliﬁer. would you want to customise your store?

Slide 5

Slide 5 text

@leogopal Who… 0.* Store owners. 1. Developers / Designers.  2. All of the above is == 1. would want to customise WooCommerce? because real programmers start counting from 0.

Slide 6

Slide 6 text

@leogopal How… 0. Store owners. or 1. Developers / Designers. to tell if you are 0. or 1. A programmers wife asks her to go the store The programmer's wife tells her: "Run to the store and pick up a loaf of bread, If they have eggs, get a dozen." The programmer comes back with 12 loaves of bread.

Slide 7

Slide 7 text

@leogopal How… 0. Buy/Get themes (like Storefront) 1. Hire Out (if you have the budget)  2. DIY (if you have the skill & time) 3. Customiser? (Storefront Designer or LayersWP) would you customise WooCommerce?

Slide 8

Slide 8 text

@leogopal Storefront

Slide 9

Slide 9 text

@leogopal

Slide 10

Slide 10 text

@leogopal Storefront Designer - Layout Options - Header Options - Button Options - Typography Options - Footer Credits, and more

Slide 11

Slide 11 text

@leogopal To child-theme, or not to child-theme?

Slide 12

Slide 12 text

@leogopal but first…

Slide 13

Slide 13 text

@leogopal

Slide 14

Slide 14 text

@leogopal LayersWP.com by obox

Slide 15

Slide 15 text

@leogopal LayersWP.com by obox

Slide 16

Slide 16 text

@leogopal Storefront Child Themes Galleria Deli

Slide 17

Slide 17 text

@leogopal Should you create your own Child Themes? If you like head starts, the answer is Yes!

Slide 18

Slide 18 text

@leogopal Important ‘Parenting’ Considerations - Choose a quality ‘Parent’ theme (Storefront is great!). - Understand the Parent themes structure. - Understand WordPress’ Template Hierarchy - Understand Hooks and Filters - Understand WooCommerce’s Template Overrides

Slide 19

Slide 19 text

@leogopal Important ‘Parenting’ Considerations - WordPress Child-theme Starter Kit? Here you go: - https://github.com/leogopal/wp-child-theme-starter - style.css - functions.php The main ﬁles you need are:

Slide 20

Slide 20 text

@leogopal Important ‘Parenting’ Considerations Any function in a parent themes functions.php ﬁle that is wrapped in: if ( function_exists(‘parent_function’) ) { // stuff } Can be overridden.

Slide 21

Slide 21 text

@leogopal Important ‘Parenting’ Considerations Where possible, use the appropriate hooks and filters: Example Filter: Change ‘Add to cart’ text add_filter( 'add_to_cart_text', 'woo_custom_cart_button_text' ); add_filter( 'woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text' ); function woo_custom_cart_button_text() { return __( ‘Add me to your Cart, Pweddie Pwease?’, 'woocommerce' ); }

Slide 22

Slide 22 text

@leogopal Important ‘Parenting’ Considerations Where possible, use the appropriate hooks and ﬁlters: function storefront_add_topbar() { ?>

Your text here

Slide 23

Slide 23 text

@leogopal Important ‘Parenting’ Considerations Where possible, use the appropriate hooks and ﬁlters: #topbar { background-color: #1F1F20; height: 40px; line-height: 40px; } #topbar p { color: #fff; } Example Action: Add a top-bar to storefront site

Slide 24

Slide 24 text

@leogopal Storefront: Learn the Hooks in your Parent theme https://github.com/woothemes/storefront/blob/master/inc/structure/hooks.php

Slide 25

Slide 25 text

@leogopal Getting Hook’d WordPress Codex on Hooks (Actions & Filters) http://codex.wordpress.org/Plugin_API/Hooks WooCommerce Docs on Hooks (Actions & Filters) http://docs.woothemes.com/document/hooks/

Slide 26

Slide 26 text

@leogopal Override WooCommerce Templates To overide a WooCommerce Plugin template, copy: woocommerce/templates/folder/template-name.php to: yourtheme/woocommerce/folder/template-name.php Learn more: http://docs.woothemes.com/document/template-structure/

Slide 27

Slide 27 text

@leogopal Override WooCommerce Templates https://github.com/woothemes/woocommerce/tree/2.3.8/templates

Slide 28

Slide 28 text

@leogopal If that doesn’t work, call a ninja

Slide 29

Slide 29 text

Thank You! Lets do this again some time. with @leogopal https://speakerdeck.com/leogopal/making-woocommerce-your-own