Change "Browse Products link" in Shopping Cart

Hi All,

Up until about 2 hours ago this code in my Child Style.css was working

a.mp_store_link {
display: none !important
}

I wanted to removed the <Browse Products> link but now it's stopped working and I can see the <Browse Products> link again :slight_frown:

I don't know if this is related to upgrading my Avada Theme earlier today but can anyone help please.

I was thinking I would actually prefer to relink the <Browse Products> link to another url (my custom shop page). How can I do this?

On another note my theme buttons have all changed to a sudden solid green colour with white text instead of the usual style. I've raised a support question on the Avada forums for this as I don't think it's wpmu dev related but if anyone can help I'd be grateful!

Thanks for the support!

  • Michelle Shull

    Hi, Kieran!

    It sounds like your child theme has become unlinked from your parent theme.

    Did the Avada theme happen to change names?

    If you can, can you please copy the first several lines of the style.css file in your child theme here for me? Then do the same with the first few lines of the style.css in the Avada parent theme.

    Do you not want to hide the Browse Products link anymore, but would rather link it to another page? Where is it currently pointing?

    Thanks so much!

  • Kieran

    Hi

    Avada Child Theme Style.CSS

    /*
    Theme Name: Avada Child
    Description: Child theme for the Avada
    Author: Your name here
    Template: Avada
    */

    a.mp_store_link {
    display: none !important
    }

    ---------------------

    Avada Parent Theme
    /*
    Theme Name: Avada
    Description: A business, portfolio and blog theme.
    Author: ThemeFusion
    Theme URI: http://theme-fusion.com/avada/
    Author URI: http://themeforest.net/user/ThemeFusion
    Version: 3.6.1
    License: Themeforest Split Licence
    License URI: -
    Text Domain: Avada

    ------------

    The Browse Products link currently points too

    http://mydomain.com/store/products/

    I want it to point to

    http://mydomain.com/treatments/

    If it's too much bother I'm happy to just get it working and remove it. I suspect something has become unlinked after the upgrade earlier today :slight_frown: I don't believe it changed names

  • Kieran

    Hi

    In terms of my solid green buttons I think this is related to MarketPress and Avada theme.

    When I deactivate the marketpress plugin and use woocommerce the buttons are ok. They've changed since the last Avada theme but look nice. With marketpress activated they are an ugly solid green.

    My Avada theme automatically upgraded yesterday to 3.6.1

    Help! Do you want me to open a new thread on it Michelle? I suspect the issues are related.

  • Tyler Postle

    Hey Kieran,

    Hope you're doing well today and thanks for your question!

    Can you go to Products > Store Settings > Presentation. Then select "None - custom theme template" for your Store style?

    I'm thinking that should let your theme take over the button style. If it doesn't, then we can manually switch the button CSS by doing this.

    Add this to a custom stylesheet or child theme:

    #mp_link_buynow {
        border: 1px solid rgba(0, 0, 0, 0);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        box-sizing: content-box;
        cursor: pointer;
        display: inline-block;
        font-weight: bold;
        outline: 0 none;
        overflow: hidden;
        position: relative;
        text-align: center;
        text-shadow: 0 1px 0 #fff;
        text-transform: uppercase;
        transition: all 0.2s ease 0s;
    }

    If you don't have a custom stylesheet field then use this plugin: https://wordpress.org/plugins/simple-custom-css/

    Hope that helps! Let us know if that works :slight_smile:

    Cheers,
    Tyler

  • Kieran

    Hi Tyler,

    Thanks for the reply and help trying to fix this one. Turning the "None - custom theme template" does at least get rid of the green buttons. But now there's no buttons at all. And the formatting isn't quite right. I've attached screen shot.

    I do have an Avada Child style.css sheet set up but adding it to there didn't do anything at all unfortunately. I do wonder whether my stylesheet is linked to my main parent theme properly. Because other things I had in this sylesheet are now not working (The Browse Products code)

    I tried adding the code in the plugin you suggested and same thing nothing else happens :slight_frown:

    Kind Regards
    Kieran

  • Kieran

    Ok via a fresh reinstall of my child theme it's now working thankfully! This now means the Browse Products link is correctly removed when I put it in my child style.css. If I can change it so it links to a different page then great but its not urgent to be honest. I have a continue shopping button which links people back to where I want them to go.

    I rather embarassingly realise the green buttons are a result of me picking the classic design rather than icon design in marketpress and I've switched back to Icon for the time being. One major disdvantage though seems to be that the product image when I'm booking an appointment doesn't centralise when in icon mode. If I select "none use custome theme" it will centralise! I would like it central!

    I like the "Update Cart" button in the icon design if I pick the "none use custon template" option then this button style dissapears and it just becomes text. I want to keep the icon style of "Update Cart" icon and ideally I would like to change the "Check Out Now" and "Confirm Payment" buttons to my own theme design. I have got the Continue Shopping button as I want it as I have manually added that bit of code myself. I would think I could copy this code to be the same for the "Check Out Now" button and "Confirm Payment" button?

    Tyler is the code not working as you've selected "Buy it Now"? rather than checkout or confirm payment. I think I need a code for the "update cart" button to look like in icon mode also!

    I'd also like my shopping cart page to take up the full width. I think this might make the spacing between the Update Cart and Checkout button a little close so a slightly larger space might be needed.

    Sorry this might sound like a lot but really I just want it to look like a normal checkout!

    Thanks for the help all! :slight_smile:

  • Michelle Shull

    Hello Kieran! Happy Friday once again! : )

    Ok via a fresh reinstall of my child theme it's now working thankfully! This now means the Browse Products link is correctly removed when I put it in my child style.css. If I can change it so it links to a different page then great but its not urgent to be honest. I have a continue shopping button which links people back to where I want them to go.

    Sweet!

    I rather embarassingly realise the green buttons are a result of me picking the classic design rather than icon design in marketpress and I've switched back to Icon for the time being. One major disdvantage though seems to be that the product image when I'm booking an appointment doesn't centralise when in icon mode. If I select "none use custome theme" it will centralise! I would like it central!

    We could all tell you embarrassing stories about ways we've broken our own sites, no judgment here! : )

    Do you mean you want that button centered? We can do that with CSS, which I'll get to in just a bit.

    I like the "Update Cart" button in the icon design if I pick the "none use custon template" option then this button style dissapears and it just becomes text. I want to keep the icon style of "Update Cart" icon and ideally I would like to change the "Check Out Now" and "Confirm Payment" buttons to my own theme design. I have got the Continue Shopping button as I want it as I have manually added that bit of code myself. I would think I could copy this code to be the same for the "Check Out Now" button and "Confirm Payment" button?

    Can you share the code you used? I'm happy to take a look!

    Tyler is the code not working as you've selected "Buy it Now"? rather than checkout or confirm payment. I think I need a code for the "update cart" button to look like in icon mode also!

    Tyler is both younger and more adorable than I am, but hopefully I can answer here. Yes! We can do that with some CSS, and maybe a Font Awesome plugin, if you don't already have one installed.

    I'd also like my shopping cart page to take up the full width. I think this might make the spacing between the Update Cart and Checkout button a little close so a slightly larger space might be needed.

    This might be the easiest of the issues. First easy way: Go to your shopping cart page from Dashboard>Pages. In the right sidebar, there may be a widget that allows you to select a template for that page. If you have that widget, depending on your theme (I don't know Avada very well), there may be an option to use a full-width template. If there is, take it, and that should suit your page fine. If not, we can also do that with CSS and a little trickery.

    Could you link me to your store page so I can whip up some fancy CSS for you?

    Thanks!

  • Kieran

    Hi Michelle,

    Thanks for the reply.

    1) I don't want a button to centralise just my product image. It centralises using icon mode but when I let me theme take over it won't centralise.

    2)My Continue Shopping code is
    <p style="text-align: right;">[button link="http://fight4cash.co.uk/treatments" color="default" size="" type="3d" shape="" target="_self" title="" gradient_colors="|" gradient_hover_colors="|" accent_color="" accent_hover_color="" bevel_color="" border_width="1px" shadow="yes" icon="" icon_position="left" icon_divider="no" modal="" animation_type="0" animation_direction="left" animation_speed="1" alignment="right" class="" id=""]Continue Shopping?[/button]</p>

    I'd like my usual market press buttons to have that style.

    ADD TO CART
    BUY IT NOW
    CHECKOUT NOW
    CONTINUE CHECKOUT
    CONFIRM PAYMENT...

    and the Update Cart button to by a standard grey box similar to the design in icon mode.

    3) I unfortunately have already set the template to 100% width. It is technically at 100% width as the continue shopping button and confirm payment button are on the right have side. But I want Item/Price/Quantity to take up the full page width. I've attached a screenshot to try and make it clearer

    my checkout page is http://fight4cash.co.uk/store/shopping-cart/
    My product page us currently http://fight4cash.co.uk/treatments/

    It's all only test at the minute. I had to create a custom product page because I want it to pre select services rather than give clients a long list.

    Thanks
    Kieran

  • Tyler Postle

    Hey Kieran,

    Hopefully I'm understanding the question correctly here.

    Can you try adding this CSS into your custom CSS sheet :slight_smile:

    .page-id-4098 .post-content {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 60%;
    }
    
    .mp_cart_login {
    float: right;
    margin-top: 10px;
    }

    The page should come out looking like the screenshot attached. Let me know if there is some edits I missed there.

    Have a great weekend!

    All the best,
    Tyler

  • Kieran

    Hi Tyler,

    That does kind of work but what it's done is centralise things all in line which is great but I want it to be 100% width if that makes sense. I.E The Continue Shopping and Checkout buttons are still on the far right and product image is on the far left but theres more of a gap between the product description and the price so it stretches the full width. I think that would look more professional

    Also my Update Cart and Checkout Now button are too close together once you're logged in. I'd like some slight padding here

    Thanks for the help
    Kieran

  • Kieran

    Hi Michelle!

    Thanks for the reply. I've just photoshopped it to full width and then realised I didn't actually like it! I think I would like the cart to look like the attached. Basically I've extended the item/quantity/price column up to my checkout now button. So taking up 85% of the width of the page. Is that possible?

    I've also swapped around the quantity and price column and moved the "have a coupon code" over to the left. The checkout button is also 10px or so lower. I realise this is quite a lot of work though. I will use Tyler's code if it's not possible.

    In regards to my other questions I hope they're straight forward. I'd like to get my marketpress buttons working with the custom code I provided and I'd like my prouct image centralised on this page

    http://fight4cash.co.uk/store/products/reflexology-60-mins/?app_provider_location=36006100610087&app_service_id=3&app_provider_id=3#app_worker_excerp

    The product image is set to centralise is my marketpress settings but it's not working :slight_frown: I tried to just insert a picture in my product page rather than a feature image and centralise it which worked but then I don't get the product image in my shopping cart which I really like!

    Kind Regards
    Kieran

  • Tyler Postle

    Hey Kieran,

    Hope you're doing well today and thanks for the illustration there!

    How about this. Try adding the following CSS:

    .mp_cart_login th, .mp_cart_or_label, #loginform {
    	display: none;
    }
    
    .mp_cart_contents {
    	width: 80%;
    }
    
    #coupon-link, #coupon-code {
    	float: left;
    	padding-top: 10px;
    }

    That will be close and I don't think it will get much closer without changing the template itself. Let us know if that works!

    Have a great rest of your day :slight_smile:

    Cheers,
    Tyler

  • Kieran

    Hi Tyler

    Thanks for the efforts. It's getting there! See Attached. I'm guessing we can't swap the price and quantity columns easy enough. That's ok. Can we move the update cart button 20px to the left so it's in line with the quantity box? and also the checkout now button say 10px down? That I would be happy with :slight_smile:

    It looks far better now less squashed and would reccomend this layout in future marketpress updates!

    P.S I actually dont need this bit of the code

    .mp_cart_login th, .mp_cart_or_label, #loginform {
    display: none;
    }

    I'm still happy for users to log in at checkout. Ideally we'd have a signup and checkout process here? I don't suppose that is possible or maybe it's coming in Marketpress 3?

    Thanks Again I love you guys!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.