The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Sidecart - Price display

mnmmnm Member
in Help edited November 2014
Hello,
How can I fix the display of the price in cart?
24eqd1f.jpg
Comments
  • fc_adamfc_adam FoxyCart Team
    @mnm,

    Happy to help - could you clarify how you're wanting to display it instead?
  • Hi @fc_adam
    The price is broken in two lines. I want it to display in one line "Php 4,584.00"
    like this
    2gvowb7.jpg
    (sorry for the bad english..haha)
  • fc_adamfc_adam FoxyCart Team
    Ah sorry - thanks for clarifying. I'm not sure why I didn't pick that up from your initial screenshot.

    So the issue you're running into there is simply that the price value doesn't have enough horizontal space so it's running onto a new line.

    One way to fix it would be to apply some custom styling to widen the area given to the price value and the product attributes less, or you could go a step further and adjust the styling to make the price and the attributes full width.

    You can specify custom styling through the 'inject custom code' and add a style block to the header of your templates.
  • @fc_adam

    Sorry, i'm not sure how to do that. how can i adjust to make the price and attributes full width?
    and by this 'inject custom code' do you mean the "Inject custom content into your templates" in Foxycart configuration?

    Thank you
  • fc_adamfc_adam FoxyCart Team
    @mnm,

    That is indeed the configuration option I was referring to.

    In terms of how you would achieve it - how familiar are you with CSS? You'd utilise CSS to alter the styling of the template to look how you want. For example, looking at the HTML for the sidecart section, the following code would make the attributes and the quantity columns full width:
    <style>
    #fc #fc-cart--fixed-width .fc-cart__item__details-and-image,
    #fc #fc-cart--fixed-width .fc-cart__item__details {
    width:100%;
    }
    </style>
    
  • mnmmnm Member
    edited November 2014
    @fc_adam,
    a bit familiar. what's the attributes for the price columns?
    given the code above the description went full width making the price go down under the image.
    how can I align the image, description and price in one line tho?

  • fc_adamfc_adam FoxyCart Team
    @mnm,

    Your best bet for seeing the different classes that are applied to the markup is to use a browser inspection tool to view the raw markup. For example, in Chrome you can activate that by right clicking on an element and selecting "inspect element". That will open the developer tools and highlight to that element. That way you can navigate the code and see the different classes applied. You should also be able to see the styles applied to a given element that you have highlighted as well.

    When you say in one line, do you mean having them all aligned to the left or the right? If so, you'd just need to apply some additional styles to force that.
  • @fc_adam

    Thank you. I was able to fix it ( i guess) :-)
Sign In or Register to comment.