PRO SITE PRICING TABLES HTML

Hi,
in pro site pricing tables' custom text, I need use Html to edit, is it possible?
Thanks.

  • James Morris

    Hello leoventans,

    I hope you are well today.

    I'm afraid using HTML in this section is not supported out of the box. This field is sanitized for security reasons. I've pinged our Dev Team to ask if there is a workaround to allow HTML in this field, but this will require some custom code to accomplish.

    If you're just wanting to add styling to contents of the Custom Text field, this can easily be accomplished using CSS. Even if you're wanting to style one particular row. You can use the CSS3 :nth-child() Selector. And if you're wanting to do even more advanced changes, you can do this with jQuery, usually.

    Could you give us a little better idea of what you're wanting to do to the text in the Custom Text field? Perhaps we can find a solution for you. :slight_smile:

    Best regards,

    James Morris

  • James Morris

    Hello leoventans,

    The simplest way to accomplish this without hacking the plugin's core files is to use the following jQuery.

    jQuery("div.feature-text:contains('products')").html(function(_, html) {
       return html.split('products').join("<a class='a'>products</a>");
    });
    jQuery("div.feature-text:contains('100')").html(function(_, html) {
       return html.split('100').join("<a class='b'>100</a>");
    });

    This will search inside the element for the text string, then wrap the text in the desired HTML entity.

    In order to implement this on your site, you'll need to either add the custom code inside of <script>...</script> tags in your theme template files or by installing a plugin like Simple Custom CSS and JS and make your changes there. https://wordpress.org/plugins/custom-css-js/

    Please let us know if this takes care of your issue for you.

    Best regards,

    James Morris

  • James Morris

    Hello leoventans,

    Thank you for having Support Staff Login enabled so I could take a little closer look at this issue.

    There were a couple issues that were causing this to not work in your situation.

    First, you had the code option set to CSS in CSS & Javascript Toolbox. I changed this to JS. Second, the script was being loaded in the header. There seems to be another JS script that is conflicting with this code. So, I moved the script to the footer. This has resolved the issue and the script is working correctly now.

    Best regards,

    James Morris

  • James Morris

    Hello leoventans,

    Actually, because of the way CSS works, you don't need to modify the core files of the plugin. Those CSS directives are added to wp_head. It's important to remember that CSS works in order of precedence. Meaning, the last directive parsed is the directive that will be followed.

    So, using the CSS & Javascript Toolbox, if you define your custom styles there and have them loaded in the footer, ensuring that they are the last styles parsed, then they will take precedence over the plugin's default styles. All you'll need to do is make sure you add the !important rule to your directives.

    Alternately, you can use something like the following remove_action to remove the styles registered by Pro sites and register new styles. This can be done in either a mu-plugin or your theme's functions.php

    // Remove Pro Sites Admin Bar CSS
    function remove_my_class_action(){
    	global $psts;
        remove_action( 'wp_head', array( $psts, 'add_menu_admin_bar_css'));
        remove_action( 'admin_head', array( $psts, 'add_menu_admin_bar_css') );
    }
    
    add_action('plugins_loaded', 'remove_my_class_action');
    
    // Add custom Pro sites Admin Bar CSS
    add_action('wp_head', 'custom_add_menu_admin_bar_css');
    add_action('admin_head', 'custom_add_menu_admin_bar_css');
    
    function custom_add_menu_admin_bar_css() {
    
    	if ( is_main_site() || ! is_admin_bar_showing() || ! is_user_logged_in() || ! current_user_can( 'edit_pages' ) ) {
    		return;
    	}
    
    	//styles the upgrade button
    	?>
    	<style type="text/css">
    		#wpadminbar li#wp-admin-bar-pro-site {
    		}
    
    		#wpadminbar li#wp-admin-bar-pro-site a {
    		}
    
    		#wpadminbar li#wp-admin-bar-pro-site a span {
    		}
    
    		#wpadminbar li#wp-admin-bar-pro-site a:hover span {
    		}</style>
    <?php
    }

    I hope this clarifies a bit.

    Best regards,

    James Morris