Transcript
Page 1: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub 2017

WooCommerce Customisation Masterclass

@rmelogli1

Page 2: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

WC Customisation Masterclass

1. Child theme vs WooCommerce template override vs WooCommerce core

2. WooCommerce Hooks (Actions & Filters)3. Snippets vs Plugins4. Demo: add content, remove content, move content @

Single Product Page2

Page 3: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub 2017

WooCommerce Hooks: Definition

@rmelogli3

Page 4: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

Hooks: “Actions”

● WordPress, Themes & Plugins offer do_action($hook_name) functions at specific execution times or in a specific template position

● Use add_action($hook_name) in your child theme to “hook” (trigger) your code to ADD/REMOVE content

4

Page 5: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

Hooks: “Filters”

● WordPress, Themes & Plugins also offer apply_filters($hook_name) functions

● Use apply_filter($hook_name) in your child theme to “hook” (trigger) your code to EDIT content

5

Page 6: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

Hook Example: “Actions”

6

Page 7: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub 2017

WooCommerce Hooks: Where to find Them

@rmelogli7

Page 8: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

“WooCommerce Visual Hook Guides”

8

Page 9: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub 2017

Snippets vs Plugins

@rmelogli9

Page 10: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

“Snippet”Short PHP function that adds a specific WP functionality.

To be placed @ child theme’s functions.php

“Plugin”Software made of several files that adds new features (too

many?) to your WordPress website 10

Page 11: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub 2017

Snippet Example

@rmelogli11

Page 12: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

Snippet Example

e.g. “Show # products sold @ single product

page”

12

Page 13: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

Snippet Example

e.g. “Show # products sold @ single product

page”

13

Page 14: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

Snippet Example

e.g. “Show # products sold @ single product

page”

14

Page 15: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub 2017

Demo: WooCommerce Customisation Masterclass

@rmelogli15

Page 16: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

“Visual Hook Guides” > Add Content

16

Page 17: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

“Visual Hook Guides” > Remove Content

17

Default WooCommerce

add_actions

Page 18: WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub @rmelogli

“Visual Hook Guides” > Move Content

18

Default WooCommerce

add_actions