MarketPress and Upfront don't work well together

I'm changing my store layout using Upfront. Instead of the default MP products list I've used image boxes and buttons.

However, I'm finding the default individual product pages ugly and I don't have css skills needed to work with them.

I actually quite like the default floating box that goes with the MP products list though.

Is there any way to associate this, either by link or coding, with the Buy Now buttons I have created in Upfront please?

The single product codes work after a fashion but simply display this: https://thedruidsbrew.co.uk/store/products-list/bread-of-heaven/ on the landing page. This isn't even close to being good enough to get customers to buy (...) The only (and I mean the only) thing I liked about the MP products page was when you clicked the product options box you got a floating pop up window appear with an image and dropdown selectors.

There's a need to

  • Paul

    Hi Predrag

    That's very kind thanks.

    That does look better than the default but there are still issues with this- the positioning and size of the description and the unpredictable behaviour of the image cropping for example.

    The landing page has to win trust quickly in a very competitive market with customers who haven't been to the site before. The layout I have created using upfront does exactly this but suffers with the limitations of the shortcodes.

    If there was some way to organise the product list so that it
    1) rendered properly with the image boxes lining up
    2) I can add new products without it losing this formatting

    At least I would have the pop up boxes to help my customers with their purchases.

    I'm happy if you can define the product image dimensions exactly for me.

    I don't want to have to completely ditch MP but I am open to suggestions as to alternatives here as a last measure.

    I have been hoping this recently announced integration with Upfront would mean I could drag and drop or at least tweak within that framework

    I'm sorry Predrag, I don't want to give you guys a hard time and I greatly appreciate your input here. Tweaking the aesthetics of the site is best done over time by me as I develop the site and I actually want to do it, I really do- but even small changes seem to lead to random results- then I get stuck with it just about working.

    All the best
    Paul

  • Predrag Dubajic

    Hi Paul,

    The thing here is that your thumbnails are smaller than the actual holder and the ratio of your image sides is not the one you need.
    What you can do to go around both of these issues is go to Store Settings > Presentation and under Product Page Settings section go to Image Size, change it to Custom and enter 466 for width and 659 for height.

    Once that's done you would need to regenerate your thumbnails so that correct one is created, you can do that with this plugin: https://wordpress.org/plugins/regenerate-thumbnails/

    Then we can add some CSS:

    .mp_single_product-has-image.mp_single_product-image-aligncenter .mp_single_product_images {
        width: 40%;
    }
    
    .mp_single_product-has-image.mp_single_product-image-aligncenter .mp_single_product_details {
        width: 50%;
        padding-left: 35px;
        border-left: 2px solid #9a7729;
        margin-left: 20px;
    }

    And you should end up with product page looking like this:

    Would that look work for you?

    Best regards,
    Predrag

  • Paul

    Hi there.

    This is better than the default behaviour. It's a shame we can't retain the popup buy box without messing up the home page presentation really.

    I've also got some new product images to load up so I'll do that today.

    I've had a dry run with the plugin without the css and I can see what you're trying to achieve here, thanks.

    Can we try this then please? I can see I can edit css in Upfront but I wouldn't know how to do this properly.

    Thanks again
    Paul

  • Dimitris

    Hey there Paul,

    hope you're doing good and don't mind chiming in!

    You should be able to add any custom CSS rules in the Global Theme CSS section, as described in UF docs here:
    https://premium.wpmudev.org/docs/upfront-and-themes/upfront-theme-global-settings/#chapter-3

    Here's a screenshot from a test environment, you can simply add any new rules on the very bottom of the Global Theme CSS area and hit "Save" on the bottom right to update it.

    Let us know if further assistance is required here and we could jump in and make this work for you!
    Take care,
    Dimitris