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

    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

    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

    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.