Return to previous page

Single Product Page – Sale vs Original Price

This topic has 12 replies, 5 voices, and was last updated 8 years, 2 months ago ago by Robert Hall

michaelcp23

Participant

August 5, 2016 at 20:52
I’m trying to adjust the spacing between the sale price and the original price, the gap between the two is too large (see attachment). I was originally given this code (see below):
```
/* Sale Price */
.price del {
   display: none;
}
.product-information .price del {
    float: right;
    margin-right: 80%;
    margin-top: -10px;
}
.product-information .price del {
   display: block;
}
```
I was wondering if I could do the following:
1. Reduce gap between price & sale price (see attachment)
2. Change the color of Sale Price to be red and the original price to be light grey.

Thank you,
Michael Parra
#135823 Copied
11 Answers
Muhammad Zaki

Support staff

August 6, 2016 at 09:22
Hello,

Thanks for using our theme.

Please, see the screen: http://prntscr.com/c29nec
and remove the mentioned lines there

and add this one:
```
.price del{
 color: #dc1d10;
}
```
Regards
#135835 Copied
michaelcp23

Participant

August 17, 2016 at 02:04
This has made it look a lot better then before, however I would like the sale price color to be red, and the original price to be grey. Basically flip-flopped.

Currently the site does not look like that
https://www.6ku.com/product/6ku-coaster-brake-city-bike/?attribute_color=Regular&attribute_size=Harding%20-%20Matte%20Black

Here is the code I am using:
```
/* Sale Price */
.price del {
    color: #dc1d10;
   /*display: none;*/
}
.product-information .price del {
    /*float: right;
    margin-right: 80%;*/
    margin-top: -10px;
}
.product-information .price del {
   display: block;
}
```
Also is it possible to hide the original price in woocommerce grid layout (see image below). But I still want to leave the original price on the individual product page.

Thank you,
Michael
#136883 Copied
Jack Richardson

Support staff

August 17, 2016 at 08:47
Hello,

Please use this css code:
```
.product-information .price ins {
   color: red;
}
.product-information .price del {
   color: grey;
}
```
```
.price del {
  display: none !important;
}
```
Best regards,
Jack Richardson.
#136911 Copied
michaelcp23

Participant

August 18, 2016 at 02:20
Okay so I entered all that into my custom.css file, and for whatever reason, I still do not see the changes on the site. I cleared the cache, refreshed, tried a different browser. Still no luck.

So here is all the code on my custom.css file, perhaps some other code in conflicting or I have it coded incorrectly. I don’t know.
```
/* Single Product Page */
.price, .amount {
  font-family: "Helvetica", sans-serif;
}
.product-image-wrapper:hover .footer-product{
display:none;
}
.install-menu-info {
   display: none;
}
.jck-wt-wishlist-buttons{
    display:none;
}
.menu-social-icons {
    padding-top: 10px;
}

.product-information .size_guide {
  font-weight: bold;
}
/* --------------------------------- */

/* Sale Price */
.product-information .price del {
    margin-top: -10px;
    display: block;
    color: grey;
}
.product-information .price ins {
    color: #FF0000;
}
.price del {
    display: none !important;
}

/* 2 Products Side-By-Side | Mobile */
@media only screen and (max-width: 480px){
.products-grid .product {
width: 50% !important;
}}

/* Product Grid */
.products-grid .star-rating {
   display: none !important;
}
/* --------------------------------- */

/* Product Title - Breadcrumb */
.page-heading .title {
   display: none;
}

/* Top Bar */
.navbar {
    padding: 15px 0px 15px 0px;
}
/*.header-type-7 .header .tbs span{
display:none;
}*/

/* SVG Logo Container 
.svglogo {
  border: 10px solid #b6bdc3;
  width: 100%;
  background: #fff;
  margin: 0 auto;
}*/

/* Required to make image fluid in IE

img:not(.png) {
  width: 100%;
}*/

/* Hide Mobile Navigation Title 
.mobile-nav-heading.close-mobile-nav {
    display: none !important;
} */

.woocommerce-variation-description,
.product_meta{
display:none;
}

/* Random CSS */
.floatleft {
    float: left;
    margin: 0 0 0px 0px;
}
.largerfont {
    font-size: 18px;
}
.xlargefont {
    font-size: 32px;
}
.h3custom {
    padding-bottom: 14px;
    border-bottom: 12px solid #000;
}
.h2custom {
    padding-bottom: 1px;
    border-bottom: 3px solid #000
}

/* --------------------------------- */

/* Footer */
/* Stay Connected Web Form */
.stayconnected {
    padding: 10px 0px 0px 0px;
}
.rightalignbutton {
    float: right;
}
.footerformtext {
    color: black;
}
.address-company {
    padding-bottom: 10px;
}
```
#137028 Copied
Jack Richardson

Support staff

August 18, 2016 at 07:39

Hello,

Please provide WP Dashboard credentials in private content.

Best regards,
Jack Richardson.

#137039 Copied

michaelcp23

Participant

August 23, 2016 at 03:03

Here you go.

Please, contact administrator
for this information.

#137448 Copied

Jack Richardson

Support staff

August 23, 2016 at 08:39

Hello,

As I see your code is working now:
http://storage8.static.itmages.com/i/16/0823/h_1471937925_1994216_44a19753da.png

Please clear browser cache and check.

Best regards,
Jack Richardson.

#137476 Copied

michaelcp23

Participant

August 24, 2016 at 02:11

Not entirely true, but we are nearly there.

1. I wanted to show the sale price in red (which it is now), but I also wanted to keep the original price above the sale price with a grey colored font. (see comments in orange)

2. In product grid portion of the store, I wanted the sale price to be shown in red, not grey. (see comments in orange)

And that should be it. Sorry for any confusing.

Thank you,
Michael

Please, contact administrator
for this information.

#137558 Copied
Rose Tyler

Support staff

August 24, 2016 at 08:04
Hello,

You can use this css code:
```
.single-product .price del {
   display: block !important;
}
.post-type-archive-product .price ins {
   color: red;
}
```
Regards,
Rose Tyler.
#137586 Copied
michaelcp23

Participant

September 9, 2016 at 02:40

Thank you, it all worked perfectly!

Thanks again for all your help!
Michael Parra

#139254 Copied

Robert Hall

Support staff

September 9, 2016 at 06:59

Hello,

You’re welcome!

Regards,
Robert Hall

#139257 Copied
Viewing 12 results - 1 through 12 (of 12 total)

The issue related to '‘Single Product Page – Sale vs Original Price’' has been successfully resolved, and the topic is now closed for further responses

Single Product Page – Sale vs Original Price

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection