Changing format of Marketpress products and product lists

The typography of the standard Marketpress pages doesn't fit with our theme as text is too large and layout not as we wish. Really, if we could change the font size we'd probably be happy. I've been exploring all the Store Settings options, and then reading about Theming and using custom css. I fear I may be creating something overly complex and prone to failure, for something that may be simple if done right.

These are what I've been looking at:
https://premium.wpmudev.org/blog/the-easy-guide-to-theming-marketpress/ and https://premium.wpmudev.org/forums/topic/marketpress-custom-css-file-not-working

I've set up a custom style sheet in the folder /marketpress-styles/, copied the file plugins/marketpress/ui/themes/default.css, changed the header, and then been able to select it from the Store Settings - presentations.

My problem is that I'm not now clear what setting I need to change to change font size for the product title and extract. Trial and error has not helped. I've then begun to consider that what was needed was to follow the next set of instructions to duplicate the page.php and content-page.php in my theme. I can see these are having a significant effect but seem to have taken me many steps back from where I want to be. I'm also concerned that I'll need to set up a child theme to avoid losing changes in future.

What's the simplest way to reduce the size of the text in the product listing single page and listing? It would be great if these were configurable from the settings page as with other basic settings.

  • Luís

    Hi Eric Booth ,

    Hope you're doing well today!

    In my opinion, you did the right procedure to add your custom styles to MarketPress:

    1) Creating a "marketpress-styles" folder under "wp-content";

    2) Creating a css file with the "/* MarketPress Style: Your CSS Theme Name Here */" line;

    3) In Store Settings -> Presentation, selecting your CSS file in the "Store Style" section.

    However, after this procedure, it will not be displayed any settings to change the font size, this needs to be done via CSS, adding the codes to the CSS file created.

    As an example, to change the product title, you can use this code:

    .mp_product .mp_product_name {
        font-size: 18px;
    }

    Or to change the product description:

    .mp_product .mp_product_excerpt{
    	font-size: 12px;
    }

    These styles will override the default ones. If you are having doubts/difficulties in find some class/ID of the MarketPress elements, can you give us more informations about the font size and which elements you want to change, so I can give you some solutions?

    If you don't know, there are some usefull tools in the browsers so we can check the HTML and CSS, that can help us to find the class/ID of the elements, as an example:

    Chrome

    https://developer.chrome.com/devtools

    Firefox

    https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Eric Booth

    Thanks Luis, this is helpful (particularly the reminder about the developer tools in browsers), but I'm not there yet. I've now things set up according to instructions above. We have the duplicated and renamed the pairs of files to determine the product and the product list layout in the theme folder:
    - page.php --> mp_product.php
    - page.php --> mp_productlist.php
    - content-page.php --> content-product.php
    - content-page.php --> content-productlist.php
    These successfully control what appears on the product and product list page. Is there a list somewhere of the elements that can be called?

    There was a problem with the stylesheet created in steps 1-3 above is not being picked up. It appears that the url for the css has "?ver=3.1.2" added on and changes are applied. Not sure what it took to change this but after much flushing of caches, reloading, and trying different browsers and different machines, it does now seem to picking up the changes.

    Thanks!

  • Luís

    Hi Eric Booth ,

    Hope you're doing well today!

    If you want to do just small changes in the CSS, like typography, you don't need to create the page templates (mp_product.php, etc).

    Theming MarketPress is just if you want to do big changes, especially in the markup structure (HTML) and this can be a much complex task.

    Unfortunately, we don't have a list of the elements that can be called, the best option should be give a look in "wp-content/plugins/marketpress/includes/common/template-functions.php", it's fully documented and you can check the functions used.

    There was a problem with the stylesheet created in steps 1-3 above is not being picked up. It appears that the url for the css has "?ver=3.1.2" added on and changes are applied.

    I was able to replicate the issue, MarketPress add this to url (?ver=3.1.2), I think this is done by MarketPress when" enqueue" the new style.

    However, the new styles should be applied, maybe you had a cache issue.

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.