SlideShare a Scribd company logo

Switching from Canvas to Storefront

Herb Miller, profile picture
Herb Miller

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.

Internet
1 of 83
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
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/
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
Switching from Canvas to Storefront How to update a WooCommerce site with a new theme. … the trials and tribulations by @herb_miller
Steps If only it were that simple. Step Details Choose a new theme Storefront Install theme Already done Activate
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
Disclaimer Every screenshot pleases somebody. Herb Miller
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
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/
SG Motorsport - Canvas Stephen Goodyear's online shop https://www.sgmotorsport.biz
SG Motorsport - ebay https://www.ebay.co.uk/str/sgmotorsport
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
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
SG Motorsport - Storefront If started out something like this.
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
SG Motorsport - shop After a while it was like this
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
Storefront Extensions Bundle 13 WooCommerce and Storefront extensions. Cost: $69 plus tax Individually: > $190 $ 69https://woocommerce.com/products/storefront-extensions-bundle/
Storefront Blog Customiser Adds blog customisation settings to the Storefront theme. Not needed. $ 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/
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/
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/
Storefront Mega Menus Create enhanced full width dropdowns that seamlessly tie into your Storefront powered WooCommerce shop. $ 39
Storefront Parallax Hero Adds a hero component to the Storefront homepage template. $ 19
Storefront Powerpack Up your game with Storefront Powerpack and get access to host of neat gadgets that enable effortless customisation of your Storefront. $ 59
Storefront Pricing Tables Add attractive pricing tables to your posts and pages. [pricing_table columns="3" alignment="center"][/pricing_table] $ 19
Storefront Product Hero Display styling parallax product hero components on your web pages. Not needed. $ 19
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/
Storefront Product Sharing https://wordpress.org/plugins/storefront-product-sharing/ FREE
Storefront Reviews Display product reviews on the across your Storefront powered WooCommerce shop. Increase conversions by highlighting positive product reviews (sic) $ 19
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/
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
Homepage Control Re-order or disable the homepage components in certain themes. https://wordpress.org/plugins/homepage-control/ FREE
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
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
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
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
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
WooCommerce PayPal Checkout Gateway Replacement for paypal-for-woocommerce https://wordpress.org/plugins/woocommerce-gateway-paypal-express-checkout FREE
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
WooCommerce Product Search https://woocommerce.com/products/woocommerce-product-search/ $ 49
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
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
WooCommerce Google Product Feed https://woocommerce.com/products/google-product-feed/ Add your products to Google Merchant Center $ 79
WooCommerce Sequential Order Numbers https://wordpress.org/plugins/woocommerce-sequential-order-numbers/ Automatically sets sequential order numbers for new orders. FREE
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
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
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
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>' ); ?>
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; }
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
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
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' );
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!
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
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 ) { … }
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
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
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!
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
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
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
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
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
Problems – Stop running this script? This message came from Windows File Explorer. I think it was moaning about Photos. Red herring. Shoddy Blaming.
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
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
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
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
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' );
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
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
GTMetrix – Live autoptimize
GTMetrix – test – no autoptimize
GTMetrix – test – autoptimize
GTMetrix – test – autoptimize 2.4
GTMetrix – post conversion
Do not break the current site
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
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
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!
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.
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!
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

More Related Content

PPTX
WooCommerce
Joshua Copeland
 
PDF
Storefront word press-guide-sk
viet nghiem
 
PDF
An Overview of WooCommerce
BobWP.com
 
PDF
How to set up a WordPress website step by-step tutorial
Marshall Reyher
 
KEY
Making WordPress Better for Your Clients
Troy Dean
 
PDF
Securing your WooCommerce Site
Jamie Schmid
 
PDF
eCommerce Platforms
University of Hertfordshire
 
PDF
Tutorial
glindarae51
 
WooCommerce
Joshua Copeland
 
Storefront word press-guide-sk
viet nghiem
 
An Overview of WooCommerce
BobWP.com
 
How to set up a WordPress website step by-step tutorial
Marshall Reyher
 
Making WordPress Better for Your Clients
Troy Dean
 
Securing your WooCommerce Site
Jamie Schmid
 
eCommerce Platforms
University of Hertfordshire
 
Tutorial
glindarae51
 

Similar to Switching from Canvas to Storefront (20)

PDF
Flatsome | Responsive WooCommerce Theme - WordPress
sharpgwxtzxgccc
 
PDF
Top 100 wordpress plugins
guz393
 
PDF
Building Ecommerce Storefronts on the JAMstack
BigCommerce
 
PDF
Optimizing WordPress eCommerce for Performance & Growth - Chris Wiegman, Sara...
WP Engine
 
PDF
Amazing WordPress & Productivity Tips
Tony Cecala, Ph.D.
 
PPTX
Awesome WooCommerce eCommerce Plugins for Wordpress website
Sem Jacobs
 
KEY
Extending WP-e-Commerce WordCamp UK
jghazally
 
PDF
Fun with WooCommerce
East Bay WordPress Meetup
 
DOCX
AJAX DROP DOWN CART FOR VIRTUEMART
MagentoOneStepCheckout
 
PPTX
20 Tips to Improving WordPress Website - for Beginners-Aus-2017
TRB Design, Inc.
 
PDF
How to Speed Up WooCommerce Performance?
WPWeb Infotech
 
PDF
Using WooCommerce to Scale Your Store
WP Engine
 
PDF
F5 Buddy Woo Commerce Web Development
F5 Buddy
 
PPTX
Shopio - Multipurpose WooCommerce WordPress Theme
Opal WordPress
 
PDF
Project guideline
Adrian Yi
 
PDF
How to Migrate from Jigoshop to Shopify wih Cart2Cart
Cart2Cart
 
PPT
WooCommerce-The Best Alternative - by Sadip
Sadip Bhattarai
 
PDF
Shopping carts payment ethical issue_e-commerce
abir hossain
 
PDF
Amaze showcase review
okduocthoi
 
PDF
How to Sell ANYTHING with WordPress + WooCommerce
Rodolfo Melogli
 
Flatsome | Responsive WooCommerce Theme - WordPress
sharpgwxtzxgccc
 
Top 100 wordpress plugins
guz393
 
Building Ecommerce Storefronts on the JAMstack
BigCommerce
 
Optimizing WordPress eCommerce for Performance & Growth - Chris Wiegman, Sara...
WP Engine
 
Amazing WordPress & Productivity Tips
Tony Cecala, Ph.D.
 
Awesome WooCommerce eCommerce Plugins for Wordpress website
Sem Jacobs
 
Extending WP-e-Commerce WordCamp UK
jghazally
 
Fun with WooCommerce
East Bay WordPress Meetup
 
AJAX DROP DOWN CART FOR VIRTUEMART
MagentoOneStepCheckout
 
20 Tips to Improving WordPress Website - for Beginners-Aus-2017
TRB Design, Inc.
 
How to Speed Up WooCommerce Performance?
WPWeb Infotech
 
Using WooCommerce to Scale Your Store
WP Engine
 
F5 Buddy Woo Commerce Web Development
F5 Buddy
 
Shopio - Multipurpose WooCommerce WordPress Theme
Opal WordPress
 
Project guideline
Adrian Yi
 
How to Migrate from Jigoshop to Shopify wih Cart2Cart
Cart2Cart
 
WooCommerce-The Best Alternative - by Sadip
Sadip Bhattarai
 
Shopping carts payment ethical issue_e-commerce
abir hossain
 
Amaze showcase review
okduocthoi
 
How to Sell ANYTHING with WordPress + WooCommerce
Rodolfo Melogli
 
Ad

More from Herb Miller (20)

PPTX
WordPress - Whats going on in the server?
Herb Miller
 
PPTX
My favourite block v0.0.1
Herb Miller
 
PPTX
WordPress block editor v0.0.0
Herb Miller
 
PDF
Site Health Check for WordPress
Herb Miller
 
PPTX
WordPress Portsmouth Meetup 20 February 2019 v0.0.1
Herb Miller
 
PPTX
WordPress Portsmouth Meetup 20 March 2019 v0.0.1
Herb Miller
 
PPTX
Yoast SEO Workshop - WordPress Portsmouth Meetup 16 Jan 2019
Herb Miller
 
PPTX
WordPress Portsmouth meetup 20 dec 2018 v0.0.2
Herb Miller
 
PDF
WordPress Portsmouth Meetup - 15 Nov 2018
Herb Miller
 
PDF
WordUp Pompey - September 2018
Herb Miller
 
PDF
WordUp Pompey - July 2018
Herb Miller
 
PDF
WordUp Pompey - June 2018
Herb Miller
 
PDF
WordUp Pompey - May 2018
Herb Miller
 
PDF
WordUp Pompey - April 2018
Herb Miller
 
PDF
WordUp Pompey- March 2018
Herb Miller
 
PDF
WordUp Pompey - 22nd Feb 2018 - Gutenberg
Herb Miller
 
PDF
WordUp Pompey reboot! - 18th Jan 2018
Herb Miller
 
PDF
Responsive web design: WordUp Pompey! Feb-2012
Herb Miller
 
PDF
Shortcodes: WordUp Pompey! Feb-2012
Herb Miller
 
PDF
WordPress is not just a blog
Herb Miller
 
WordPress - Whats going on in the server?
Herb Miller
 
My favourite block v0.0.1
Herb Miller
 
WordPress block editor v0.0.0
Herb Miller
 
Site Health Check for WordPress
Herb Miller
 
WordPress Portsmouth Meetup 20 February 2019 v0.0.1
Herb Miller
 
WordPress Portsmouth Meetup 20 March 2019 v0.0.1
Herb Miller
 
Yoast SEO Workshop - WordPress Portsmouth Meetup 16 Jan 2019
Herb Miller
 
WordPress Portsmouth meetup 20 dec 2018 v0.0.2
Herb Miller
 
WordPress Portsmouth Meetup - 15 Nov 2018
Herb Miller
 
WordUp Pompey - September 2018
Herb Miller
 
WordUp Pompey - July 2018
Herb Miller
 
WordUp Pompey - June 2018
Herb Miller
 
WordUp Pompey - May 2018
Herb Miller
 
WordUp Pompey - April 2018
Herb Miller
 
WordUp Pompey- March 2018
Herb Miller
 
WordUp Pompey - 22nd Feb 2018 - Gutenberg
Herb Miller
 
WordUp Pompey reboot! - 18th Jan 2018
Herb Miller
 
Responsive web design: WordUp Pompey! Feb-2012
Herb Miller
 
Shortcodes: WordUp Pompey! Feb-2012
Herb Miller
 
WordPress is not just a blog
Herb Miller
 
Ad

Recently uploaded (20)

PDF
Unit-1 introduction to cyber security discuss about how to secure a system
shivangisharma636228
 
PDF
Testing WebRTC applications at scale.pdf
Giacomo Vacca
 
PDF
SASE Traffic Flow - ZTNA Connector-1.pdf
mackwell7777
 
DOCX
Unit-3 cyber security network security of internet system
shivangisharma636228
 
PPT
isotopes_sddsadsaadasdasdasdasdsa1213.ppt
Kenneth James Alamillo
 
PPTX
E -tech empowerment technologies PowerPoint
kylebalatero12
 
PPTX
Module 1 - Cyber Law and Ethics 101.pptx
anantyakhrisna1
 
PDF
APNIC Update, presented at PHNOG 2025 by Shane Hermoso
APNIC
 
PDF
Sims 4 Historia para lo sims 4 para jugar
lolpopy34
 
PDF
How to Ensure Data Integrity During Shopify Migration_ Best Practices for Sec...
CartCoders
 
PDF
The New Creative Director: How AI Tools for Social Media Content Creation Are...
SageTitans
 
PDF
Decoding a Decade: 10 Years of Applied CTI Discipline
Andreas Sfakianakis
 
PDF
RPKI Status Update, presented by Makito Lay at IDNOG 10
APNIC
 
PPTX
Job_Card_System_Styled_lorem_ipsum_.pptx
Jeffkigen
 
PDF
Slides PDF The World Game (s) Eco Economic Epochs.pdf
Steven McGee
 
PPTX
innovation process that make everything different.pptx
SoumyadipPaul18
 
PDF
Best Practices for Testing and Debugging Shopify Third-Party API Integrations...
CartCoders
 
PDF
Cloud-Scale Log Monitoring _ Datadog.pdf
MuhammadDhomanhuriMa
 
PPTX
June-4-Sermon-Powerpoint.pptx USE THIS FOR YOUR MOTIVATION
KuyaRogie
 
PDF
Vigrab.top – Online Tool for Downloading and Converting Social Media Videos a...
Vigrab Top
 
Unit-1 introduction to cyber security discuss about how to secure a system
shivangisharma636228
 
Testing WebRTC applications at scale.pdf
Giacomo Vacca
 
SASE Traffic Flow - ZTNA Connector-1.pdf
mackwell7777
 
Unit-3 cyber security network security of internet system
shivangisharma636228
 
isotopes_sddsadsaadasdasdasdasdsa1213.ppt
Kenneth James Alamillo
 
E -tech empowerment technologies PowerPoint
kylebalatero12
 
Module 1 - Cyber Law and Ethics 101.pptx
anantyakhrisna1
 
APNIC Update, presented at PHNOG 2025 by Shane Hermoso
APNIC
 
Sims 4 Historia para lo sims 4 para jugar
lolpopy34
 
How to Ensure Data Integrity During Shopify Migration_ Best Practices for Sec...
CartCoders
 
The New Creative Director: How AI Tools for Social Media Content Creation Are...
SageTitans
 
Decoding a Decade: 10 Years of Applied CTI Discipline
Andreas Sfakianakis
 
RPKI Status Update, presented by Makito Lay at IDNOG 10
APNIC
 
Job_Card_System_Styled_lorem_ipsum_.pptx
Jeffkigen
 
Slides PDF The World Game (s) Eco Economic Epochs.pdf
Steven McGee
 
innovation process that make everything different.pptx
SoumyadipPaul18
 
Best Practices for Testing and Debugging Shopify Third-Party API Integrations...
CartCoders
 
Cloud-Scale Log Monitoring _ Datadog.pdf
MuhammadDhomanhuriMa
 
June-4-Sermon-Powerpoint.pptx USE THIS FOR YOUR MOTIVATION
KuyaRogie
 
Vigrab.top – Online Tool for Downloading and Converting Social Media Videos a...
Vigrab Top
 

Switching from Canvas to Storefront

  • 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/
  • 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
  • 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
  • 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