Moving Price and Icon

I've been trying to move the price and the icon over and above the buy now button and I can't make it happen.. suggestions ?? Also the related products is right under the price, is there a way to move that down? I couldn't find that either. http://www.scentswarmers.com/buy/scentsy/coconut-lemongrass-2

    Sajid

    Hello tristajensen,
    Hope you are doing good today

    I noticed that you (or your developer) have customized the product detail page. Because by default price comes up above the content and add-to cart button.

    If yes then could you please share the single-product.php file (or any other file if you are doing it via hooks).

    For the second issue of pushing the related products down, you can add the following code in style.css file of your child theme or from Appearance -> Customize -> Additional CSS.

    div#mp_related_products {
        margin-top: 50px;
    }

    Take care and look forward towards your response

    Best Regards,
    Sajid - WPMU DEV Support

    Ken Kimbrell

    Hello Trista-

    Working alongside Sajid here! I see you have another question regarding your custom CSS. I took a look at your site, and I feel I have come up with a solution to achieve your overall desired result. You have to be careful when making changes like this, I did look over the changes and was not able to see any breaks in the layout with this styling. Please take a look at the custom CSS below:

    .mp_related_products_title {
       position: relative;
       top: 60px;
    }
    
    a.mp_link_buynow {
       position: relative;
       right: 18px;
    }
    
    .mp_grid .mp_product_price:before {
       top: 13px;
    }
    
    .mp_grid .mp_product_price {
       margin: 0 0 0 37px;
    }
    
    .mp_related_products_title {
       position: relative;
       top: 60px;
    }
    
    div.mp_product_meta {
       overflow: visible;
    }
    /*
    *This will create uniformity with the products, so that
    *longer product titles will not break the symmetry of the buy now buttons
    */
    h3.mp_product_name.entry-title{
       line-height: 1.5em;
       height: 3em;       /* height is 2x line-height, so two lines will display */
       overflow: hidden;  /* prevents extra lines from being visible */
    }
    
    div.mp_product_meta span.mp_product_price{
       float: right;
       position: relative;
       top: -24px;
       right: 8px;
       line-height: 20px;
       font-weight: bold;
       font-size: 20px;
    }
    
    .mp_product_meta a.mp_link_buynow {
       right: -124px;
       float: right;
    }
    
    .type-product .kk-star-ratings.rgt {
       margin-bottom: 60px;
    }
    
    /*
    *With the use of media-queries we can change styles based on the current
    *view-port width
    */
    
    @media only screen and (max-device-width:414px){
    
       .mp_product_meta a.mp_link_buynow {
       right: 124px;
       float: right;
       top: -1px;
       }
    
       a.mp_link_buynow {
       position: relative;
       right: 0px;
       top: 10px
       }
    
       .mp_grid .mp_product_price:before {
       top: 13px;
       }
    
       .mp_grid .mp_product_price {
       margin: 0 0 0 20px;
       }
    
    }

    You can decipher whether a user is on a mobile device and style the site differently based on those conditions, with the use of Media Queries

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support