Can you help with an unexpected MarketPress formatting problem

Hi. I am in the process of redesigning my website and am testing out some ideas offline (MAMP) using the FrameMarket theme and the MarketPress plugin.

I am having a problem with MarketPress formatting. No matter which store style I choose (e.g. Icons, Modern, Classic), the product layout/formatting unexpectedly changes when I select any of the screen options from the “Ordered By” drop down box.

Here is some more specific details…

- On my home page I have used the shortcode [mp_products_link link_text="Browse & Shop Now"] to link to my products page.

- When I click on the "Browse & Shop Now" link (created above), my products page opens with four columns of products across the page. However, despite having “Order Products By” set to “Product Name” (on the Presentations tab of the Store Settings page), the products page opens to an Order by “Default” setting.

- When I change the selection in the “Ordered By” drop down box from “Default” to “Name” (or any other options) the products do reorder correctly, but the page formatting changes from four columns to three columns and other features such as borders disappear.

I am not overly technical and hope I haven’t messed up anything in my attempts to tweak the settings. Any idea of what is wrong (and how to fix it)?

Thanks in advance
Regards
irwin

  • Michelle Shull

    Hey there, irwin! Happy Saturday!

    Normally, I'd ask for support access, but I'm not sure that will work with you on a localhost. So I copied your settings on my own site.

    Issue #1 - product page opens with four columns, with "default" as the sort method.

    - I get three columns on the product page, with a sidebar. Can you grab me a screenshot of what you see?

    - "Default" is actually what you're supposed to see there. You set the "default" as "product name."

    Issue #2 - Changing display order changes layout of page.

    - Here again, can you grab a screenshot of the layout you see after you change the order?

    General questions:
    Have you done any custom CSS styling to your store pages/the Framemarket theme, or are you using the default settings?

    Do you have any other plugins installed, or is it just MarketPress?

    Thanks! We'll get you sorted out!

  • Mapleseed Gallery

    Hi Michelle

    Thanks for the fast Saturday reply... it was very much appreciated :slight_smile:

    [1] Screen shot 01 (attached) shows the four column view that results after the "Browse & Shop Now" link is selected from the home page.

    [2] Screen shot 02 (attached) shows how the borders disappear and the columns change to three wide after the sort order is changed to by "Name".

    [3] I have done some minor css customization in the "custom.css" file in the child theme.

    [4] I have installed several other plugins. These include: Ads by datafeedr, Akismet, Category Posts Widget, Custom Meta Widget, Disable Comments, Duplicate Post, List category posts, MarketPress, MP Custom Shipping Form, Shareaholic, Subscribe by Email, Ultimate Branding, and WPMU DEV Dashboard.

    Thanks again.
    is

  • Mapleseed Gallery

    Hi. I have continued to try to resolve the formatting issue but am having no luck.

    At first I thought that I might have inadvertently messed up something when I made some minor css edits. Fortunately, all but 4 of the changes I made were done in the child theme's custom.css file. Since I had kept details of these 4 changes, it was easy to back them out and put things back to their original state. The other edits were all done in the custom.css file so it was easy to put them back to their original state too. Unfortunately neither of these worked which leads me to suspect the the problem might not be associated with any css changes I made

    As mentioned in my previous post, I had also downloaded a few plugins, but have since deactivated each of them to see if one might be causing a conflict with the MarketPress plugin. No luck… this didn’t work either.

    Just in case it is helpful, I did notice that when I select [mp_products_link link_text="Browse & Shop Now"] it takes me to http://localhost:8888/shop/products/ which is represented by image sMills-ScrnShot_01.jpg (above). When I reset the sort order it takes me to http://localhost:8888/shop/products/#product_category=-1&order=title-asc&page=undefined which is represented in sMills-ScrnShot_02.jpg (above).

    Not sure if this additional info helps and hope you can assist me in solving the formatting issue. Thanks again.

    Regards
    irwin

  • Mapleseed Gallery

    Hi again. Seriously… can anyone out there help me?

    I realize that it is a busy time of the year, but I am feeling a little left out in the cold. I received an initial response (with some great questions) to my initial post almost a week ago (and I replied) but I haven’t heard anything since. I would like to get my new site finished so that it can go live the first week in January, but if I can’t get the estore running properly it is a bit of a show stopper.

    I have tried everything I can think of at this end, but nothing seems to work. My actual web redesign was done locally on my MAC (MAMP) so I can’t provide a direct link, and perhaps the screen shots and earlier descriptions didn’t fully illustrate the problem. With this in mind and so that you can actually see the problem(s) first hand, I have since created a new Wordpress installation in a live sub-domain, and have recreated the problem. To keep this example clean and uncontaminated by other code changes, this stripped down dummy version of my site was done from scratch with NO additional plugins added and NO css changes. Everything was freshly downloaded and installed with nothing copied over from my existing site. For the recreation I simply installed a new version of Wordpress with the FrameMarket Theme (using the GridMarket Child-Theme), and Marketpress (and added some Lorem Ispum filler text and placeholder product images)… and the same problem was recreated along with the Framemarket/Marketpress test site.

    Here is the link: If you go to http://smills-redesign.isbiz.ca/wp/ you should land on the “Shop Spicemills.ca Online” page. Mid-way down the page, just under the Lorem ipsum filler text you will see the link “Click here to shop Spicemills.ca Online”. This will take you to my products page.

    Sorry if I am repeating what I already said in my earlier post, but maybe I should clarify and add more detailed findings…

    Please note that the "Our Products" page opens with 4 columns across the page instead of the expected 3 columns. Also, despite setting up “Product Name” as the default in the “Order Products By” dropdown during the store set up, this page still sorts in order of most recent input first.

    At this point other than 4 instead of 3 columns, everything looks properly formatted on the “Our Products” page (http://smills-redesign.isbiz.ca/wp/store/products/) however, if you change the sort order (e.g. select name from the “Order by” drop down box), you will notice 5 unexpected formatting changes… [1] The number of columns change from 4 to 3. [2] The Product name moves from above the product image to below the product image. [3] The pricing line changes from price only to price with icon. [4] The border around each product disappears. [5] The “more info” link disappears.

    One more thing I’ve noticed too… During store set up I selected “center” under “Product Image Alignment”, but the image still aligns left on the individual product pages (e.g. http://smills-redesign.isbiz.ca/wp/store/products/test-product-c3/).

    Whew.. sorry about the long winded post, but I am getting a little frustrated and want to make sure I clearly cover the issues (and hope someone out there can assist).

    Please advise - thanks.

  • Tyler Postle

    Hey Spicemills,

    Hope you're doing well today and thanks for the explanations here! Sorry for the delay.

    Also, despite setting up “Product Name” as the default in the “Order Products By” dropdown during the store set up, this page still sorts in order of most recent input first.

    It looks like your most recent order also happens to be your product name descending order as they are in order by product name in a descending fashion :slight_smile: if you change it to ascending it should make the order swap.

    At this point other than 4 instead of 3 columns, everything looks properly formatted on the “Our Products” page (http://smills-redesign.isbiz.ca/wp/store/products/) however, if you change the sort order (e.g. select name from the “Order by” drop down box), you will notice 5 unexpected formatting changes… [1] The number of columns change from 4 to 3. [2] The Product name moves from above the product image to below the product image. [3] The pricing line changes from price only to price with icon. [4] The border around each product disappears. [5] The “more info” link disappears.

    I was able to replicate this as well, there looks to be some CSS issues happening here. I've reported this to the developer so it can be looked into asap and sorted out :slight_smile:

    One more thing I’ve noticed too… During store set up I selected “center” under “Product Image Alignment”, but the image still aligns left on the individual product pages (e.g. http://smills-redesign.isbiz.ca/wp/store/products/test-product-c3/).

    This is another CSS issue, you can resolve this by adding the following CSS to your custom stylesheet:

    .aligncenter, img.aligncenter {
    margin-left: auto !important;
    }

    Normally we wouldn't use the "!important" declaration but sometimes it can be a necessary evil to overwrite existing styles.

    Hope this helps Spicemills! and thanks for your thorough explanations. Once the CSS issues get sorted out either myself or the developer will post back here.

    All the best,
    Tyler

  • Mapleseed Gallery

    Hi. Thanks for getting back to me with this fix.

    The good news is that it appears to have worked and the formatting now seems consistent regardless of the sort order. I still have some testing to do and will provide further confirmation in the next couple of days. Thanks.

    The bad news is that when I installed version 1.6.2 of framemarket, it overwrote all my theme customizations (e.g., colours, menu, header image, backgrounds, etc). Should I have done something to protect these changes? (or put another way... is there anything I can do to prevent loosing these changes when uploading future updates?)

  • Mapleseed Gallery

    OK... Please disregard my previous comments (Sun Dec 28 @ 3:55pm)... I have done a little more testing and can provide some more detailed comments since installing the newest version:

    I updated Framemarket to version 1.6.2 and set the "Use gridmarket style when filter by "Order By"?" to "Yes" as instructed. I then chose the child "Gridmarket" theme for my site.

    If you go to my test site at http://smills-redesign.isbiz.ca/wp/ and select the "Click here to shop Spicemills.ca Online" link in the centre of the home page, you will go to my main product page (http://smills-redesign.isbiz.ca/wp/store/products/). You will notice that:

    • there are still 4 columns of products across the page instead of 3.

    • the product titles are not shown at all (which should be).

    If you change the sort order (eg. select anything in the "Order By" drop down):

    • the product title suddenly appears above the product image (where it should be).

    • the word "Price" appears before the $ amount below the image (where it should be).

    • the "more info" link disappears (which shouldn't happen).

    Any ideas?

  • Predrag Dubajic

    Hey @spicemills,

    Hope you're doing well today.

    I have tested this on my side with the same settings and could see some of the issues you mentioned, so here is something you can do to fix them.

    You can add this CSS code in to make your products sort in 3 columns and show the titles again:

    #container #content #mp_product_list .product {
    	width: 208px;
    }
    
    #mp_product_list .mp_product_name {
    	position: relative;
    }

    The products will now be in three columns but there will still be issues with sorting them in rows. So what you need to do is access your theme files via FTP and open framemarket/library/functions/marketpress.php file and on lines 116 and 143 you should be able to see this code:
    if (($counter%4 == 0))
    Now just change the counter value from 4 to 3 and save the changes.

    I also can see that the more info link is showing normally now, ware you able to fix this?

    Best regards,
    Predrag

  • Hoang Ngo

    Hi there,

    I hope you are well today and I'm sorry for the issue.

    Please use this css, it will fix the column & title.

    .mp_product{
        width: 28% !important;
        box-sizing: border-box;
        position: relative;
    }
    .mp_product_name{
        position: relative !important;
    }

    • the "more info" link disappears (incorrect).

    The "more info" link only display when your product's description is too long. Also, please use the List View in Settings -> Presentation ->Product List View, as this html support product title above the image.

    If that still not working, please send me a link here, so I can check your styles position.

    Best regards,
    Hoang Ngo

    • Mapleseed Gallery

      Hi Hoang

      Thanks for the info. I made the changes you suggested and everything worked almost perfectly. There was however a new resulting (or coincidental) row issue but when I added one of Predrag's earlier ideas back in (see below), everything sees to work great. I still need to do some testing, but am feeling pretty good about the fix. I will let you know for sure once I finish testing (in the next couple of days). Your assistance was very much appreciated... THANKS !

      One more question... As I noted above, I added back in Predrag's edits to the "framemarket/library/functions/marketpress.php" file as per his post above (see post Mon Dec 29 2014, 5:31:54 AM). This solved the new row issue, but I am worried that changes to the "marketpress.php" file might get overridden down the road if any updates are made to the theme. Any suggestions?

      Thanks again and have a very safe and happy New Year's Eve!!
      Regards
      irwin

  • Hoang Ngo

    Hi @spicemills,

    I hope you are well today.

    I checked the code, for now we don't have any hooks or filters there, so we will need to change the core code.

    But instead of using the php code, with this situation, we can always using css for layout the grid. Example, if each column has the width 32%, that's mean only room for 3 column for each row. But the value 32% can changes to 28% or similar because they have the padding itself.

    Also, I saw that you have applied the css for dynamic width, for now can you please revert changes of framemarket/library/functions/marketpress.php, so we can test?

    Happy New Year's Eve!! :smiley:

    Best regards,
    Hoang Ngo

    • Mapleseed Gallery

      Good morning Hoang.

      Thanks again for your help on this :slight_smile:

      As suggested, I have changed the "framemarket/library/functions/marketpress.php" file back to its original settings.

      You can now see that the main products page (http://smills-redesign.isbiz.ca/wp/store/products/) loads with my sample 12 products displayed correctly across 3 columns, but awkwardly displayed in alternating rows of 3...1...3...1 etc. (When I apply the marketpress.php edits, the row issue corrects itself.)

      Shall I wait for the forthcoming core code changes, or should I attempt to move forward with my site launch using the various temporary patches? (If the core code changes are anticipated in the short term, I'd much rather delay my site launch and wait for perfect code.) Please let me know what you think. Thanks.

      Take care
      irwin

  • Hoang Ngo

    Hi @spicemills,

    I hope you are well today.

    Please correct me if I'm wrong, for now, I see all the changes you made is relate to the css files?. If so, I suggest you to create a small plugin and simple plugin, which only use to load custom css.

    After you move all the custom css out of the theme & plugin folder, you safely to upgrade in the future.

    Also, you are welcome to post the custom css here, so I can make a small plugin (I said above) for you :slight_smile:

    Best regards,
    Hoang Ngo

  • Mapleseed Gallery

    Thank you to everyone for all your assistance. I am just about ready to go live with my new site (www.spicemills.ca) and have incorporated many of the suggestions made. Thanks!

    A couple more questions before I finish . . .

    [1] Ok this is a weird one… I was using Simple Custom CSS (3.2) along with Wordpress (4.1–en_CA) and the Gridmarket (Framemarket) theme locally (MAMP) while I was in development. Now that I have migrated to a live server environment, the Simple Custom CSS plugin no longer seems to work. Any ideas wha’s going on? I’d prefer to us Simple Custom CSS (because… well… it is “simple”), but as an alternative, if I make the CSS changes in the Custom.CSS file that came with the Gridmarket theme (themes/gridmarket/css/custom.css), will these be overwritten if/when the theme is updated?

    [2] I am not sure what happened to cause this next issue. Everything was working fine until a few minutes ago, but now when I select Customize (under Appearance in the WP dashboard), I get the following error message: “Fatal error: Allowed memory size of 41943040 bytes exhausted (tried to allocate 303795 bytes) in /home/maplesee/public_html/spicemills.ca/wp-includes/functions.php on line 288”. I have no idea what this means or how to fix it (and incidentally, line 288 reads “line 288 reads “$data = trim( $data );”).

    Thanks in advance for any help.

    Regards
    irwin

  • Michelle Shull

    Hi spicemills!

    1. There are a few simple CSS plugins out there, it may be worth trying a different plugin, but I think there may be a pathing issue. Since you set up this environment on localhost, your CSS plugin was overwriting a file that started with your localhost URL, rather than your final URL. Try copying all your custom CSS, then de-activate, delete, and reinstall the simple CSS plugin, then paste all your changes in. This should give it the kick it needs.

    2. This is a memory issue. There are a few things we can try, but the first will be to either add the following line to your wp-config.php file:

    define(’WP_MEMORY_LIMIT’, ’128M’);

    There's a chance there's already a line defining your memory in your config file, so make sure to scan through to make sure WP_MEMORY_LIMIT has not already been defined. If it has, just change the limit to 128M, as above.

    If that doesn't work, you may need to check your php.ini file, which will be in the root of your server. Some hosts will prevent you from editing this file, if that's the case, it will be hidden, and you'll need to ask your host to increase the limit.

    Thanks, irwin!

  • Mapleseed Gallery

    Greetings again

    I am reopening this ticket as I have just noticed another formatting issue directly related to some of the above issues. Sorry I didn’t notice it before and will include some screen shots and a description here.

    [1] From http://www.spicemills.ca (Shop Spicemills.ca landing page), click the “Shop Online” banner in the middle of the page. This will take you to our store page (http://spicemills.ca/store/products/).

    [2] Notice that the first row of three items is evenly spaced, but the second row is not. In the second row, the first and second items are squeezed together which creates a misalignment in the columns. See image (smills01.jpg) attached. This issue reoccurs in the sixth row as well, and I assume would continue to reoccur if I added more products (and thus more rows).

    [3] Now here is where it gets really strange… If I change the sort order by selecting Default, Name, or Price (Low to High)… the formatting issue corrects itself and all rows and columns are correctly aligned. If however, I change the sort order by selecting Release Date, Price (High to Low) or Popularity, the formatting goes strange again, with different results for different selections. For example… if I order by Release Date, the fourth row gets messed up… if I order by Price (Hight to Low), the sixth row gets messed up… if I order by Popularity, the fifth row gets messed up. See image smills02.jpg attached.

    I hope someone out there can help me to nix these gremlins.

    Regards
    irwin

  • aristath

    Hello again @spicemills, I hope you're well today!

    To fix the alignment issue, please add this CSS:

    #mp_product_list .last-product {
      margin-right: 10px;
    }

    When you select to order by release date, the last product on the 3rd row is sold-out, and the sold-out button does not have the same height as the purchase button on your theme which is what's causing the messed-up layout there.
    To fix that you'll have to add this CSS:

    form.mp_buy_form .mp_no_stock {
      padding: 8px;
    }

    I hope that helps!

    Cheers,
    Ari.

  • Mapleseed Gallery

    Hi Ash. You are brilliant! Thanks!

    Just one more question and I think we may have nailed it.

    Under another topic, Vinod helped me with some edits to change the button text from "Out of Stock" to "Sold" when items are purchased. (see topic at https://premium.wpmudev.org/forums/topic/help-with-a-couple-of-minor-formatting-issues#post-804363)

    However, the “Add To Cart” and “Sold” buttons are now different sizes. Is there a way to set the button height and width the same for both? Also, there now seems to be a reddish border around the “Sold” button and I am not sure where this came from (but would prefer to get rid of it)?

    Thanks again :slight_smile:
    irwin

  • Mapleseed Gallery

    Hi Ari. I have looked at the page using both my Mac and my iPad, cleared my cache, tried a hard refresh, and tried using different browsers... unfortunately I still see the row issue.

    I have attached a couple of screen shots.

    The first one is my main products page (http://spicemills.ca/store/products/) and it opens as it should with nicely displayed rows and columns. (Although it is a secondary issue at this point... I'd still like to find a way to get the "Sold" and "Add to Cart" buttons to be the same width and height.)

    The second screen shot show what I see when I change the sort order. In the example I chose to order by "Price Low to High". (http://spicemills.ca/store/products/#product_category=-1&order=price-asc&page=undefined)

    This is weird isn't it??

    Regards
    irwin

  • Ash

    Hello @spicemills

    Please check both issues. Used code:

    #content #mp_product_list .product{
      height: 370px !important;
      overflow: hidden !important;
    }
    
    .mp_product_meta form.mp_buy_form .mp_no_stock{
    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;
    color: #333;
    -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/Pgo8c3ZnIHhtbG5zPSJod…IwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
    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%);
    display: inline-block;
    font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
    line-height: 18px;
    text-shadow: 0 1px 0 #fff;
    text-decoration: none;
    padding: 8px 20px;
    font-size: 0.9em;
    width: 112px;
    box-sizing: border-box;
    text-align: center;
    }

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.