WooCommerce Customization Masterclass (WordCamp Dublin 2017)

#wcdub 2017

WooCommerce Customisation Masterclass

@rmelogli1

#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

#wcdub 2017

WooCommerce Hooks: Definition

@rmelogli3

#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

#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

#wcdub @rmelogli

Hook Example: “Actions”

6

#wcdub 2017

WooCommerce Hooks: Where to find Them

@rmelogli7

#wcdub @rmelogli

“WooCommerce Visual Hook Guides”

8

#wcdub 2017

Snippets vs Plugins

@rmelogli9

#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

#wcdub 2017

Snippet Example

@rmelogli11

#wcdub @rmelogli

Snippet Example

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

page”

12

#wcdub @rmelogli

Snippet Example

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

page”

13

#wcdub @rmelogli

Snippet Example

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

page”

14

#wcdub 2017

Demo: WooCommerce Customisation Masterclass

@rmelogli15

#wcdub @rmelogli

“Visual Hook Guides” > Add Content

16

#wcdub @rmelogli

“Visual Hook Guides” > Remove Content

17

Default WooCommerce

add_actions

#wcdub @rmelogli

“Visual Hook Guides” > Move Content

18

Default WooCommerce

add_actions