Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Customizing Your WooCommerce Store

1,065 views

Published on

A presentation about customizing tour WooCommerce store.

Published in: Technology
  • Login to see the comments

Customizing Your WooCommerce Store

  1. 1. Customizing WooCommerce #wpm013
  2. 2. Customizing WooCommerce #wpm013
  3. 3. Hallo, met Barry WooCommerce developer @ WooThemes Related Posts for WordPress
 Download Monitor
 Post Connector
 What The File
  4. 4. Picking the right Theme Maintained No bloat Easily customizable
  5. 5. Storefront Created by WooThemes It s free Build for WooCommerce http://www.woothemes.com/storefront/
  6. 6. 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!
  7. 7. Plugins
  8. 8. Storefront Designer Change without coding: - Header
 - Layout
 - Buttons
 - Typography
  9. 9. Storefront WC Customizer Change without coding: - Header
 - Product archive page
 - Product detail page
 - Homepage
  10. 10. 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/
  11. 11. Custom Code
  12. 12. Custom Code Filters Actions Template overrides
  13. 13. Code Location Shop related code -> custom plugin Theme related code -> theme
  14. 14. Filters Change something 879 filters
  15. 15. 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’ );
  16. 16. No Order Notes Field add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );
  17. 17. 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 );
  18. 18. 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 );
  19. 19. Actions Do something 486 actions The power of removing hooks
  20. 20. 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' );
  21. 21. Removing Result Count remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
  22. 22. Template Overrides Override a template in your theme 105 overridable templates WooCommerce scans theme for /woocommerce/
  23. 23. Template Overrides For HTML structure changes Safe but last resort Template overrides bring maintenance
  24. 24. Template Overrides Find original template Customize it to your liking Path in theme:
 /woocommerce/path_of_original_template
  25. 25. 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
  26. 26. 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
  27. 27. WC System Status
  28. 28. Barry Kooij @CageNL barrykooij.com

×