The document summarizes an agenda for a WordPress meetup event. It includes details on networking, presentations on switching from one theme to another, and questions and answers. It also lists sponsors and provides information on the venue, pizza sponsor, and social event after the meetup.

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. 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. Switching from Canvas to Storefront
How to update a WooCommerce site with a new theme.
… the trials and tribulations
by @herb_miller

4. Steps
If only it were that simple.
Step Details
Choose a new theme Storefront
Install theme Already done
Activate

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. Disclaimer
Every screenshot pleases somebody.
Herb Miller

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. 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. SG Motorsport - Canvas
Stephen Goodyear's online shop https://www.sgmotorsport.biz

10. SG Motorsport - ebay
https://www.ebay.co.uk/str/sgmotorsport

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. 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. SG Motorsport - Storefront
If started out something like this.

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. SG Motorsport - shop
After a while it was like this

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. Storefront Extensions Bundle
13 WooCommerce and
Storefront extensions.
Cost: $69 plus tax
Individually: > $190
$ 69https://woocommerce.com/products/storefront-extensions-bundle/

18. Storefront Blog Customiser
Adds blog customisation settings to the Storefront theme.
Not needed.
$ 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. 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. 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. Storefront Mega Menus
Create enhanced full width dropdowns that seamlessly tie into your
Storefront powered WooCommerce shop.
$ 39

23. Storefront Parallax Hero
Adds a hero component to the Storefront homepage template.
$ 19

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. Storefront Pricing Tables
Add attractive pricing tables to your posts and pages.
[pricing_table columns="3" alignment="center"][/pricing_table]
$ 19

26. Storefront Product Hero
Display styling parallax product hero components on your web pages.
Not needed.
$ 19

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. Storefront Product Sharing
https://wordpress.org/plugins/storefront-product-sharing/ FREE

29. Storefront Reviews
Display product reviews on the across your Storefront powered WooCommerce shop.
Increase conversions by highlighting positive product reviews
(sic)
$ 19

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. 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. Homepage Control
Re-order or disable the homepage components in certain themes.
https://wordpress.org/plugins/homepage-control/ FREE

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. 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. 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. 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. 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. WooCommerce PayPal Checkout
Gateway
Replacement for paypal-for-woocommerce
https://wordpress.org/plugins/woocommerce-gateway-paypal-express-checkout FREE

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. WooCommerce Product Search
https://woocommerce.com/products/woocommerce-product-search/
$ 49

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. 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. WooCommerce Google Product Feed
https://woocommerce.com/products/google-product-feed/
Add your products to Google Merchant Center
$ 79

44. WooCommerce Sequential Order
Numbers
https://wordpress.org/plugins/woocommerce-sequential-order-numbers/
Automatically sets sequential order numbers for new orders.
FREE

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Problems – Stop running this script?
This message came from Windows File Explorer.
I think it was moaning about Photos.
Red herring.
Shoddy Blaming.

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. 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. 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. 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. 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. 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. 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. GTMetrix – Live autoptimize

73. GTMetrix – test – no autoptimize

74. GTMetrix – test – autoptimize

75. GTMetrix – test – autoptimize 2.4

76. GTMetrix – post conversion

77. Do not break the current site

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. 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. 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. 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. 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. 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