Customizing Your WooCommerce Store

Customizing WooCommerce

#wpm013

Customizing WooCommerce

#wpm013

Hallo, met Barry

WooCommerce developer @ WooThemes

Related Posts for WordPressDownload MonitorPost ConnectorWhat The File

Picking the right Theme

Maintained

No bloat

Easily customizable

Storefront

Created by WooThemes

It’s free

Build for WooCommerce

http://www.woothemes.com/storefront/

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!

Plugins

Storefront Designer

Change without coding:

- Header- Layout- Buttons- Typography

Storefront WC Customizer

Change without coding:

- Header- Product archive page - Product detail page - Homepage

On wordpress.org

WooCommerce Product Archive Customiserhttps://wordpress.org/plugins/woocommerce-product-archive-customiser/

WooCommerce Product Details Customiserhttps://wordpress.org/plugins/woocommerce-product-details-customiser/

WooCommerce Customizerhttps://wordpress.org/plugins/woocommerce-customizer/

Custom Code

Custom Code

Filters

Actions

Template overrides

Code Location

Shop related code -> custom plugin

Theme related code -> theme

Filters

Change something

879 filters

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’ );

No Order Notes Field

add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );

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 );

Personalize Thank Youfunction 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 );

Actions

Do something

486 actions

The power of removing hooks

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' );

Removing Result Count

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );

Template Overrides

Override a template in your theme

105 overridable templates

WooCommerce scans theme for /woocommerce/

Template Overrides

For HTML structure changes

Safe but last resort

Template overrides bring maintenance

Template Overrides

Find original template

Customize it to your liking

Path in theme:/woocommerce/path_of_original_template

Product Short Description

<?phpglobal $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

Product Short Description

<?phpglobal $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

WC System Status

Barry Kooij

@CageNL

barrykooij.com