Okay
  Public Ticket #3612112
Customizing or Creating a "Features" table
Closed

Comments

  • Annie started the conversation

    Hello, 

    I am wanting to create a table that shows different features for 3 service options. I was hoping to create something similar to the "Features" table that is shown on this revenucat website: https://www.revenuecat.com/. I've included screenshots/screenrecords of this table as well. The table is responsive and on mobile it allows the user to scroll to view the entire thing. 

    I tried to customize one of the pricing tables that is offered on the salient site, but it doesn't allow me to hide the prices, and if I remove the button under the features column, that box becomes shorter than the others. Additionally, on mobile the boxes break down so you can't view it as a horizontal table. I've included screenshots of this.

    Do you have any options for me to be able to create a table like the revenue cat example? Thank you for your time! 

    Attached files:  Revcat - Features Table - Desktop View.png
      Salient Table Example - Mobile View.png
      Salient Table Example - Desktop View.png
      Revcat - Features Table - Mobile View.MP4

  •  1,875
    Judith replied

    Hello Annie,

    Thanks for writing to us.

    Have you tried using CSS to remove the sections you don't need? If not you can let us know all the sections you want to remove from the table to assist you in achieving the layout you've described.

    I look forward to your response.

  • Annie replied

    Hi Judith, 

    I'd like to remove the Price, Currency Symbol, and Interval (“Per Month” or “Per Year”). I've included a screenshot of it with those options crossed out in red. Would you be able to tell me how I could remove these? Thanks!

    Attached files:  Salient Table Example - Desktop View.png

  •  8,838
    Tahir replied

    Hey Again,

    Please provide the page url where we can view the Table in the Screenshot attached earlier ?.

    Thanks.


    ThemeNectar Support Team 

  •   Annie replied privately
  •  1,875
    Judith replied

    Hi Annie,

    Thanks for writing back.

    To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:

    From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:

    .pricing-table[data-style=flat-alternative] .pricing-column h4 {
        display: none;
    }
    .pricing-table[data-style=flat-alternative] .pricing-column .interval {
        display: none;
    }

    Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related

    I am not seeing the Sign Up Now button:

    2572838318.png

    Please let us know if that's all you need.

    I look forward to your response.

  • Annie replied

    Thank you so much, that worked! I am actually experiencing another problem I wondered if you could help me with. I used to be able to make changes using the front end editor and then update the site when I was done so the changes were reflected. In the last 2 days when I hit the Update button, nothing happens and I end up losing any changes I made. Is there a reason why this is happening?

  •  8,838
    Tahir replied

    Hey Again,

    There could be a server side issue. 


    Please check for Browser Console Errors : https://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors

    Thanks.


    ThemeNectar Support Team