A presentation about customizing tour WooCommerce store.

1. Customizing WooCommerce
#wpm013

2. Customizing WooCommerce
#wpm013

3. Hallo, met Barry
WooCommerce developer @ WooThemes
Related Posts for WordPress
Download Monitor
Post Connector
What The File

4. Picking the right Theme
Maintained
No bloat
Easily customizable

5. Storefront
Created by WooThemes
It s free
Build for WooCommerce
http://www.woothemes.com/storefront/

9. Child Theme It
Extend the power of your theme
Override only that what s needed
Keep your theme updatable
This is where your custom CSS goes!

10. Plugins

11. Storefront Designer
Change without coding:
- Header
- Layout
- Buttons
- Typography

12. Storefront WC Customizer
Change without coding:
- Header
- Product archive page
- Product detail page
- Homepage

13. On wordpress.org
WooCommerce Product Archive Customiser
https://wordpress.org/plugins/woocommerce-product-archive-customiser/
WooCommerce Product Details Customiser
https://wordpress.org/plugins/woocommerce-product-details-customiser/
WooCommerce Customizer
https://wordpress.org/plugins/woocommerce-customizer/

14. Custom Code

15. Custom Code
Filters
Actions
Template overrides

16. Code Location
Shop related code -> custom plugin
Theme related code -> theme

17. Filters
Change something
879 filters

18. Checkout fields
function dlm_checkout_fields( $fields ) {
unset( $fields['billing']['billing_phone'] );
unset( $fields['billing']['billing_address_2'] );
return $fields;
}
add_filter( 'woocommerce_checkout_fields',
‘dlm_checkout_fields’ );

19. No Order Notes Field
add_filter( 'woocommerce_enable_order_notes_field',
'__return_false' );

20. Change ATC Label
function wpm_change_adc_text( $text, $product ) {
return 'Yeah Buddy!';
}
add_filter( 'woocommerce_product_add_to_cart_text',
'wpm_change_adc_text', 10, 2 );

21. Personalize Thank You
function dlm_title_order_received( $title, $id ) {
if ( is_order_received_page() && get_the_ID() === $id ) {
global $wp;
$order_id = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp-
>query_vars['order-received'] ) );
$order_key = apply_filters( 'woocommerce_thankyou_order_key', empty( $_GET['key'] ) ? ''
: wc_clean( $_GET['key'] ) );
if ( $order_id > 0 ) {
$order = wc_get_order( $order_id );
if ( $order->order_key != $order_key ) {
unset( $order );
}
}
if ( isset ( $order ) ) {
$title = sprintf( "Thank you, %s!", esc_html( $order->billing_first_name ) );
}
}
return $title;
}
add_filter( 'the_title', 'dlm_title_order_received', 10, 2 );

22. Actions
Do something
486 actions
The power of removing hooks

23. What Happens Next?
function dlm_what_happens_next() {
?>
<div class="dlm-what-happens-next">
<strong>What happens next?</strong>
<p>After you've completed your payment you'll receive an email
containing your license keys and a download links.</p>
</div>
<?php
}
add_action( 'woocommerce_after_checkout_form',
'dlm_what_happens_next' );

24. Removing Result Count
remove_action( 'woocommerce_before_shop_loop',
'woocommerce_result_count', 20 );

25. Template Overrides
Override a template in your theme
105 overridable templates
WooCommerce scans theme for /woocommerce/

26. Template Overrides
For HTML structure changes
Safe but last resort
Template overrides bring maintenance

27. Template Overrides
Find original template
Customize it to your liking
Path in theme:
/woocommerce/path_of_original_template

28. Product Short Description
<?php
global $post;
if ( ! $post->post_excerpt ) return;
?>
<div itemprop="description">
<?php echo apply_filters( 'woocommerce_short_description',
$post->post_excerpt ) ?>
</div>
single-product/short-description.php

29. Product Short Description
<?php
global $post;
if ( ! $post->post_excerpt ) return;
?>
<p itemprop="description">
<?php echo apply_filters( 'woocommerce_short_description',
$post->post_excerpt ) ?>
</p>
single-product/short-description.php

30. WC System Status

31. Barry Kooij
@CageNL
barrykooij.com