Design MyListing Pricing Tables and Packages

This guide will help you create visually appealing pricing information with nothing more than what’s included with the core of WordPress and the MyListing theme, or spice things up with the MyListing Pricing Table Switcher.

I 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, showing potential customers how much they can expect to pay and what features they will get is critical.

Default Listing Package Design

Since MyListing packages are WooCommerce products, they inherit the majority of their base design from WooCommerce. Aside from that, the ‘Accent Color’ you specify within the theme is automatically used to style the elements listed below.

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

If a website owner does nothing besides fill in the product information and add a Pricing Plan image, the design will be basic. This can easily be changed.

Designing Listing Packages

We will edit the WooCommerce Products (i.e., Listing Packages), using design elements to spruce up the design and make each pricing tier stand out so customers clearly understand the differences. Please keep in mind we are only focusing on design.

Highest Priced Listing Package

I start with this highest-priced package, as it gives the customer every feature offered, and the reason I am starting here will become more apparent as we go through this guide.

1. Edit the WooCommerce Product (i.e., Listing Package).
2. Product Description > Switch from the ‘Visual’ tab to the ‘Text’ tab.
3. List the features that are included in this package.
4. Before each feature, add the HTML shown below to show a checkmark before the feature.

<i class="fa fa-check"></i>

At this point, the features have been added to the package, and now we want to include a link to an educational page where we show Listing owners what features are all about. If you want to style the checkmarks, the CSS code snippet below will change their color to black, for example.

.pricing-item .fa.fa-check {
  	color: #000;
}

5. At the end of your list of features, add the following HMTL.

<i class="fa fa-info-circle"> </i><a href="https://domain.com/support/#features" target="_blank" rel="noopener nofollow"> <span class="pricing-learn-more">Plan Features</span></a>

6. Adjust the link in the above code snippet to point to the correct place on your website, where you educate people about Listing features.

At this point, you should have a working link to your educational page.

If you want to style the ‘Plan Features’ link text, the above code snippet already has the ‘pricing-learn-more’ CSS class configured for you. All you need to do is apply your desired CSS using that class. The CSS code snippet below, for example, bolds the link text.

.pricing-learn-more {
    font-weight: bold;
}

Additional Listing Packages

Now that we have the highest-priced Listing Package design right where we want it, we want to duplicate it to get the other packages in place quickly.

1. WordPress Dashboard > WooCommerce > Products
2. Hover over the product we just configured and choose ‘Duplicate.’
3. Adjust the product name, price, etc.

Regarding the design, there are several approaches for showing what features are and are not included in a package.

• Remove the features that aren’t part of a particular plan.
• Remove the checkmarks for features that aren’t part of a particular plan.
• Change the styling of the features to show which are included and which are not.
• Change the styling of the checkmarks to show which are included and which are not.

Addressing the MyListing “Flow”

At this point, we have some good-looking Listing Packages. However, potential customers cannot see them 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 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 and add the ’27 > Package Selection’ widget. Since we already have the CSS from above, it will also be applied here.

MyListing Pricing Table Switcher Add-on

By default, there isn’t an elegant way for MyListing website owners to display monthly and annual pricing within the pricing tables that are part of the ‘Add Listing’ process, so customers might not know that you have additional pricing options unless they scroll down the page.

The MyListing Pricing Table Switcher allows customers to instantly toggle between monthly and annual pricing options.

Video Tutorial