Support » Themes and Templates » E-Commerce Hide Elements on Products Page

  • I believe this is a relatively simple question to answer but i am very new to css so I am having a bit of trouble. I would like to hide certain elements on my default products page for my e-commerce website. I would like to hide the product variations element, quantity, price, and cart button. Changing the settings in the store seem to have little effect, so I would like to do it through my style.css file. I understand that it should look something like this for each element:

    .wpsc_display_variation_forms{
        display: none;
    }

    However, this hides the variation form in all of my website, and since I would still like that element to be displayed in my single products page, I need a different solution.

    So my question is, how do I hide these elements on my default products page but not my single products page? Also, for reference, here is the url to the website:
    http://www.pru-dent.com.previewdns.com/?wpsc_product_category=scalers

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Look at the <body> element in the HTML generated by your webpage.
    There should be at least one class that can identify that page and that page only. Use that.

    Ok, sorry for my ignorance but once I find that, what would the css code look like?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try using Google Chrome’s built-in Developer tool for this kind of exploratory CSS work.

    All you do is right click on the page element of your choice and select ‘Inspect element’.

    A toolbar should appear that exposes the HTML structure (on the left) and applied CSS (on the right).

    Actually, that theme does not have any page-id classes in the body tag. To fix that, you’d need to modify your header.php file — which should only be done in a child theme.

    Where did you get that theme from?

    WPyogi:
    I inherited this project from a developer that only half finished the website. I am not sure where he got this from, I assume he built it himself off of some templates he previously made.

    Andrew:
    Yes I was using the google chrome developer tool, what I mean is once I find the class that could only be on this page, how do I change the style.css?

    Right now I know that my default products page is referenced like this “wpsc_default_product_list”. So how do I format the code to do this:

    .wpsc_display_variation_forms{
        display: none;
    }

    but only in the wpsc_default_product_list?

    That’s what I replied to — your theme does not have a page specific id or class – at least not that I can see.

    Oh ok sorry about that! What do I need to add to my header.php to specify a page ID?

    You can try replacing the body tag with this:

    <body <?php body_class(); ?>>

    but it may or may not work as I don’t know how your theme is coded or set up. Generally these forums only support themes that are included in the repository here: http://wordpress.org/extend/themes/

    so you may need to hire someone to help you with this kind of work.

    Thanks for the help everyone. I was able to get the desired results but throwing this into my style.css file.

    .default_product_display form.product_form{
    	display: none;
    }

    Excellent job – glad you got it figured out.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘E-Commerce Hide Elements on Products Page’ is closed to new replies.