AFILLIATE SHORTCODE STYLING WITH UPFRONT

Hello,

I'm trying to integrate the Affiliates plugin with my Membership Pro 2 system to generate more members on my site. I have several questions on how to best integrate and simplify the user experience.

I should note that this is not for business to business and I'd like the members to share links without having to think too much about it.

1) My members don't have access to the backend of the site, so i've created a separate page for the affiliates details.

2) The affiliates shortcodes load some really awful styling with my upfront/Spirit theme. The following items are must change styles, but the integration post link is dead, so I have to ask here. (I've also tried this method and did not see any changes)

a. I'd like the affiliate link to be shown when the page loads. Right now you have to click the 'edit' button (which is white) and read through a lot of text.

b. If the link can't be displayed without an interaction, I need to be able to adjust the styling for: i. the background colour of the container
ii. the 'edit' button needs to be styled like the other buttons on my site
iii. 'Enable Affiliate Links' needs to be changed to 'Would you like to refer your friends?'
iv. PayPal Email Address and entry field can be hidden (I will apply partial refunds through the stripe gateway)
v. 'Affiliate Advanced Settings' can be hidden as it will never be used by individuals.
vi. Is there a way to add a 'Share This Link' function beside the affiliate link?
vii. The 'Update Settings' button should look like the buttons on all other pages of the site

c. Separate from the styling above, I need to make it wickedly simple for members to 'Share' their link to social media. How has this been done in the past? What would you recommend?

I will be tracking all changes manually on the back-end and I'll never use PayPal to cash out, as mentioned above.

If there are references to these changes that have worked for others, please send me links.

NOTE: I'm working from a WP Engine staging site. I will grant support access, but I'm not sure how far you will get on a staging site. Please let me know if you need more access.

  • Milan

    Hello Daniel,

    Hope you are well today and thanks for asking us. :slight_smile:

    I've crated this CSS snippet for you based on your requirement of styling Affiliates page for upfront theme. Please use this in your theme or leverage this nice plugin to manage it.
    Simple Custom CSS

    #affiliateuserdetails{
        text-align: center;
        display: block;
    }
    
    #affiliateuserdetails .formholder form{
        width: 50%;
        margin: auto;
    }
    
    #affiliateuserdetails .formholder strong{
        display: block;
    }
    
    #affiliateuserdetails .formholder form table th,td{
        text-align: left;
        padding: 10px;
        width: 50%;
    }
    
    #affiliateuserdetails .formholder form table select{
        width: 100% !important;
        text-align: center !important;
        padding: 2px;
    }
    
    #affiliateuserdetails .formholder form input[type="submit"]{
        text-align: center !important;
        border: 2px solid grey;
        padding: 5px;
        border-radius: 10px;
    }
    
    #editaffsettingslink {
        color: red;
        display: inline-block; padding: 2px 8px;
        border-style: solid; border-width: 2px;
        border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
    }

    iii. 'Enable Affiliate Links' needs to be changed to 'Would you like to refer your friends?'

    For this you'll need to update core file of plugin which is C:\Users\Milky\Desktop\affiliate\affiliateincludes\classes\affiliateadmin.php. After line no. 661 you'll form element, which markup you can tweak according to your need. Just keep in mind that you'll need to take backup of change everytime you update plugin because changes to core files wont' be preserved during updation process. One more thing, do not change default values or php code of plugin, just markup. :slight_smile:

    iv. PayPal Email Address and entry field can be hidden
    v. 'Affiliate Advanced Settings' can be hidden as it will never be used by individuals.

    Do you want to hide these for admin and for front end both ?

    vi. Is there a way to add a 'Share This Link' function beside the affiliate link?

    I not getting your point completely. Can you please provide me bit more information on this. ?

    <blockqutoe>
    c. Separate from the styling above, I need to make it wickedly simple for members to 'Share' their link to social media. How has this been done in the past? What would you recommend?

    This is something which requires custom coding to be done. You may want to hire developer or use our Job Portal.

    Hope this helps you. :slight_smile:

    Cheers,
    Milan

  • Daniel

    Hi Milan,

    I've gotten around to working on this again. Please refer to the attached image to see where I've gotten the page to.

    iv. PayPal Email Address and entry field can be hidden
    v. 'Affiliate Advanced Settings' can be hidden as it will never be used by individuals.
    Do want to hide this for admin and for front end both ?

    1) Yes, please hide these values for admin and front end.

    2) You will notice on the image that different fields have different background colours (white and yellow). I want the yellow colour to remain, but I want the white background to leave.

    3) The background for the 'Enable Affiliate links' field should have a 1px border (color: #b72d2d) to make it stand out as a selection box.

    4) Can the 'Update Settings' button move to the right of the row it's in?

  • Milan

    Hello Daniel,

    I hope you are having a good day and thanks for asking us. :slight_smile:

    iv. PayPal Email Address and entry field can be hidden
    v. 'Affiliate Advanced Settings' can be hidden as it will never be used by individuals.
    Do want to hide this for admin and for front end both ?

    Actually in process of finding solution for you about this, I have installed plugin named "code snippets" on your staging site and due to some error with snippet, your staging site got down just now. Don't worry its very easy to fix, just go to your staging site's /wp-content/plugins/ directory and rename folder "code-snippets" to something like "code-snippets-renamed". This change will bring your staging site back to life. I am sorry that my troubleshooting has brought your site down. Once site comes back to live, open database of your staging site with phpmyadmin, find table named "wp_snippets" and delete each entry in it.( cosider your table prefix in place of "wp_" ) Now go back to your staging site's /wp-content/plugins folder and rename folder "code-snippets-renamed" back to "code-snippets"

    After you complete above process, please inject this snippet as new snippet from Dashboard > Snippets > Add New and activate it for everywhere.( Both for front end and for backend )

    <?php 
    
    add_action( 'admin_enqueue_scripts', 'load_snippet_for_affiliat_admin_settings_page' );
    add_action( 'wp_footer', 'hide_affiliates_settings' );
    
    function load_snippet_for_affiliat_admin_settings_page($hook) {
        if ( 'profile_page_affiliateearnings' == $hook ) {
        	hide_affiliates_settings();
        }
    }
    
    function hide_affiliates_settings(){
    	?>
    	<script type="text/javascript">
    		jQuery(document).ready(function($) {
    		    $("div.innerbox table.form-table tbody > tr:nth-child(2)").hide();
    		    $("div#innerbox table.form-table tbody > tr:nth-child(2)").hide();
    		    $("h3:contains('Affiliate Advanced Settings')").each( function( i, e ){
    		       $(this).next("table.form-table").hide();
    		       $(this).hide();
    		    });
    		});
    	</script>
    	<?php
    
    }

    2) You will notice on the image that different fields have different background colours (white and yellow). I want the yellow colour to remain, but I want the white background to leave.

    3) The background for the 'Enable Affiliate links' field should have a 1px border (color: #b72d2d) to make it stand out as a selection box.

    4) Can the 'Update Settings' button move to the right of the row it's in?

    I am sorry but due to site down I am no longer able to target these issues, just bring your site back and I reply you as soon as possible for your these questions.

    Again sorry for your time loss and waiting for your prompt too.
    Kind Regards,
    Milan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.