Product Page customized layout

Screenshots below show the product page for a single item with suggestions (how we'd like it to look), which most of that is fine but the big thing is getting the product description, pricing, add to cart, etc on the SIDE of the image, not below it - additionally, not sure what we did when establishing the MP_PRODUCT.PHP page but now the social media icons do not show up, any thoughts on this?

What access would you need, if any? We appreciate any help on this, we're already behind on launching and would to get this taken care of ASAP - if possible, please don't just point us somewhere and advise "this will help", because so far that hasn't helped! Need some additional assistance on this, we're not PHP experts here but really would like to learn what we're doing instead of just changing a few lines of code.

Additionally, can you answer a couple quick questions in this thread:
1) By adding an MP_PRODUCTS.PHP page, will that override settings in the store settings area of the network admin page, seems not everything is working as it was before, since adding the new page.
2) The documentation here (https://goo.gl/nR6NNc) where it advises To Get Started, can that be provided to new shop owners to help them setup, i.e. by copy/paste into a page for them or can we link ack to that page?

Thank you in advance...

  • John

    OK, here's an update - was able to partially get to the look we're trying to attain (see screenshot), and the PHP & HTML markup in MP_PRODUCT.PHP is as follows (have it set as full-width page, but wondering if I'm missing something so far as why it won't sit alongside the image instead of below to the right??):

    <div class="page-content">

    <section class="single_product_image" style="float:left">
    <?php mp_product_image( true, 'single' );
    ;?>
    </section>
    <div style="clear:left"></div>

    <section class="single_product_info" style="float:right">
    <?php
    the_content();
    mp_product_price(true);
    mp_buy_button(true, 'single' );
    echo mp_category_list($post->ID, '
    <div class="mp_product_categories">' . __( 'Categorized in ', 'mp' ), ', ', '</div>
    ' ); ?>
    </section>
    <div style="clear:right"></div>

    <div style="clear:both"></div>

    <h1> </h1>
    <hr>
    <h1> </h1>

    <h1 style="color:#00CCFF;">Other items you may be interested in...</h1>

    <?php mp_list_products(true, true, 0, 4, 'sales', 'DESC'); ?>

  • Jude

    Hey John

    Hope all is well with you !

    First off I'd like to take a look at the site. Could you enable support access and I can take a look for you ?

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    To answer you questions

    1) By adding an MP_PRODUCTS.PHP page, will that override settings in the store settings area of the network admin page, seems not everything is working as it was before, since adding the new page.

    If you over ride the template on the front end, then some of the presentation / display related settings will stop working

    2) The documentation here (https://goo.gl/nR6NNc) where it advises To Get Started, can that be provided to new shop owners to help them setup, i.e. by copy/paste into a page for them or can we link ack to that page?

    Its best to link to that actual page in this case as it'd be constantly updated as the product improves.

    Here is the exact url you'd want to use

    https://premium.wpmudev.org/project/e-commerce/#product-usage

    Cheers
    Jude

  • John

    Thanks for the followup, Jude. I'll go ahead and grant access immediately, please let me know as soon as you're able too on the issue we're currently requesting assistance on.

    Additionally, if we can just remove the "blog-like" author, date, etc. from the left column and the widget from the right-side using the default product page would be perfectly fine, just seems like that isn't an option unless we're just unable to locate how to do that. Thank you...

  • John

    Jude,
    As previously mentioned time is of the essence and we'd really like to get this marketplace ready for launch by 11/1, and as such have decided to just use the default single product page that comes with Marketpress. We're certain there is CSS that can do the 2 main things we want to do for the default product page - remove the widget sidebar and remove the blog-like info to the left (author name, post date, etc).

    However, after removing the customized mp_products.php page along with a couple others from our child theme folder, and changing back to the default product page in store settings (both the primary site and the Pam's sub-site), we're no longer able to click a product on the homepage (www.frommychildtoyours.com/pams) and have it take us to the product page itself? We've cleared the cache from the last 24 hours, still nothing.

    If you hover over a product image using Chrome it shows the correct link in the bottom left hand corner of the window as it should, but when clicked it simply returns us to the store homepage. I understand you're all very busy and have a lot of questions and issues in the forum, but if you can please advise at your earliest convenience, we're really pressed for time and have been trying to work through issues for a couple weeks now in order to complete our storefront template. Thanks!

  • John

    Jude,
    The primary site is http://www.frommy*******yours.com, the one where I've been "experimenting" in order to have to have a template for all new shop owners is http://www.frommy********yours.com/pams.

    We'd LOVE to have the custom look as seen in the image above: product image to the left, product info to the right along w/social media icons, and then a grid of 4 items below that would be for cross selling - this mockup was done in Photoshop but I'm unable to get that look and information into the custom page of mp_product.php, which is why we changed back to the default page.

  • John

    And as mentioned above, Jude, we seem to be left with no choice but to just use the default single product page that comes with Marketpress, and we're hopeful some CSS can do the 2 main things we want to do for the default product page - remove the widget sidebar and remove the blog-like info to the left (author name, post date, etc).

    However, after removing the customized mp_products.php page along with a couple others from our child theme folder, and changing back to the default product page in store settings (both the primary site and the Pam's sub-site), we're no longer able to click a product on the homepage (www.frommychildtoyours.com/pams) and have it take us to the product page itself? We've cleared the cache from the last week, still nothing.

    If you hover over a product image using Chrome it shows the correct link in the bottom left hand corner of the window as it should, but when clicked it simply returns us to the store homepage. I understand you're all very busy and have a lot of questions and issues in the forum, but if you can please advise at your earliest convenience, we're really pressed for time and have been trying to work through issues for a couple weeks now in order to complete our storefront template. Thanks!

  • John

    Jude,
    I'm not sure that we can enable access to a sub-site separately, shouldn't you have access to that from the network homepage?

    Structure is as follows:
    * Network Admin: This is where WPMUDEV dashboard is installed, and you, Luis, & Panos have all recently accessed the top level admin access from here (and i'm pretty sure Luis, and possibly Panos, have come in via FTP since I provided Luis access for that).

    * Main Site: http://www.frommy********yours.com (NO PRODUCTS will be uploaded here, this is the Marketplace - a hub for products to be displayed for all other stores within the network).

    * Test Site: http://www.frommy********yours.com/PAMS (this is the site that is being designed SOLELY to be used as the template in BLOG TEMPLATES for ALL other seller sites that register - this site is the primary one we'd like to achieve the look and feel on, since doing it here will allow us to replicate that on the main site if we decide too - just attached a screen shot of this plugin page so you can see how it ties in).

    Now, I've granted Luis access to the complete site via request by email (https://goo.gl/CLjt8Q - see this thread for specifics; are you able to get the login information directly from him, it was sent by email several days ago?)

    Additionally, you mentioned the product page template is "broken", what do you mean by that? At one point I had switched back to the DEFAULT setting for the store page and copied the original file back to the plugin AND removed all the customized PHP files from the child theme folder but nothing displayed as it should.

    So now, we've added the customized mp_product.php file back so the actual product page will show up, it was redirecting us to the main shop page before (see this thread: https://goo.gl/RfnrwB).

    I'm really not sure what else needs to be done - ideally, we would LOVE to have a customized mp_product.php page, but if it's not possible then the default page is fine, hopefully CSS tweaks you're referring to will help with that look/feel that we want to achieve (see image above that was created in Photoshop for what we want!)...

  • Jude

    Hey John

    So sorry about the delay here. Im gonna personally take responsibility for this ticket and turn around this experience for you !

    I understand that you felt communication war not up to the mark and this was partly due to the fact we had more than one person looking in simultaneously on multiple threads and in the end it slipped through the gaps.

    That said, Im going to one last time request a set of credentials from you ( The ones you sent Luis do not have super admin access anymore )

    Can you please send in

    Subject: "Attn: Jude "
    - WordPress super admin/ admin username + password
    - FTP credentials (host/username/password)
    - cPanel details

    - link back to this thread for reference

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

    https://premium.wpmudev.org/contact/

    Will make sure your experience is turned around :slight_smile:

    Cheers
    Jude

  • John

    Jude,
    Having different people reviewing for different reasons really shouldn't affect communication, but that's fine & we need to move forward since a week has been lost with no resolution on any of the issues faced. Are you able to assist on this? If so...

    As far as access goes, I've update the access for Luis to Super Admin, so please login again with that and let me know what else you'll need. With that said, we've actually been able to find a shortcode solution and added it to my_product.php that is actually providing the look we've been hoping for but need to make some adjustments, I'm hopeful you can assist on that (please see http://frommyXXXXXXXyours.com/pams/products/camo-with-me/.

    There's a new screenshot attached, and that is how the page is now (it also has some notes of what we'd like to do, and the CSS and PHP that is in use right now is below - it's poorly structured and likely in need of a lot of help, & we're going to move styling to CSS once we have it set). Please advise if you're able to assist, or if we need to have this reassigned or the ticket closed and open a new one. Thanks...

    CSS:

    .mp_single_product_images {
    height: 350px;
    width: 350px;
    }

    .mp_single_product_extra {
    float: left;
    clear: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 30px;
    position: relative;
    display: none;
    }

    div.mp_single_product_details .single_product_info{
    background-color: #ffffff;
    border: 2px solid #ddd;
    padding: 20px;
    }

    PHP (mp_product.php):

    <?php
    /*
    Template Name: MP_Product Page (full width)
    */

    get_header(); ?>

    <h1> </h1>

    <div id="content">
    <div class="page-content">

    <section class="single_product_info">
    <?php
    echo do_shortcode('[mp_product title="1" content="full" image="list" meta="1"]
    ') ; ?>
    </section>
    </div>
    </div>

    <div>
    <h1>  </h1>
    <hr>
    <h1>  </h1>
    <h1 style="color:#00CCFF;">Other items you may be interested in...</h1>
    </div>
    <h1>  </h1>
    <?php mp_list_products(true, true, 0, 4, 'sales', 'DESC'); ?>

    <?php get_footer() ; ?>

  • Jude

    Hi again John

    I logged into the site and found the CSS needed to make these changes. Once again so sorry about the mix up and communication gap.

    Here is the CSS I used so you can replicate in other sites

    .mp_single_product_details {
        background: white;
        border:none;
    }
    
    .mp_product_tab_content_text h3 {
        display: none;
    }
    
    .mp_single_product_extra {
        width: 30%;
        margin-left: 55px;
    }
    
    .mp_product_tab_content_text img {
        display: none;
    }
    
    .mp_single_product_details {
        background: white;
        border:none;
    }
    
    .mp_product_tab_content_text h3 {
        display: none;
    }
    
    .mp_single_product_extra {
        width: 30%;
        margin-left: 55px;
    }
    
    .mp_product_tab_content_text img {
        display: none;
    }

    Hope that helps

    Cheers
    Jude

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.