All Collections
Multi-Platform Subscription App (Not for Shopify)
Custom Development & API
How to hide the price of a specific plan in your customer shopping cart using CSS
How to hide the price of a specific plan in your customer shopping cart using CSS

You can hide the price of a plan in your shopping cart (ie. remove $0.00 per month) with custom css in your customer portal.

Ryan P. avatar
Written by Ryan P.
Updated over a week ago

In certain scenarios, you might want to hide the price of a specific plan in your customer' shopping cart.ย 

For example, you might have a $0 plan for a pre-sale where you just want to collect a credit card number but you don't want to charge customers until you actually ship your item(s) so you setup a plan that costs $0 with only one installment... This will work great, however, this will display "$0.00 Monthly" to customers when they are checking out and that might be confusing.

You can hide the price of specific line items in your cart for plans using CSS if you need and there are a few ways you can do this currently...

  1. NAME OF PLAN

  2. PRICE OF PLAN

  3. TYPE OF PLAN (product, service, fee)

If you right click and inspect the item's row in your cart (that you want to modify) to view the underlying html you will see we append three different class names per cart item in the cart.

First, inspect your cart to view the html...


Next, locate the "cart_item" div for the row you want to modify.

You will notice there are three different class names on this div with different prefixes for each one:
โ€‹
name_
price_
type_

This allows you to write specific css that will only apply to the plan in that row using three different controls... You can either hide all the prices with the same NAME, PRICE or TYPE using those unique class names.

For example, if you want to hide the price for all rows in the cart with the same PRICE ($0.00 in this example) the css would be...

.price_f7ddd489ab0a82567b241b05971cbdb3 .cart_item_price { display: none }

OR... If I wanted to hide the price where the NAME of the plan was always "Once a month" I would use...

.name_fb48f92393984248045d86d7664bcbab .cart_item_price { display: none }

To edit the CSS in the Cart go to Widgets and Forms > Customer Portal and click Style My Portal

Note: You can also hide all the prices in the cart based on the TYPE of plan it is... For example, if you didn't want to show the price on any plans with a type = fee (setting in plans) then you would inspect the row that was for any fee and use it's unique type_ to write your CSS.

If you have any questions, please let us know!

Team PayWhirl

Did this answer your question?