WordPress.org

Forums

E-Commerce Hide Elements on Products Page (11 posts)

  1. brettjo5
    Member
    Posted 2 years ago #

    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

  2. Andrew
    Forum moderator
    Posted 2 years ago #

    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.

  3. brettjo5
    Member
    Posted 2 years ago #

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

  4. Andrew
    Forum moderator
    Posted 2 years ago #

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

  5. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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?

  6. brettjo5
    Member
    Posted 2 years ago #

    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?

  7. WPyogi
    Forum Moderator
    Posted 2 years ago #

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

  8. brettjo5
    Member
    Posted 2 years ago #

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

  9. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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.

  10. brettjo5
    Member
    Posted 2 years ago #

    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;
    }
  11. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Excellent job - glad you got it figured out.

Topic Closed

This topic has been closed to new replies.

About this Topic