treehouse : what would you like to learn today?
Web Design Web Development iOS Development

New to css coding and need help with hiding attribute text on my website

  • Hello, I'm new to css coding and I have a question about hiding attribute text on my ecommerce website's product detail pages (I use a Homestead.com template). My dilemma is that some of my products have multiple attributes which will show up text and prices under the product title, thus creating a very messy looking page for my products. I would like to find a way to hide this text without corrupting the attribute's cart "update" function when they choose an attribute. Here is a link to one of my products to get a better idea of my concern:

    http://stores.homestead.com/springcreekrusticoutfitters/-strse-57/Western-Cabin-Lodge-Dakota/Detail.bok

    Homestead will not help unless you pay them to design or change the template (understandable... to an extent), but I cannot afford to pay them at this time. So....I'm forced to try and figure it out for myself.

    They did tell me where the code was located, but would not tell me what or how to change it. Here is the code they suggested I figure out a way to change:

    [code]

    <

    div style="border:1px solid #cccccc; width:250px; padding:10px; margin:2px 0px 2px 0px"> Price: <ss:else/>

            <ss:foreach item="promotion" within="$product.activePromotions">
                      <ss:set name="detailText" value="$product.promotionDetailText($promotion)"/>
                      <ss:if test="$detailText != null">
                        (<ss:value source="$detailText"/>)
                      </ss:if>
            </ss:foreach>
    
            <ss:if test="$product.attributes">
              <div style="margin-top:5px">
                      <ss:include macro="AttributeDetailFull"/>
              </div>  [code]
    

    Any advise or suggestions would be greatly appreciated! :)

    Marcy

  • Marcy, do you mean the price breakdown on the product details?

    $315.95 California King, 14" Bedskirt Drop (included) 5 in stock $333.95 California King, 18" drop bedskirt 5 in stock $340.95 California King, 21" drop bedskirt 5 in stock $253.95 Full, 14" Bedskirt Drop (included) 5 in stock

    If that's the case, then in your code you posted, the div that has <div style="margin-top: 5px"> you could swap out that margin-top:5px to display: none

    I'd say that's the easiest fix..but by no means the best

  • Thanks so much for your help! Yes, that would be correct. I tried that but it is still there:

            <ss:if test="$product.attributes">
              <div style="display: none">
                      <ss:include macro="AttributeDetailFull"/>
              </div>
    

    Any other options?

  • Marcey, just a wild guess: what happens if you remove (or comment out) the line

      <ss:include macro="AttributeDetailFull"/>
    

    Does that break the cart? Maybe you already have tried that ;) Otherwise, maybe some of the other methods of hiding

  • @magnus_vb had my next suggestion of completely removing the div, but I'm not sure if that will effect your cart. My other suggestion would be to make sure there's no "Publish my Changes" option, as I don't see any changes to the site at all. I have some experience with Homestead's sitebuilder software..unfortunately not so much with their ecommerce templates.

  • Magnus: I tried that and nothing happens...

  • ChrisP: I'm a little confused as to what you mean by "make sure there's no publish my changes option as I don't see any changes to the site at all.". There is an option for that, but I never publish anything until I know it's going to work. I usually hit "save" and then "preview" to view the changes. If they aren't correct I can simply click on "undo".

    I've also looked in the Stylesheet Base css template but can't find anything there that has anything to do with the attributes functions.

    Any other suggestions? And thanks again for all the help :)

  • Marcy,

    It won't be in any css file as it doesn't have a class, it's just styled with that inline-style of margin-top: 5px

    Here's what I would do (if I were in your shoes):

    1) Try publishing it and see what happens, it's 1 inline style, and can easily be published back to it's original state no problem, if it makes you feel more comfortable, copy your code before deleting it, then you can just paste it back if something goes awry. As I remember, Homestead's preview function was extremely buggy on SiteBuilder, not sure about the ecommerce.

    2) Clear your browser cache and refresh, maybe there's a cached version being displayed instead of the newest version of the page.

    3) Contact Homestead tech support and ask them why your changes aren't taking place. It becomes an issue of their template not making your changes, and not an issue of "how do I remove a function?" which is why they can't give you support.

    Edit: Just to clarify, I'd just publish trying one of the inline styles suggested by @magnus_vb or myself, I wouldn't try publishing the removal of the whole div