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.

Switching from Canvas to Storefront

120 views

Published on

Full contents of Herb Miller's presentation at the October 2018 WordPress Portsmouth Meetup.

The talk is based on his experience of migrating Steve Goodyear’s Motorcycle Products online shop sgmotorsport.biz. It includes:
•Requirements
•Summary of the Storefront Extensions Bundle
•Considerations for existing plugins and/or suitable replacements
•Challenges
•Problems
•Steps involved
•Lessons learned

Published in: Internet
  • Be the first to comment

Switching from Canvas to Storefront

  1. 1. Welcome to WordUp Pompey! 18th October 2018 Agenda 19:00 Networking – talk about your online shops 19:30 Switching from Canvas to Storefront with @herb_miller 20:30 Q & A 20:45 Wrap Up 21:00 Social at Sovereigns @wppompey #wppompey – no hyphen! Www.wp-pompey.org.uk /About-wordpress-meetups/code-of-conduct/
  2. 2. Sponsors Venue sponsor RedIT @reditcouk Scott McKeown says I'll offer a 25% discount on Web Hosting or Virtual Servers to Wordup Pompey! members entering wordup and checkout (that's for life by the way, not once) Pizza sponsor WordPress plugins from @oikplugins Herb Miller @herb_miller @bobbingwide @sharedbigram
  3. 3. Switching from Canvas to Storefront How to update a WooCommerce site with a new theme. … the trials and tribulations by @herb_miller
  4. 4. Steps If only it were that simple. Step Details Choose a new theme Storefront Install theme Already done Activate
  5. 5. Overview In this talk Herb will rattle through the process of migrating a WooCommerce site from one theme to another. The talk is based on his experience of migrating Steve Goodyear’s Motorcycle Products online shop sgmotorsport.biz. It will include: • Requirements • Summary of the Storefront Extensions Bundle • Considerations for existing plugins and/or suitable replacements • Challenges • Problems • Steps involved • Lessons learned
  6. 6. Disclaimer Every screenshot pleases somebody. Herb Miller
  7. 7. Requirements Technical Migrate from Canvas theme to Storefront Why: WooCommerce have dropped support for Canvas Fix Contact form Why: 'cos it's broken... eregi() removed in PHP 7. Non Functional Requirements Why: Keep live site running Business Sell higher percentage of products from the website Why: Reduce ebay costs Discount codes for ebay customers Why: Incentive to ebay customers
  8. 8. WooCommerce The eCommerce platform for WordPress open-source, completely customizable eCommerce platform for entrepreneurs worldwide Sell beautifully Sell anywhere Easy store management Made for developers Optimize Started 2007 - as WooThemes Feb 2010 - Canvas launched 28 September 2011 - WooCommerce launched Jun 2013 - 1M downloads Sep 2014 - Storefront launched May 2015 - Joins Automattic Oct 2017 - Canvas retired 24 Oct 2018 - Canvas support ends "Pragmatic uses WooCommerce as a flexible and highly extensible eCommerce framework to create powerful and innovative solutions that enable our clients to run their online shops in a way that suits them." David Lockie WordPress Brighton 50,819,543 downloads and counting FREEFREEhttps://woocommerce.com/
  9. 9. SG Motorsport - Canvas Stephen Goodyear's online shop https://www.sgmotorsport.biz
  10. 10. SG Motorsport - ebay https://www.ebay.co.uk/str/sgmotorsport
  11. 11. Storefront Storefront is an intuitive & flexible, free WordPress theme offering deep integration with WooCommerce. It's the perfect platform for your next WooCommerce project. 2 611 297 downloads so far https://woocommerce.com/storefront/ https://github.com/woocommerce/storefront FREE
  12. 12. Steps – create local version Purpose: To create a safe play area. Intention: To not break the Live site! Step Details Choose theme Storefront Install theme Already done Export complete Live site Used UpdraftPlus files Install WordPress locally WordPress 4.9.8 Extract backups plugins, themes, uploads, other Import database Mysql command or phpMyAdmin Stand up test – Eliminate hindrances Switch to PHP 7.1 WP_DEBUG false Deactivate some plugins Switch themes Activate Storefront Test – fiddle about a bit See what’s working and what’s not Create child theme SG-Motorsport
  13. 13. SG Motorsport - Storefront If started out something like this.
  14. 14. Specific requirements Requirement Proposed solution Mega menu for header menu Storefront Mega Menus Navigation menu for small devices Storefront Hamburger Menu Don't display Tags, just Categories Child theme Display all Product categories Product Categories Widget – custom styling No need for Reviews? WooCommerce option Fix contact form oik contact form & child theme No broken shortcodes Child theme and fixup Continue to use existing WooCommerce extensions ... if they work well. Otherwise find replacement solution: plugin / child theme Review other plugins … ongoing Animated gif replacement … ignore Video resources … tbc Product search WooCommerce Product Search
  15. 15. SG Motorsport - shop After a while it was like this
  16. 16. SG-Motorsport – child theme https://github.com/bobbingwide/SG-Motorsport To extend the Storefront theme ● To do pluginey things ● To do styling with CSS bespoke
  17. 17. Storefront Extensions Bundle 13 WooCommerce and Storefront extensions. Cost: $69 plus tax Individually: > $190 $ 69https://woocommerce.com/products/storefront-extensions-bundle/
  18. 18. Storefront Blog Customiser Adds blog customisation settings to the Storefront theme. Not needed. $ 19
  19. 19. Storefront Footer Bar Add a full width widgetised region above the default Storefront footer widget area. FREE https://github.com/bobbingwide/storefront-footer-bar - forked https://wordpress.org/plugins/storefront-footer-bar/
  20. 20. Storefront Hamburger Menu Storefront Hamburger Menu turns the default Handheld navigation into an off-screen sidebar menu with a "hamburger" toggle. FREEhttps://wordpress.org/plugins/storefront-hamburger-menu/
  21. 21. Storefront Homepage Contact Section Contact form To enable the Contact Form feature, please install the Jetpack plugin and activate the Contact Form module. Didn't work!  Google Maps failed.  Needs Jetpack for Contact form. FREEhttps://wordpress.org/plugins/storefront-homepage-contact-section/
  22. 22. Storefront Mega Menus Create enhanced full width dropdowns that seamlessly tie into your Storefront powered WooCommerce shop. $ 39
  23. 23. Storefront Parallax Hero Adds a hero component to the Storefront homepage template. $ 19
  24. 24. Storefront Powerpack Up your game with Storefront Powerpack and get access to host of neat gadgets that enable effortless customisation of your Storefront. $ 59
  25. 25. Storefront Pricing Tables Add attractive pricing tables to your posts and pages. [pricing_table columns="3" alignment="center"][/pricing_table] $ 19
  26. 26. Storefront Product Hero Display styling parallax product hero components on your web pages. Not needed. $ 19
  27. 27. Storefront Product Pagination Add unobstrusive links to next/previous products on your WooCommerce single product pages. Already in 2.3.0 FREEhttps://en-gb.wordpress.org/plugins/storefront-product-pagination/
  28. 28. Storefront Product Sharing https://wordpress.org/plugins/storefront-product-sharing/ FREE
  29. 29. Storefront Reviews Display product reviews on the across your Storefront powered WooCommerce shop. Increase conversions by highlighting positive product reviews (sic) $ 19
  30. 30. Storefront Site Logo Adds a Branding tab to the customizer where you can choose between "Title and Tagline" or "Logo image". FREEhttps://wordpress.org/plugins/storefront-site-logo/
  31. 31. Storefront Sticky Add to Cart Adds a convenient bar which sticks to the top of your product pages so that visitors can easily find and click the add to cart button. Already in 2.3.0 FREE
  32. 32. Homepage Control Re-order or disable the homepage components in certain themes. https://wordpress.org/plugins/homepage-control/ FREE
  33. 33. Yoast WooCommerce SEO Make your products stand out in Google Get more buyers to your online store Make products easier to find on your site Have a cleaner XML sitemap & more https://yoast.com/wordpress/plugins/yoast-woocommerce-seo/ £ 49
  34. 34. WooCommerce Incremental Product Quantities Forked from wpbackoffice https://github.com/bobbingwide/woocommerce-incremental-product-quantities Quantity rules apply to 3 categories. Overridden at product level for 10 products. $ 29 Alternative… WooCommerce Min/Max Quantities https://woocommerce.com/products/minmax-quantities/ FREE Title Min Max Step Spade Connectors & Flag Connectors 5 5 100 Bullet Connectors 10 10 100
  35. 35. WooCommerce Thumbnail Input Quantities https://wordpress.org/plugins/woocommerce-thumbnail-input-quantities/ Forked from wpbackoffice to https://github.com/bobbingwide/woocommerce-thumbnail-input-quantities FREE
  36. 36. Quantity Field on Shop Page for WooCommerce https://wordpress.org/plugins/quantity-field-on-shop-page-for-woocommerce/ Since WooCommerce Thumbnail Input Quantities doesn't actually work any more… Tried this plugin. It’s OK, but... • It also produces Notices. • And adds Quantity: where not wanted. Pragmatic solution – Copy relevant code into the SG-Motorsport child theme. FREE
  37. 37. WooCommerce Bulk Edit Product Variations https://codecanyon.net/item/woocommerce-bulk-edit-variable-products-prices/6822726 Woocommerce Bulk Edit Product Variations for Wordpress & Bulk edit prices, sales, weight, sku and more! Deactivated until needed again. $ 23
  38. 38. WooCommerce PayPal Checkout Gateway Replacement for paypal-for-woocommerce https://wordpress.org/plugins/woocommerce-gateway-paypal-express-checkout FREE
  39. 39. Woocommerce Calculate Shipping In Product Page https://wordpress.org/plugins/woo-calculate-shipping-in-product-page/ https://codecanyon.net/item/woocommerce-shipping-calculator-on-product-page/11496815 $ 27
  40. 40. WooCommerce Product Search https://woocommerce.com/products/woocommerce-product-search/ $ 49
  41. 41. Remove Related Products No longer needed. WooCommerce related products logic is better than it used to be. https://wordpress.org/plugins/ns-remove-related-products-for-woocommerce/ FREE
  42. 42. Redirection https://wordpress.org/plugins/redirection/ <link rel="icon" href="https://qw/sgmotorsport/wp-content/uploads/2018/09/cropped-SG-Motorsport-site-identity-512x512-32x32.png" sizes="32x32" /> <link rel="icon" href="https://qw/sgmotorsport/wp-content/uploads/2018/09/cropped-SG-Motorsport-site-identity-512x512-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="https://qw/sgmotorsport/wp-content/uploads/2018/09/cropped-SG-Motorsport-site-identity-512x512-180x180.png" /> <meta name="msapplication-TileImage" content="https://qw/sgmotorsport/wp-content/uploads/2018/09/cropped-SG-Motorsport-site-identity-512x512-270x270.png" /> Manage all your 301 redirects and monitor 404 errors Check 404's and fix basic missing files. e.g. Missing: Apple-touch-icon Solution: Set Site Icon in Customizer FREE
  43. 43. WooCommerce Google Product Feed https://woocommerce.com/products/google-product-feed/ Add your products to Google Merchant Center $ 79
  44. 44. WooCommerce Sequential Order Numbers https://wordpress.org/plugins/woocommerce-sequential-order-numbers/ Automatically sets sequential order numbers for new orders. FREE
  45. 45. WooCommerce Table Rate Shipping https://woocommerce.com/products/table-rate-shipping/ Highly customizable shipping options. Define multiple shipping rates based on location, price, weight, or item count. Wildcards may be used to match multiple regions too. $ 99
  46. 46. Others The site also uses: tiny-compress-images, cookie-cat, cookie-notice, disable-xml-rpc-littlebizzy, far-future-expiry-header, limit-login-attempts, my-custom-functions, oik- widget-cache, wp-live-chat-support, wp-optimize, wp-product-feed-manager. FREE
  47. 47. Challenges Item Implementation Hiding tags from Product Display Child theme woocommerce/single-product/meta.php Titles hidden in canvas Child theme style.css H2's instead of Product short description Fixup to post_excerpt Hundreds of Categories Style Product Categories widget Too many stylesheet links Storefront does it for you Cacheing - Failed to set referrer policy Correct W3 Total Cache configuration PayPal Express plugin replacement WooCommerce PayPal Checkout Gateway Responsive display iPhone 4S Child theme style.css
  48. 48. Challenges – hiding tags Challenge: Hiding Tags from Product display Solution: Child theme woocommerce/single-product/meta.php Comment out wc_get_product_tag_list <?php //echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product- >get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
  49. 49. Challenges – titles hidden Challenge: Titles were hidden in Canvas theme Solution: Child theme style.css – leave the titles, hide the h1 div.entry-content h1 { display: none; }
  50. 50. Challenges – h2 for product desc https://github.com/bobbingwide/sgfixup Challenge: H2's instead of product short description Solution: • Batch routine to copy the h2 content to the excerpt. • CSS to hide the h2 and (possibly) the first paragraph. bespoke
  51. 51. Challenges – hundreds of categories Challenge: Hundreds of categories Solution: • Style Product categories widget • Set options to: • Order by name • Only show children of the current category • Hide empty categories
  52. 52. Challenges – too many stylesheet links Challenge: Too many stylesheet links Solution: Storefront enqueues any child theme’s stylesheet automatically. You don’t need to do it in functions.php i.e. Don’t need add_action( 'wp_enqueue_scripts', 'storefront_child_enqueue_styles' );
  53. 53. Challenges - Cacheing Challenge: Failed to set referrer policy The value '' is not one of 'no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross- origin', or 'unsafe-url'. The referrer policy has been left unchanged. Solution: Update setting in W3 Total Cache: Performance > Browser Cache > Directive drop down  This problem was also present in the live site. See also: Problems – Live site broken!
  54. 54. Challenges – PayPal Express Challenge: PayPal Express plugin replacement PayPal for WooCommerce v1.4.14 was producing PHP Notices. Solution: WooCommerce PayPal Checkout Gateway Use PayPal Checkout and PayPal Standard
  55. 55. Challenges – iPhone 4S Challenge: Responsive display on iPhone 4S Maybe my 4S was just too old... Solution: Child theme style.css @media screen and ( max-width: 480px ) { … }
  56. 56. Steps – Migrate to staging Purpose: To create a shared play area Intention: To not break the Live site! Step Details Create staging site https://rowlandscastlewebdesign.co.uk Export local database wp search-replace --export=sgm.sql Re-zip plugins and themes Windows 7-zip Update staging site ftp and unzip plugins, themes and uploads Import database mysql db < sgm.sql Test – fiddle about a bit See what’s working and what’s not
  57. 57. Problems! Problem Solution Thumbnail regeneration Regenerate in batch Bad import / export Use phpMyAdmin Your cart is currently empty wp search-replace --all-tables Contact form not working in Canvas Replace by oik’s contact form Contact form From: email Child theme override to Easy WP SMTP doing it wrong Fix or replace plugins Stop running this script? Shoddy blaming! This site can’t be reached Disable GZIP compression Unable to see command line output Must use plugin HTML tags disappearing Remove unwanted filter processing Two get requests for every page Fix logic in Storefront Footer Bar Firefox requesting shop/page/2 ! Prevent Firefox prefetch Live site broken! See: Do not break the current site
  58. 58. Problems – Thumbnail regeneration Problem: thumbnail regeneration taking forever Solution: - Disable background regeneration - wp media regenerate --yes Problem: 53 in error. Solution: sgfixup – report_missing_image Now we have to think about updating Live!
  59. 59. Problems - Bad import / export Problem: Funny characters appearing in content: Customer services – Tel; Started as Looks like Unicode Export UTF-8 After import displayed as Change to? No-break space U+00A0 c280  &nbsp; or space En dash – U+2013 e28093 – &ndash; or - Right single quotation mark ’ U+2019 e28099 ’ &rsquo; Left double quotation mark “ U+201C e2809c “ &ldquo; Right double quotation mark ” U+201D e2809d ― &rdquo; Solution: Import it correctly the next time! phpMyAdmin mysql --default-character-set=utf8 database
  60. 60. Problems – Your cart is currently empty Problem: Add to cart failing due to many missing tables. Bad export from wp-cli Solution: wp search-replace –export=sgm.sql --all-tables
  61. 61. Problems - Contact form Problem: Contact form not working in Live site – Fatal messages in PHP 7.1 Workaround: Revert to PHP 5.6 Solution: oik plugin already in use so… Replace by [bw_contact form]. But may need some additional spam checking logic; captcha / Akismet https://wordpress.org/plugins/oik/ FREE
  62. 62. Problems – Contact form From: email https://wordpress.org/plugins/easy-wp-smtp/ Problem: From email address overridden by Easy WP SMTP Easy WP SMTP allows you to configure and send all outgoing emails via a SMTP server. This will prevent your emails from going into the junk/spam folder of the recipients. Solution: Add filter to child theme to add user's email and name as part of the email content. FREE
  63. 63. Problems – doing it wrong Problems: • Plugins issuing Notify messages when WP_DEBUG true. • WooCommerce issuing deprecated code messages. Workaround: • Set WP_DEBUG false. • Deactivate plugins. Solutions: • Fix the original plugins – Incremental Product Quantities • Switch to alternative plugins – WooCommerce PayPal Checkout Gateway • Copy/paste required code into child theme – Thumbnail input quantities
  64. 64. Problems – Stop running this script? This message came from Windows File Explorer. I think it was moaning about Photos. Red herring. Shoddy Blaming.
  65. 65. Problems – This site can’t be reached Problem: This site can’t be reached Explanation: Probably a combination of gzip compression and PHP Warning messages from tracing. Workaround: Disable gzip compression
  66. 66. Problems – Unable to see command line output Problem: echoed output is not visible until the end of a routine run on the command line ( PHP “CLI”: WP-CLI or oik-batch ) Workaround: Disable plugins that perform output buffering globally Solution: • Must use plugin • Only needed for local development • When using command line routines • Prevent W3TCGeneric_Plugin::ob_callback from being registered • Prevent ob_gzhandler from being attached farFutureExpiration::do_init_time_tasks https://github.com/bobbingwide/sgfixup/issues/2
  67. 67. Problems – HTML tags disappearing Problem: After running fixup logic to remove [box] shortcodes from Product category descriptions I noticed all HTML tags had been stripped. Explanation: • WordPress SEO adds support for HTML in taxonomy descriptions • It removes filters that disallow HTML • It fails to do this in CLI processing Solution: • Recover wp_term_taxonomy • In fixup, as part of apply_taxonomy_fixups() remove_filter( "pre_term_description", "wp_filter_kses", 10 ); https://github.com/bobbingwide/sgfixup/issues/1
  68. 68. Problems – Two get requests for every page Problem: I noticed that each page was being requested twice. Explanation: Storefront Footer Bar was requesting the current URL for the background image. Workaround: Set a background image for the Storefront Footer Bar Solution: Fix inline CSS Only set background-image property when a background image is defined Follow up: Fixed in v1.0.4 https://github.com/woocommerce/storefront-footer-bar/issues/2
  69. 69. Problems – Firefox requesting shop/page/2 Problem: When visiting the shop Firefox also visits /page/2 Explanation: Red herring for previous problem. Firefox has some special prefetch logic when it sees something like this <link rel="next" href=“link” /> Workaround: In Firefox Visit about:config Find Network.prefetch-next Right click and toggle it to false Solution: Disable creation of adjacent links add_filter( 'wpseo_disable_adjacent_rel_links', '__return_true' );
  70. 70. Non Functional Requirements Requirement Solution Retain SEO rankings Don’t change anything Retain / improve performance figures https://GTmetrix.com Quality, robustness, availability Do not break the current site Maintain server performance oik-bwtrace: daily trace summary Google Analytics http://wordpress.org/plugins/woocommerce- google-analytics-integration/ Responsive CSS Accessibility (A11Y) Maintainable, extensible Latest versions of quality plugins Privacy cookie-notice, WordPress 4.9.8 Criteria that can be used to judge the operation of a system. Quality Attributes. https://en.wikipedia.org/wiki/Non-functional_requirement
  71. 71. Remove query strings Removes all query strings from static resources meaning that proxy servers and beyond can better cache your site content (plus, better SEO scores). Didn't seem all that necessary. Only changed one string. https://wordpress.org/plugins/remove-query-strings-littlebizzy/ FREE
  72. 72. GTMetrix – Live autoptimize
  73. 73. GTMetrix – test – no autoptimize
  74. 74. GTMetrix – test – autoptimize
  75. 75. GTMetrix – test – autoptimize 2.4
  76. 76. GTMetrix – post conversion
  77. 77. Do not break the current site
  78. 78. Maintain server performance Used oik-bwtrace to log server response times – daily trace summary Deactivated wp-optimize Far future expiry – deactivate gzip compression while tracing. Implemented oik-widget-cache Only minify once – in autoptimize not W3 Total Cache https://github.com/bobbingwide/oik-bwtrace FREE
  79. 79. Migrating back to live Biggest concern: To retain order history, including recent orders Resources: https://www.webtoffee.com/migrating-woocommerce-data-to-existing-store/ https://www.skyverge.com/blog/moving-woocommerce-orders-sites/ Plugins: https://woocommerce.com/products/ordercustomer-csv-export/ https://woocommerce.com/products/customerorder-csv-import-suite/ https://wordpress.org/plugins/order-import-export-for-woocommerce/ Chosen solution: • Export Orders to XML file • Extract recent orders one by one ( bespoke CLI sgorders.php ) • Import orders one by one https://github.com/bobbingwide/sgfixup/issues/4 $ 79 $ 79 FREE FREE
  80. 80. Migrating back to live Step Details Backup live site Softaculous backup Configure Under Construction On both live and local Export live orders WordPress Export Orders Import recent orders into local Extracted and imported one by one Export local database wp search-replace –export= –all-tables Upload plugins and themes Changed and new Upload regenerated images ftp having previously renamed uploads Import database into live phpMyAdmin Test – fiddle about a bit See what’s working and what’s not Reactivate deactivated plugins On live, as required Deactivate Under Construction On both live and local Complete the checklist See next slide Purpose: To update the live site Intention: To not break the live site!
  81. 81. Complete the checklist Item Details PayPal Verify payment gateway configuration Google Analytics Activate contact form Check emails robots.txt Ensure crawling enabled error_log 404’s Check log from redirection wp-config.php e.g. WP_DEBUG false. private files ? Not in public places. Tidy wc-logs Security Activate Wordfence Backup live site Download UpdraftPlus files Plugin and theme licences Purchase extensions, delete unneeded Access all URL forms including aliases: www, .co.uk, .com Purpose: To ensure the live site’s running as expected Intention: Production not Development. Confirm NFR’s are satisfied.
  82. 82. Lessons learned Lesson Learned ? In test environments deactivate plugins only intended for Live Eventually How to stop Google bot indexing a test site? Nope – but see above Clear browser cache when site is not available after DNS hoo-ha Eventually Regular backups are vital; for all environments Often a given Use MU plugins in local / command line development to develop workarounds to some problems Yes WordPress SEO can be just as happy if you don’t use heading tags TBD Retain a working copy of the original site, incl. updates Yes You’re probably not the first to suffer a problem Common knowledge You may be the first to actually fix it and you get kudos Some problems may never be resolved life’s too short I still don’t know the best way to update the uploads folder one day … in some cases lessons not learned!
  83. 83. Coming up 17 Oct WooCommerce 3.5 19 Oct WordPress 5.0 – Beta 1 20 Oct 7th anniversaryof WordUp Pompey! 15 Nov WordUp Pompey! – Workshop  Implementing security recommendations 19 Nov WordPress 5.0 Release  Gutenberg  Twenty Nineteen 20 Dec WordUp Pompey! 2019 see Meetup and/or wp-pompey.org.uk https://make.wordpress.org/core/5-0/ Thanks again to our venue sponsor redIT

×