MarketPress Buy Now Button styling

Hi Guys, I would really like to change the ‘Buy Now’ buttons in Market Press to the PayPal Buy Now button graphic as it makes my site much more appealing to potential customers, and increases my conversion rate.

Can you please advise me on how to go about doing this?

Many Thanks,

Dav

  • Jack Kitterhing
    • Code Norris

    Hi there Dav (@davtirluthier)

    You’ll most likely want to create a custom theme for MarketPress, by that I don’t mean a WordPress theme but a thing like the modern.css and icons.css found in marketpress includes > themes, take a read of the themeing marketpress.txt.

    I have pasted it below for you as well :slight_smile:

    Themeing MarketPress
    

    There are two methods to create custom designs for MarketPress stores:

    Basic Styles:

    Basic styles are comprised of a css file and an optional images folder that is loaded
    and applied on store pages. To create a basic style:

    1. Create a css file in the /wp-content/marketpress-styles/ directory with your custom styles. It
    may be easiest to copy our default.css theme and modify it.
    2. Make sure to add the custom theme header with your theme's name at the top of the css file:
    /*
    MarketPress Style: CUSTOMNAME
    */
    Including this header will cause your custom theme to show in the dropdown on the
    Store Settings -> Presentation page so it may be selected.
    3. You can also optionally create a subdirectory for your css images in the /wp-content/marketpress-styles/ folder and
    link to images within it with relative urls like "image-folder/my-image.jpg".

    Advanced Themes:

    MarketPress uses custom post types to display it's products. This means that you can use
    the same WP theme templating system you are familiar with. We simply provide a customized
    subset of template functions so you don't have to worry about dealing with post meta. Template
    functions are fully documented and can be found in the /marketpress/marketpress-includes/template-functions.php file.

    E.g. to create a custom product page:

    1. Make a copy of the page.php template file in your theme directory and rename it mp_product.php

    2. mp_product.php must use the mp_* functions instead of the_content(), see template-functions.php for a list of functions relevant to products.

    MarketPress searches your current theme folder for template files specific to store pages. If
    a template file does not exist it loads the theme's page template instead. Just like WP, the
    plugin will search for templates in order of priority from top to bottom. Here are possible
    file names for store templates in order:

    Single Product Page
    mp_product-PRODUCTNAME.php
    mp_product-PRODUCTID.php
    mp_product.php

    Store Page
    mp_store.php

    Cart/Checkout Page
    mp_cart.php

    Order Status Page
    mp_orderstatus.php

    Product List Page
    mp_productlist.php

    Product Category List Page
    mp_category-CATEGORYSLUG.php
    mp_category-CATEGORYID.php
    mp_category.php
    mp_taxonomy.php
    mp_productlist.php

    Product Tag List Page
    mp_tag-TAGSLUG.php
    mp_tag-TAGID.php
    mp_tag.php
    mp_taxonomy.php
    mp_productlist.php

    Global Listings - Will only work on main site/blog
    Product List Page
    mp_global_products.php
    mp_productlist.php

    Product Category List Page
    mp_global_category-CATEGORYSLUG.php
    mp_global_category.php
    mp_global_category_list.php

    Product Tag List Page
    mp_global_tag-TAGSLUG.php
    mp_global_tag.php
    mp_global_tag_list.php

    So you could just grab a paypal button image and replace that and other styles you wish :slight_smile:

    Thanks!

    Kind Regards

    Jack,

  • davtirluthier
    • New Recruit

    Hi Jack,

    Thanks for the reply, I did read that text and have a go at changing it before, so let me expand on my situation.

    Using the ‘Basic Styles’ method, I copy the icons theme and rename it (as it’s the one most suitable to my visual style at the outset).

    I then go into the stylesheet, rename it and look to edit it.

    At this point, it seems to me the place to edit would be at line 58

    .mp_link_buynow {
    border: 1px solid #bfbfbf;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #dfdfdf;
    -moz-box-shadow: inset 0 1px 0 #fff;
    -webkit-box-shadow: inset 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 #fff;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
    background-image: -moz-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 100%);
    background-image: -o-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 100%);
    background-image: -webkit-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 100%);
    background-image: linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 100%);
    font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
    text-shadow: 0 1px 0 #fff;
    text-decoration: none;
    padding: 8px 20px;
    font-size: 0.9em;
    }

    Now that’s a fair chunk of css there, which builds a button quite specifically, and while I’m no novice at css, I’m not sure how to adapt this to change it to a simple PayPal button image on the front end.

    One thing I do know, is that the text ‘Buy Now’ is not in the style sheet at all, but must be called in the php files somewhere, and this would need to be edited out too.

    Obviously, the css for the hover and active states would need editing also.

    So I guess my question is, how do I

    ‘just grab a paypal button image and replace that and other styles I wish’

    using the ‘Basic Styles’ method.

    Now, with the ‘Advanced Styles’ method, I admit to being completely lost and would need a step by step guide to figure that one out as I am a complete PHP novice.

    So, here’s hoping there is a simple workaround for my situation, I’m certainly up for the challenge if you guys are,

    Dav.

  • Jack Kitterhing
    • Code Norris

    Hi there Dav (@davtirluthier)

    I hope you are well today, first of all very sorry for the delay in my reply, I somehow missed your other reply’s.

    Thank you for the additional information, I don’t think this is going to be very easy to change to your PayPal button, I found this thread here https://premium.wpmudev.org/forums/topic/custom-buy-now-button

    That may help explain some more, as you are correct that it will need to be changed in the PHP file.

    Take a look at line 6206, 6269, 6898 in MarketPress.php and line 1760 in template-functions.php, do you have a direct link to the image you want so I can test it please?

    Thank you! And again very sorry about the delay.

    Kind Regards

    Jack.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.