How to Add Educational Features to MyListing’s Listing Promotions Flow

The Problem

When running through user testing one thing that often came up was confusion over Listing Promotions. “What does that ‘Promote’ icon do?” “What does it mean to Promote my Listing?”

Sure, we can and do have an educational page (e.g. Listing 101, Platform 1o1, etc.) where we cover what Listing Promotions are and how they work, but what if the customer has yet to visit that page and becomes curious about that darn ‘Promote’ icon starring back at them?

We need a solution that educates customers while they are in the middle of discovering what the heck something is, which in this case is Listing Promotions.

The Solution

I thought I’d use Loco Translate to inject a link into the Promotions modal, and while that “worked”, it was super clunky and not the right way to do it.

In the end, I rolled up my sleeves, edited a theme file to inject a link, and then applied a bit of CSS.

Implement the Solution

Theme File

  1. Install and activate the MyListing Child Theme if you haven’t already.
  2. Using your preferred FTP application (ex. FileZilla), connect to your server. (Note: You can also use any of the Free ‘File Manager’ plugins from the WordPress repository, but we always recommend editing files using FTP just in case something goes wrong.).
  3. Once connected, browse to wp-content/themes/my-listing/templates/dashboard/promotions.
  4. Copy the ‘choose-promotion.php’ file down to your workstation.
  5. Edit the file using your preferred code/text editor.
  6. Starting at line 94, add in the code shown below, adjust the domain to match your own, and adjust the educational page to be your own.
				
					<span class="learn-about-promtions">
<?php Echo "<a href=https://your-domain/platform-101/#listing-promotions>Learn More About Listing Promotions</a>" ?>
</span>
				
			

In the screenshot below, I’m showing what lines 90-100 look like for my own MyListing websites, just so you have something to compare against.

  1. Save the changes to your file.
  2. Using FTP, browse to to wp-content/themes/my-listing-child.
  3. Replicate the same file structure from step #3, so that in the end you have a path of wp-content/themes/my-listing-child/templates/dashboard/promotions.
  4. Copy your adjusted file that you saved in step #7, to the path in step #9.

In summary, at this point, you have added your custom ‘choose-promotion.php’ file to your child theme where it will be protected from future theme updates.

Now it’s time to apply some CSS to give your injected link a bit of design so it looks nice when customers notice it.

CSS

  1. Copy the CSS below and add it to your website using a plugin like WPCodeBox.
  2. Adjust the CSS as desired.
  3. Save your changes.
				
					.learn-about-promtions a {
  	color: #000;
  	transition: box-shadow .35s ease-in-out;
  	padding-left: 2px;
  	padding-right: 2px;
	box-shadow: inset 0 -0.6em 0 -3px #56bdaa61;
  	letter-spacing: 1px;
  	font-size: 14px;
}

.learn-about-promtions a:hover {
  	box-shadow: inset 0 -1em 0 #56bdaa61;
}
				
			

The Outcome

Video Tutorial

NEW: MyListing Club Community

Get a true community experience that Facebook just can't offer.

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • UiPress ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)