Grow your CSS skills. Land your dream job.

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

  • # December 20, 2012 at 1:37 pm

    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:


    Price:




    ()

    [code]

    Any advise or suggestions would be greatly appreciated! :)

    Marcy [code]


    Price:




    ()

    Any advise or suggestions would be greatly appreciated! :)

    Marcy [code]

    Any advise or suggestions would be greatly appreciated! :)

    Marcy

    # December 20, 2012 at 1:48 pm

    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 `

    ` 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

    # December 20, 2012 at 1:58 pm

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

    Any other options?

    # December 20, 2012 at 2:18 pm

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

    Does that break the cart? Maybe you already have tried that ;)
    Otherwise, maybe some of the other [methods of hiding](http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/)

    # December 20, 2012 at 2:22 pm

    @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.

    # December 20, 2012 at 2:35 pm

    Magnus: I tried that and nothing happens…

    # December 20, 2012 at 2:52 pm

    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 :)

    # December 20, 2012 at 3:16 pm

    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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".