Intermediate WordPress Skills

Install plugins to add functionality to Gravity Forms

The following video will show you how you can do conditional logic on form fields, the submit button, confirmations, and notifications.

Gravity Forms CSS Ready Classes allow you to customize some of the look/layout of the form fields.  Here is a link to the official documentation from Gravity Forms:

https://docs.gravityforms.com/css-ready-classes/

If you would rather have a plugin that lets you choose the layout then here is one plugin that can do it for you:

https://gravitywp.com/css-ready-classes-selector-gravity-forms/

Gravity Forms Hide Form Field Label

Add the following code to the bottom of the functions.php file of the child theme.

[code]add_filter( ‘gform_enable_field_label_visibility_settings’, ‘__return_true’ );[/code]

Automatically populate Gravity Forms field with rotating values

The following links provide code that will allow a hidden field to rotate through values as people fill out the form.  This would be useful if you want the leads to be assigned on a round robin fashion.

https://stackoverflow.com/questions/43797146/automatically-populate-gravityforms-field-with-rotating-values

https://gist.github.com/spivurno/8908a589aa6ceaf6ff0a874324bfbf93

By default, Contact 7 forms doesn’t have a way to redirect visitors to a confirmation page.  They can only show a confirmation message.  Obviously, we don’t like this for tracking purposes as well as customer user experience.

There are a few ways you can make the forms able to redirect to confirmation pages but over time some of them have stopped working as Contact 7 has been updated.  One of the most popular methods at one point was to add a line of code to the “Additional Settings” page that said on_sent_ok: “ga( ‘send’, ‘event’, ‘Contact Form’, ‘submit’ );” but this one no longer works so please disregard it.

Here is the method that currently works:

• Install and activate Contact Form 7 Redirection plugin
• There will now be a new tab in the form editor that will give you a place to declare the confirmation page

Redirection for Contact Form 7

By default, Contact 7 forms only send the entries via email and they are not stored anywhere else.  This isn’t necessarily a bad thing if the emails are always sent or the leads are always passed to a CRM but unfortunately you can’t always count on the emails working as our experience has shown.  So to help keep a living archive of the leads like Gravity Forms does, we highly recommend that sites that do use Contact 7 forms install an add-on plugin that saves the entries to the database making them accessible via the WordPress admin.

There are likely several plugins that can do this but here is one that we have used in the past that worked when we used it.  If for some reason this one doesn’t then search for a different one.

Contact Form Submissions

Contact 7 Forms can and may be very frustrating to work with.  You may find yourself wanting to convert the forms on the website to Gravity Forms.  There is nothing wrong with doing this.  Just make sure that before you swap out the forms on the site that the following (but not limited to) items are addressed:

• Styling is good
• Fields that need to be required are required
• Notifications and confirmations are setup properly
• Anti-spam honey pot and possibly other anti-spam measures are in place such as recaptcha
• If they send the leads to a 3rd party CRM make sure the connection is setup correctly

WooCommerce does a really good job at documenting their plugin.  Rather than recreating the wheel, the following will help point you in the direction of some of the WooCommerce trainings to start with.  If you want to start at the root of the trainings, please go to docs.woocommerce.com

• If you are starting from the beginning with no WooCommerce experience and the site currently doesn’t have WooCommerce installed then you will want to start with:
  • 1. Installing & Updating
• Most generally when you get your first hands on experience with WooCommerce you will be working on a website that is already setup.  You will want to check out the following sections:
  • 3. Set Up Products
    • Adding and Managing Products
    • Variable Product – Think of a shirt. It is one product but variable sizes
  • 5. Shipping
    • The easiest shipping options to setup are “Free” and “Flat Rate”.  Other methods are available such as USPS, FedEx, and UPS calculated shipping but they require a lot of configurations such as entering product dimensions and weight as well as define package sizes.
  • Core Payment Options
    • PayPal, Stripe, and Authorize.net are most common.
      • PayPal doesn’t require an SSL certificate since the transaction takes place off of the website but in 2018 all websites should be protected with HTTPS anyways
      • Stripe puts the processing on the website so it requires HTTPS and is very simple for clients to create an account and get approved and setup.  It can even accept Apple Pay as a form of payment.  This is a great option for clients who don’t have super high volume in sales
      • Authorize.net is very popular but only really seems to make sense for clients who process enough transactions in a month.  So they typically have lower per transaction rates than Stripe and PayPal but they charge monthly and daily batch fees which Stripe doesn’t so I always recommend the client price out what they would pay in fees for the different providers and find out which option is cheapest for them.
  • Settings & Options
    • Setting up Taxes in WooCommerce
      • Now if you use the “WooCommerce Services” plugin and sign in to JetPack you can enable “Automated Tax Calculation”
        • https://docs.woocommerce.com/document/woocommerce-services/
    • Adding Products/Product Categories to main menu
      • For some reason WordPress likes to make things tricky for users on the Menu’s page inside of WordPress.  If you want to add a Product Category to a menu in WordPress you have to click on “Screen Options” in the very top right corner of the menu page which will show you a list of various post types and taxonomies.  Just check on the ones you want to have visible.  There are also other options you may want enabled in here as well…

Here is something that I often send to clients as we begin building them an ecommerce website:

• Products
  • Names, descriptions, variations (sizes, colors, etc), images, pricing
  • Shipping – how much will we charge?  Flat rate is easiest to setup.  We can also do more complex shipping options but they take more time to setup and may require additional premium plugins
  • Taxes – Are we charging sales tax? If so, what regions and at what rate(s)
  • Checkout – Who are we using for payment processing?  Who you end up choosing is up to you.  We aren’t payment processing experts.  Here are a few options but there are others as well.  You just want to make sure that the one you go with will work with WooCommerce.  What ever you end up choosing, you will need to setup the account and then provide me certain information depending on which processor.
    • PayPal
      • No monthly fees.  Pricing is 30cents + 2.85% per transaction.
      • Transaction takes place on PayPal’s website not on the website.
      • Downside is because the transaction happens offsite sometimes Google Analytics doesn’t track the conversion properly
      • An SSL certificate isn’t required
    • Stripe (stripe.com)
      • No monthly fees.  Pricing is 30cents + 2.85% per transaction.
      • Transaction takes place on the website.  Customers can also have their payment method saved if the website is expected to have a lot of repeat customers.
      • An SSL Certificate will be required (As low as $9.00/year)
      • Apple Pay support
    • Square (squareup.com)
      • Square is an easy way for anyone to have a POS system (all they need is a phone or tablet).
      • No monthly fees.  Swiped cards are 2.75% per transaction.  Keyed or online transactions also have a 30cent per transaction added to the cost.
      • Manage inventory from the register app and it should sync up with WordPress
      • Use one platform for in person transactions and online sales
      • Transaction takes place on the website.
      • An SSL Certificate will be required (As low as $9.00/year)
    • Authorize.net
      • There will likely be monthly and daily batch fees but transaction costs should be lower.  They make sense when you have enough volume or sales.
      • Transaction takes place on the website.
      • An SSL Certificate will be required (As low as $9.00/year)
    • Other payment processors (from your bank or elsewhere)
      • We would need to make sure that they support WooCommerce
      • Transaction takes place on the website.
      • Just be aware of the fees and rates they will charge.

More tips on backup buddy including how to setup schedules and limit backups as well as a caution to always run a fresh backup prior to making updates to the website (primarily plugin/wordpress updates).

SVG Support

You can simply install a plugin called “SVG Support” and configure the options to your needs or if you want to reduce the amount of plugins on the site you can add some code to the theme’s (child theme if it is a market place theme) function.php file to enable SVG support

[code]function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes[‘svg’] = ‘image/svg+xml’;
$file_types = array_merge($file_types, $new_filetypes ); return
$file_types;
}
add_action(‘upload_mimes’, ‘add_file_types_to_uploads’);[/code]

Here is an article that does a great job explaining it. https://themeisle.com/blog/add-svg-to-wordpress/

How to create a page where you can promote your client’s customers to leave positive reviews/feedback

Review Experience Popup

1. Install and activate the “popup-builder-platinum.zip” plugin which is found on Egnyte under Website Build Resources -> Plugins and Themes
2. Create a “HTML” popup with the plugin.  Set the title to “Review Experience Popup” or whatever you want it to say
3. Paste the code below in the “Text” view in the general section.
4. Replace yourplaceidgoeshere with the business PlaceID within the code.
5. By default, we will be sending poor experience to “/satisfaction-survey/” URL which you will create later.  If you want it to go to a different URL then set the URL to be what you want it to go to.
6. Press the “Save Changes Button”
7. Go to “All Popups” and take note of the shortcode for the popup you just created.  As long as it is your first one and you didn’t press the “Preview” button when building it it should be sg_popup id=1

[code]

How was your experience?

Good
Poor
[/code]

Satisfaction Survey Page

1. Create a new page and name it “Satisfaction Survey” and make sure the permalink is “/satisfaction-survey/”. If you want the page to have a different URL then be sure to update the URL in the Review Popup as well.
2. Put whatever information you want on this page.  If you want it to look like the following survey you will need to use Gravity Forms with the “Survey Add-On”.

Gravity Forms with Survey Add-on

1. Install Gravity Forms and add in the license key if the site doesn’t already have it
2. Install the Survey Add-on by going to Forms -> Add-Ons and find the add-on and install it
3. You can now either build out your own survey form or if you want a starting point you can download the example form and import it into your WordPress site
   1. To import the sample, go to Forms -> Import/Export and choose “Import Forms” and upload the file and press the import button.
   2. You can now go to “Forms” and make any other changes you like to the form such as add/remove fields or setup a confirmation page and notifications.
4. Add the survey form to the Satisfaction Survey Page

Google Reviews Plugin

1. Install the “google-reviews-business.zip” plugin which is found on Egnyte under Website Build Resources -> Plugins and Themes
2. To activate the plugin you will need to provide a license key.  From within the same folder on the Egnyte drive there is a txt file called “Google Review Plugin Licenses.txt”.  Open it up and you will see a list of license keys.  Take the next available one and enter the name of the website before the license key and save the file.  Now copy that license key and within WordPress go to Settings -> Google Reviews Business -> Settings and enter in the license key
3. You will then need to enter in an API key.  To do this you will need to:
   1. Follow the directions in the plugin to do this.  Do not add sites to our billing profile
4. Once the plugin is installed and active with a valid license go to Plugins and update it to the latest version.
5. You can now configure the plugin by going to Settings -> Google Reviews Business -> Shortcode Builder and fill out the prompts
   1. Enter the name of the place (and address if it doesn’t pull up)
   2. Select the Place
   3. Under Review Options be sure to check the first two options “Try to get more than 5 Google reviews” and “Enable Google Rich Snippets”
   4. Under Display Options choose a photo for the icon.  The icon is in the shape of a circle so using a square image is best
   5. Enable/Disable the other settings as you see fit and grab the shortcode
6. Alternatively, you can use the following pre-built shortcode and just replace the following:
   • place_name – nameoftheplace
   • place_id – placeidgoeshere
   • place_photo – http://theurloftheimagegoeshere.png

[code][google-reviews-pro place_name=’nameoftheplace’ place_id=placeidgoeshere auto_load=true rating_snippet=true pagination=10 sort=1 min_filter=4 place_photo=http://theurloftheimagegoeshere.png disable_user_link=true view_mode=list open_link=true lazy_load_img=true reviews_lang=en]
[/code]

Leave us a Review Button

Simply add the following html where you would like the button to go. Inside of the a tag you will notice that there are 2 classes. “button” and “sq-confirm-popup-1”. The first class should make the link look like a button depending on the theme styles. If not, add in the necessary classes to your theme that will make it look like a button. The second class is what causes the popup to happen. Make sure this class matches the shortcode of the review popup.
[code]

[/code]

Look at the page and make adjustments as necessary

If the popup works but you don’t see the smiley and frowny face then the site might not be using Font Awesome.  Add the following script to the top of the popup html and it should fix them
[html]<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.0.8/css/all.css” integrity=”sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S” crossorigin=”anonymous”>[/html]

If this doesn’t work, you may need to add the style sheet to the header, or you may need to download the font awesome 4 and add it directly to your site and link to that style sheet instead.

If the faces are working but the words are next to the faces, add <br> in front of both Good and Poor inside the Popup text.

If the words are now under the faces, but when hovering the space next to the faces is underlined, add the following code before </style>.

[html]a.review-popup-a { text-decoration: none;}[/html]

If the line is now gone, but the face color doesn’t change on hover, add the following code before the previous code (make sure to change the color to something that will fit the site – use the dropper tool in the upper right hand corner of the browser to easily copy a color).

[html]a.review-popup-a:hover {
color: [insert color];
}[/html]

If you add a badge to the footer of the website it will have the reviews show up on all of the pages of the website which will in turn allow Google to be able to show star ratings on any/all pages in their search results.  We obviously aren’t in control which pages Google will add these ratings to but at least the markups are there for Google to be able to grab them if they choose to.

Using the plugin you will want to generate a shortcode that will give the right type of badge you want.   Here is the shortcode for the badge we are using on SeboMarketing.com  You will obviously have to modify the shortcode to match your client’s needs.

[google-reviews-pro place_name=’Sebo Marketing’ place_id=ChIJse7hmjKFTYcRP5gXax4CCdY auto_load=true rating_snippet=true place_photo=https://www.sebomarketing.com/wp-content/uploads/2017/10/square-icon-sebo.png view_mode=badge_inner lazy_load_img=true]