MarketPress 2.5.8 Beta - Login Checkout Customization

It appears that MarketPlace 2.5.8 Beta-1 is forcing login, even when "Force Login" option is not selected.

I am able to add an item to my shopping cart when not logged in. However, when I go to the checkout page, the checkout button has been replaced by a login form.

Am I missing something here or is this a bug?

  • NYCWW

    Gina, here is the link. Password = wpmudev
    Ok here's what I was able to determine...
    My theme defines a class called "#contentbox form" as follows:

    #contentbox form {
    	width:580px;
    	position:relative;
    	padding:0 0 20px 0;
    	}

    The width (580px) is equal to the width of the content area (less margins). The rest of the page's width is used by the sidebar.

    The object that is not displaying properly is a table with two columns. The first column contains a form that inherits a width of 580px, pushing the second column outside the visible area of the page.

    Now, I've tried changing the width of #contentbox form to 300px, but that has the unintended consequence of shrinking all forms that should be 580px (see shopping cart in attached screenshot). I'm guessing I'll either need to define a narrower form class just for use in this table or, possibly, modify one of the plugin files to change the width of the columns.

    What would be the best way to accomplish my goal?

  • 3SixtyEvolve

    Hi @nycwebworks

    After checking your site in both Firefox and Chrome (very nice, by the way) and playing around with the settings, I came to the same conclusion as you with regards to the size of the tables and figured that the best way to go about it would be to:

    1st Have a read through the Themeing_MarketPress.txt found in the MarketPress zip folder marketpress\marketpress-includes\themes
    2nd Make a strong cup of coffee before moving on to step 3 :slight_smile:
    3rd Create a custom css file by copying the classic.css and if need be create a Cart/Checkout Page mp_cart.php by checking the /marketpress/marketpress-includes/template-functions.php file.

    Make sure to add the custom theme header with your theme's name at the top of the css file as this will allow your custom theme to show in the dropdown on the Store Settings » Presentation page so it may be selected:

    /*
          MarketPress Style: CUSTOMNAME
          */

    This would be a good starting point. I think you should be able to get it from here. If not, please don't hesitate to be in touch.

    Talk soon again (busy working on some guidance on your 'translation' thread) :slight_smile:

    Gina

  • NYCWW

    Maybe I'm having a bad weekend, but I'm still struggling with this issue.

    The solution you proposed would work if, for example, I were trying to create a custom page without a sidebar to use for the Cart/Checkout page. However, the problem isn't that the sidebar is in the way. The first column in the table (the one displaying the login form) is expanding to fit the form. Removing the sidebar just highlights how unnecessarily wide the column is (see attachment).

    I think I found the section of code I need to modify but I'm not sure how to do it (let alone how to do it in a way that won't be overwritten by each subsequent). I could really use some specifics here:

    //don't show if logged in
      if ( is_user_logged_in() || defined('MP_HIDE_LOGIN_OPTION') ) {
        $content .= '<p class=&quot;mp_cart_direct_checkout&quot;>';
        $content .= '<a class=&quot;mp_cart_direct_checkout_link&quot; href=&quot;'.mp_checkout_step_url('shipping').'&quot;>'.__('Checkout Now &raquo;', 'mp').'</a>';
        $content .= '</p>';
      } else {
        $content .= '<table class=&quot;mp_cart_login&quot;>';
        $content .= '<thead><tr>';
        $content .= '<th class=&quot;mp_cart_login&quot;>'.__('Have a User Account?', 'mp').'</th>';
        $content .= '<th>&nbsp;</th>';
        if ($settings['force_login'])
          $content .= '<th>'.__('Register To Checkout', 'mp').'</th>';
    		else
          $content .= '<th>'.__('Checkout Directly', 'mp').'</th>';
        $content .= '</tr></thead>';
        $content .= '<tbody>';
        $content .= '<tr>';
        $content .= '<td class=&quot;mp_cart_login&quot;>';
        $content .= '<form name=&quot;loginform&quot; id=&quot;loginform&quot; action=&quot;' . wp_login_url() .'&quot; method=&quot;post&quot;>';
        $content .= '<label>'.__('Username', 'mp').'<br />';
        $content .= '<input type=&quot;text&quot; name=&quot;log&quot; id=&quot;user_login&quot; class=&quot;input&quot; value=&quot;&quot; size=&quot;20&quot; /></label>';
        $content .= '<br />';
        $content .= '<label>'.__('Password', 'mp').'<br />';
        $content .= '<input type=&quot;password&quot; name=&quot;pwd&quot; id=&quot;user_pass&quot; class=&quot;input&quot; value=&quot;&quot; size=&quot;20&quot; /></label>';
        $content .= '<br />';
        $content .= '<input type=&quot;submit&quot; name=&quot;wp-submit&quot; id=&quot;mp_login_submit&quot; value=&quot;'.__('Login and Checkout &raquo;', 'mp').'&quot; />';
        $content .= '<input type=&quot;hidden&quot; name=&quot;redirect_to&quot; value=&quot;'.mp_checkout_step_url('shipping').'&quot; />';
        $content .= '</form>';
        $content .= '</td>';
        $content .= '<td class=&quot;mp_cart_or_label&quot;>'.__('or', 'mp').'</td>';
        $content .= '<td class=&quot;mp_cart_checkout&quot;>';
        if ($settings['force_login'])
        	$content .= apply_filters('register', '<a class=&quot;mp_cart_direct_checkout_link&quot; href=&quot;'.site_url('wp-login.php?action=register', 'login').'&quot;>'.__('Register Now To Checkout &raquo;', 'mp').'</a>');
    		else
          $content .= '<a class=&quot;mp_cart_direct_checkout_link&quot; href=&quot;' . mp_checkout_step_url('shipping') . '&quot;>' . __('Checkout Now &raquo;', 'mp') . '</a>';
    		$content .= '</td>';
        $content .= '</tr>';
        $content .= '</tbody>';
        $content .= '</table>';
      }
      if ($echo)
        echo  $content;
      else
        return $content;
    }

  • 3SixtyEvolve

    Hi @nycwebworks

    I'm just heading out of the forums - need to call it a day, it's way past my bedtime, sun nearly out where I am :stuck_out_tongue:

    Let me have a go at it tomorrow again. I will ask for some advice from some of our developers and hopefully we can have this sorted for you in no time.

    So don't think it's a bad weekend. The weekend only started for you and we still have a long way to go before it is done. Hope to make it a good one for you :slight_smile:

    Talk soon.

    Gina

  • Timothy Bowers

    Hey again.

    MarketPress will let you create styles. You could add it there and that will prevent the CSS being overwritten.

    New styles go here:

    /wp-content/marketpress-styles/

    Just create that folder as it won't exist by default.

    As an example MP style aka theme checkout the folder:

    /marketpress/themes/

    Just take one of those theme css files and adapt it to your needs, upload it to the folder mentioned above (with your own name as well). In MarketPress admin:

    Admin --> Products --> Settings

    Presentation Tab.

    Select your new style. This will save you a whole load of hassle in upgrades of the theme and plugin.

    This option changes the built-in css styles for store pages.
    For a custom css style, save your css file with the "MarketPress Style: NAME" header in the "/home/cowpatn/public_html/wp-content/marketpress-styles/" folder and it will appear in this list so you may select it. You can also select "None" and create custom theme templates and css to make your own completely unique store design.

    Or you can add it to your theme. But upgrades of that theme will overwrite it.

    Take care.

  • NYCWW

    Thanks guys! That worked like a charm. @GinaB - You most certainly did!

    One last question (I hope)... I've modified all the buttons to match my theme, but one of the buttons on this form is ignoring my styling (see attachment). Is there any way to change it to use the following styling?:

    a.mp_cart_direct_checkout_link {
    	color:#FFF;
    	line-height:34px;
    	text-decoration:none;
    	text-transform:uppercase;
    	background-color:#8aa43c;
    	background-image:url(http://nycwebworks.com/wp-content/themes/newoffer/images/bg_bigbutton.png);
    	background-position:right center;
    	background-repeat:no-repeat;
    	padding:5px 32px 5px 12px;
    	border:3px solid #FFF;
    	white-space:nowrap;
    
    	-moz-border-radius:20px;
    	-webkit-border-radius:20px;
    	border-radius:20px;
    
    	-moz-box-shadow: 0 0 7px #999;
    	-webkit-box-shadow: 0 0 7px #999;
    	box-shadow: 0 0 7px #999;
    
    	-moz-text-shadow: -1px -1px 0 #798c41;
    	-webkit-text-shadow: -1px -1px 0 #798c41;
    	text-shadow: -1px -1px 0 #798c41;
    
    	margin:0 7px 0 0;
    }
    a.mp_cart_direct_checkout_link:hover {
    background-color:#98b73c;
    	margin:0 0px 0 7px;
    }
    
    a.mp_cart_direct_checkout_link:hover {
    border-color: #ccc;
    }

  • 3SixtyEvolve

    Hi @nycwebworks

    Great feedback on your last post. Glad we got one issue sorted - with the great support of Tim, The Man! :slight_smile:

    Regarding the button that won't change styling. I actually think that styling comes from the standard WP login. Will have to dig around the WP styles to see where you can override that. I'm just heading out for the day, but will look around tomorrow to see if I can find it - that's if you don't find it before me!

    All the best and talk soon.

    Gina

  • Timothy Bowers

    Hey again.

    Try this CSS:

    #mp_login_submit{
        color:#FFF;
        line-height:15px;
        text-decoration:none;
        text-transform:uppercase;
        background-color:#8aa43c;
        background-image:url(http://nycwebworks.com/wp-content/themes/newoffer/images/bg_bigbutton.png);
        background-position:right center;
        background-repeat:no-repeat;
        padding:5px 32px 5px 12px !important;
        border:3px solid #FFF;
        white-space:nowrap;
    
        -moz-border-radius:20px;
        -webkit-border-radius:20px;
        border-radius:20px;
    
        -moz-box-shadow: 0 0 7px #999;
        -webkit-box-shadow: 0 0 7px #999;
        box-shadow: 0 0 7px #999;
    
        -moz-text-shadow: -1px -1px 0 #798c41;
        -webkit-text-shadow: -1px -1px 0 #798c41;
        text-shadow: -1px -1px 0 #798c41;
    
        margin:10px 7px 0 0;
        }

    That should style the button for you. (I've used your styling and it seems some is overridden so I had to use !important :slight_frown: )

    Take care.

  • 3SixtyEvolve

    So glad you got sorted @nycwebworks!

    If you have any other issues that needs sorting out, then Tim here is the man. I'm learning so much from him every day :slight_smile:

    Great to have you as a member and hope to see more of you on the forums!

    Gina

    I will resolve this thread, but please don't hesitate to reopen it if you still require additional feedback from our Support Team. Just select the 'Mark as Not Resolved (re-open)' box below the post area (otherwise we might miss your new post).

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.