How to Design MyListing Pricing Tables and Packages

Our How to Design MyListing Pricing Tables and Packages guide shows you how to create visually appealing Pricing information with nothing more than what’s included with the core of WordPress and the MyListing theme.

We also address MyListing’s “Add Listing Flow”, which, at the time of this writing is such that it does not provide pricing information until a user registers for an account.

Until this “flow” is changed, it’s critical to show potential customers how much they can expect to pay and what features they will get.

Default Listing Package Design

Out of the box, MyListing packages get the majority of their base design from the individual WooCommerce product pages. Outside of that, the Accent Color you specify within the theme is automatically pulled in to style the elements listed below.

  • Package Name (On Hover)
  • Package Price
  • Package Button

If a website owner does nothing aside from filling in the product information and perhaps adds a Pricing Plan Image, the design is going to be pretty basic. This can easily be changed.

Designing Listing Packages

We will be editing the product pages themselves, where we will use design elements to spruce up the package design and make each pricing tier stand out so customers clearly understand the differences.

Premium Listing Package

The Premium pricing tier is where we like to start, as this tier gives the customer every feature we offer, and the reason we start here will become more clear as we go through this guide.

From the “Visual” tab of the product page, we start by highlighting all of the features within our package and clicking on the “Bold” icon to bold all of the features.

While this is a very good start in terms of differentiating the Premium tier from the other tiers, we can do more.

Next, we want to flip over to the “Text” tab of the product page to expose the underlying HTML. As we did with bolding the text, we want to assign a colored icon to all of the features, since they are all included.

The last thing we like to do is add a line item that appears at the very bottom of the features list, which provides a link for customers to learn more about what’s included in the package.

We have this link out to a custom Listing 101 page. For this link, we add an icon that signals “information” to the customer and we also style the link so it further stands out from the feature list.

Non-Premium Listing Packages

Now that we have the Premium tier package design right where we want it, we want to duplicate it so we can quickly get the other package tiers in place.

We duplicate the product by going to WordPress Dashboard > Products, hovering over the product, and choosing “Duplicate”. Once the package is duplicated, we make the obvious changes like renaming the product, assigning the price, etc.

On the design side, we simply strip out the elements to show which features are not included at this level.

If the package doesn’t include a particular feature, we remove the bold from the text, remove the icon, and remove the HTML that styles the icon color.

Listing Type Package Configuration

The final step is to add some HTML (provided later in this guide)within your Listing Type(s), to design the Listing Package name (e.g. MyCity Charlotte Basic).

Listing Package Design End Result

Listing Package Design Resources

To pull off a similar design, you will need 1 of our CSS Packages and 1 of our Listing Product Packages, both of which work together to complete the solution.

Addressing the MyListing "Flow"

At this point, we now have some good-looking Packages, but the problem is that potential customers cannot see them, and this is because the pricing information is hidden until someone registers for an account on a MyListing website.

To address this, we create and design a custom, front-facing Pricing page that is available for all to see without having to log in, and the really cool thing here is we don’t need to design the pricing table from scratch.

Once the page is created, we edit it with Elementor, drop in the 27 > Package Selection widget, and since we already have the CSS from above, it will also be applied here.

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)