Upfront / CSS Changes to Product page

Hi,
Im using Upfront + WooCommerce, i am trying to set up the product page but when i make some changes in upfront it seems not take effect ?
upfront - http://take.ms/RZIMr
tested in firefox - http://take.ms/T4ssv

Changes trying to make
1) - http://take.ms/5xMCp
2) - http://take.ms/RNZCp

Support Access is open until 15th
Domain - http://tinyurl.com/q4uutuk

(apply Changes to all products)

Thanks

Tom

  • Luís

    Hi @Tom,

    I hope had been good today!

    Upfront have some issues with the styling/template right now so it doesn't look great. We are working on that now and hopefully it will be ready asap.

    However to some of your request:

    /* change background color */
    .single-product {
        background-color: rgba(221, 180, 27, 1);
    }
    
    /* change price color */
    .woocommerce div.product p.price, .woocommerce div.product span.price {
        color: #fff;
    }
    
    /* remove breadcrumb */
    .woocommerce-breadcrumb {
        display: none;
    }
    
    /* change image size*/
    .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
        width: 25%;
    }
    
    /* put the description next to the image */
    .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
        float: left;
        margin-left: 21px;
    }
    
    /* remove the sidebar */
    .single-product #sidebar{
        display: none;
    }
    
    /* remove tabs border */
    .woocommerce div.product .woocommerce-tabs ul.tabs::before {
        border: none;
    }

    To remove the additional information tab, please see this link:

    https://docs.woothemes.com/document/editing-product-data-tabs/

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

    Cheers, Luís

  • Luís

    Hi @Tom,

    I hope had been good today!

    I trying to find a way to insert the menu in woocommerce pages and during my tests I was not successful.

    Have you tried our MarketPress plugin? Or you have any reason to not use it?

    https://premium.wpmudev.org/project/e-commerce/

    However, below I send some CSS code for your requests:

    /* center the content */
    .single-product #page #container {
        margin: 0 auto;
        max-width: 1080px;
    }
    
    /* give top spacing */
    .single-product #content {
        margin-top: 140px;
    }
    
    /* give spacing between variations */
    .variations tr {
        display: block;
        padding-top: 10px;
    }
    
    /* move tabs to below the content */
    .woocommerce-tabs {
        clear: none !important;
        float: left;
        margin-left: 20px;
    }

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

    Cheers, Luís

  • Tom

    Hi Luis,

    Thanks very much for that CSS managed to tweek it to suit what i needed, could you also help me out with these changes please - http://take.ms/BorH3

    Also the only reason im using WooCommerce is due to requiring some features which are still missing in the MarketPress plugin
    - Client Side image uploading to attach to order with drag and drop
    - Variation products
    - bulk discounts
    (if those are available with the new version of MP i would love to give that ago) if not is there another way to force the menu to appear on that page? - first time i ran into this issue all other themes i tried out even those not woocommerce compatible still showed the menu ?

    Thanks

    Tom

  • Luís

    Hi @Tom,

    I hope had been good today!

    Firstly, sorry for the late reply and all the problems it may have caused.

    Regarding to the menu, I tried different things and seems that exists a conflict with Woocommerce. I hope those conflicts can be overcome in the next updates of Upfront.

    If you not already tried MarketPress (version 3.0 +) I think you should give an opportunity. MarketPress have product variations, discounts (coupons), I have only one doubt related with the upload image to an order.

    Regarding to the changes you asked, try add this CSS code:

    .product_meta {
    	display:none;
    }
    .label {
    	width: 100px;
    }

    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.