Customizing WooCommerce Product Pages

I’ve been working on an online store for a business I work for here in SE Asia and trying to find ways to customize WooCommerce to meet my needs. One setting that I don’t care for is the listing to the categories on individual product pages as it was redundant and irrelevant to the product.  There wasn’t much formatting options I could find to remove it, or adjust its location as it seemed to not want to line break right after the SKU.  I didn’t find much searching Google, but found a few forums on WooCommerce site that indicated how to do this.  However, these forums are in the process of being shutdown for whatever reason, so I wanted to make this available to anyone else looking for such a solution.

You need to modify your CSS to disable the elements you want to hide.  Using your web browser page inspector or another tool, you can find the CSS class to control this.  The code you need to insert into your CSS is as follows:

The .posted_in is the element that lists the product category on a product. Using the display:none hides this from the product page.  You can hide this individually on each product, or site wide. You would follow this for other css elements that you want to hide. If you are looking for a great WordPress theme, GeneratePress is pretty amazing and lets you simply modify CSS without having to hack your CSS.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
%d bloggers like this: