Title: CSS – Customization
Last modified: August 21, 2016

---

# CSS – Customization

 *  [Angieatc](https://wordpress.org/support/users/angieatc/)
 * (@angieatc)
 * [13 years ago](https://wordpress.org/support/topic/css-customization/)
 * I have a couple of questions regarding this plugin and the customization of it.
 * Where I would find the code (I am not sure what it would be named) to do 2 things(
   using this site as an example [http://babydeluxe.com/](http://babydeluxe.com/)):
 * 1. Have the price on the tab on the product image and not under the product image
   on the shop page but not the individual item page (like the example link)?
 * 2. Have the price on the right and the sale price on the left? (I am assuming
   this is all CSS but want to make sure there isn’t something I need to add. I 
   used the CSS from this site to see I was doing it right but I get this: [http://test1.strosgirldesigns.com/shop/](http://test1.strosgirldesigns.com/shop/)
   for the sale (please ignore the colors, I was using the code from the example
   to make sure I had the correct code).
 * Also, is there a list of the CSS for the customization?
 * [http://wordpress.org/extend/plugins/woocommerce/](http://wordpress.org/extend/plugins/woocommerce/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [mlddev](https://wordpress.org/support/users/mlddev/)
 * (@mlddev)
 * [13 years ago](https://wordpress.org/support/topic/css-customization/#post-3758423)
 * For styling the price overlay banner thingy you can achieve that by editing your
   theme file CSS.
 * The example site is styling the HTML element:
    `<span class="price">` on the 
   category page, and not the `<span class="onsale">`
 * Since the “onsale” is already styled in a manner to hover over products with 
   a set sale price, you will need to decide how you want to deal with that, by 
   either hiding that through CSS, or removing it through your theme functions.php.
 * You can also do 2. with CSS, something like this:
 *     ```
       .woocommerce ul.products li.product .price ins, .woocommerce-page ul.products li.product .price ins {
         background: none repeat scroll 0 0 transparent;
         float: left;
         margin-right: 3px;
       }
       ```
   
 *  Thread Starter [Angieatc](https://wordpress.org/support/users/angieatc/)
 * (@angieatc)
 * [13 years ago](https://wordpress.org/support/topic/css-customization/#post-3758463)
 * I figured it out. Your last bit of code worked. Now I just have to figure out
   why the sale banner/tag goes all the way across on the shop page.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS – Customization’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [Angieatc](https://wordpress.org/support/users/angieatc/)
 * Last activity: [13 years ago](https://wordpress.org/support/topic/css-customization/#post-3758463)
 * Status: not resolved