Adding a button to the uploads page

Hi, I want to add a button to the bottom of the page which directs user to their basket. ideally button colour is #008000 with White text. - http://take.ms/xCG7z

The page is a little hard to find but if you click on shop then one of the products then click the uploads button that is the page - screencast - http://take.ms/YY7I4
domain link - http://tinyurl.com/jfdx5t4

Support access is open
Thanks
Tom

  • Milan

    Hello @Tom,

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

    First of let me tell you there is already one button named "View Basket" on the page you've described. Having that said I'll need to move that button to bottom of the page right ? If so then I can do it with some css tweak, but basically its going to be problematic if you change page content later on. Furthermore I am not sure how that button has been rendered on your site as its being displayed by third party plugin. But if you give me access to your site, I can do something for you regarding your this requirement but for that I'll need access to your site files too.

    Would you be able to send in your FTP and wp-admin credentials so I could take a look?

    You can send the info through our private contact form: https://premium.wpmudev.org/contact/

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me :slight_smile:

    Send in:

    Subject: "Attn: Milan Savaliya"
    -WordPress admin username
    -WordPress admin password
    -login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant urls

    Once we have this information then I can debug the issue further :slight_smile:

    Look forward to hearing back!

    Cheers,
    Milan Savaliya.

  • Adam Czajczyk

    Hello Tom,

    I hope you're well today!

    As per your request, I removed the screenshot from Milan's recent post.

    I've also moved the button for you. I tried to much your request as closely as possible however I think in case you'd like to further customize it you may want to get in touch with WP Fortune plugin's developers as I wasn't able to find any way to edit template for that upload page (except using jQuery and CSS) other than editing core plugin's file.

    Here's what I did:

    1. I put this CSS into your "Appearance -> Custom CSS" box:

    /* View Basket button fix - by Adam/WPMU */
    .wpf-umf-view-cart-button.button {
    	background-color:#008000;
    	z-index:9999;
    }
    .wpf-umf-view-cart-button {
    	margin-left: calc(50% - 60px);
    	margin-bottom:100px!important;
    }

    2. I've created the wpmu-move-view-basket.php file and uploaded it to /wp-content/mu-plugins folder on your server. The file includes this code (that outputs a jQuery snippet that actually moves the button):

    <?php
    
    function wpmu_move_view_basket() {
    	?>
    	<script type="text/javascript">
    	jQuery(function($) {
    		$(".wpf-umf-view-cart-button.button").insertBefore("#foot_wrapper .custom-links-holder");
    	});
    	</script>
    	<?php
    }
    add_action('wp_footer','wpmu_move_view_basket');

    I hope that helps!

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Tom!

    I'm glad I could help!

    or is this what you meant with speaking to the plugin developer?

    Yes, that's this. The issue here is that the button is being displayed on the screen within a specific, pre-defined place in DOM Tree (in other world in HTML structure). For further customization I'd need to change that HTML structure, meaning editing "upload page" template file. It seems that the developer do not let us do this easily.

    Best regards,
    Adam

  • Tom

    Hi Adam they just replied with this:

    to add custom HTML after upload boxes.

    https://support.wpfortune.com/hc/en-us/articles/204449891-Add-custom-HTML-after-upload-boxes

    If you want to hide the button ABOVE the upload boxes you can add some CSS like:

    .wpf-umf-view-cart-button.button {
    display:none
    }

    Here is from that link

    If you want to add custom HTML after the upload boxes, you can use our 'wpf_umf_after_upload_boxes' hook. You can use this hook to display a 'Go to cart' button directly after the upload boxes, a short description or any other HTML you want. The example below shows a 'Go to cart' button, only when the uploads are before checkout (the WooCommerce Uploads Before Add-On is needed for this).

    add_action('wpf_umf_after_upload_boxes', 'wpf_umf_after_upload_boxes', 10, 1);

    function wpf_umf_after_upload_boxes($upload_mode) {

    if ($upload_mode == 'before') {

    echo 'cart->get_cart_url().'">'.__('Go to cart').''; }

    else {

    // Here something if uploads are after checkout

    }

    }

    I assume it makes more sense to you then me.

    What would be the best way to integrate this?
    Thanks
    Tom

  • Predrag Dubajic

    Hi Tom,

    Moving the button down might be the easiest solution.

    From the Appearance > Custom CSS box you can adjust that in Adam's code directly.

    This is part of the code you should edit:

    .wpf-umf-view-cart-button {
    	margin-left: calc(50% - 60px);
    	margin-bottom:100px!important;
    }

    Just change margin-bottom value from 100 to something like 20 and that should do the trick.

    Let us know how it goes.

    Best regards,
    Predrag

  • Tom

    Hi Predrag,

    Thanks for the CSS update, that looks alot better, i just noticed that the padding in the bottom of the page has disappeared, would you mind providing me with some CSS code to add some padding to the bottom of the page on desktop devices so that there is enough padding to cover the space behind the cloud footer. also i noticed that if the page width is smaller less padding is needed vs when page width is full screen and no padding is required, is there any way to create some kind of balance ?

    Thanks
    Tom

  • Predrag Dubajic

    Hi Tom,

    For bottom padding you could try something like this:

    .site-content {
    	padding-bottom: 50px;
    }

    You can wrap CSS so it's usable only on certain screen sizes, here are few examples:
    This will apply to screens larger than 480 pixels:

    @media screen and (min-width: 480px) {
        /*YOUR CSS CODE GOES HERE*/
    }

    This will apply to screens smaller than 480 pixels:

    @media screen and (max-width: 480px) {
        /*YOUR CSS CODE GOES HERE*/
    }

    And this will apply on screens that are larger than 480 but smaller than 1024 pixels:

    @media screen and (min-width: 480px) and (max-width: 1024px) {
      /*YOUR CSS CODE GOES HERE*/
    }

    Using these rules you can adjust your code for different screen sizes, just change the value of max and min width for the screen you want to apply it.

    Hope this makes sense and let us know if you have any followup questions.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.