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.