Display discount price with strike-through

  • Posts: 37
  • Thank you received: 0
  • Hikashop Business
2 months 3 weeks ago #304438

-- url of the page with the problem -- : banobathrooms-co-uk.stackstaging.com/sui...ct/13-tommy-shirts-1
-- HikaShop version -- : 4.0.2
-- Joomla version -- : 3.9.3
-- PHP version -- : 7.2
-- Browser(s) name and version -- : All

Hi,

I have read lots of documentation, but no clear resolution.

What is the best way to discount an individual product and display the original price with strike-through followed by the lower price?

Thanks.

Please Log in or Create an account to join the conversation.

  • Posts: 65715
  • Thank you received: 9593
  • MODERATOR
2 months 2 weeks ago #304445

Hi,

You curently have entered the base price in the "retail price" field of your product and entered the discount price in the price listing of your product.
Instead, you should enter the base price in the price listing of your product and leave the retail price field empty.
Then, create a discount via the menu Orders>Discounts and assign it to that product with the value of the discount you want for that product.
Finally, in the HikaShop configuration, you have the "Show discounted price" setting that you can set to "Display the price before the discount is applied" in order to get the original price with strike-through followed by the lower price on your product page automatically.

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 0
  • Hikashop Business
2 months 2 weeks ago #304462

Hi,

Thanks for your help.
I have made the changes, but it's still not displaying as I would like. Can you take a look please.

Regards,
Colin.

Please Log in or Create an account to join the conversation.

  • Posts: 65715
  • Thank you received: 9593
  • MODERATOR
2 months 2 weeks ago #304464

Hi,

That's because the style of HikaShop is not enabled. In the HikaShop configuration, under the Display tab, you can set the "style" setting to "default" instead of "none" and you'll have the price striken through.
Otherwise, you can just add the CSS for it :

span.hikashop_product_price_before_discount {
	text-decoration:line-through;
	white-space:nowrap;
}

The following user(s) said Thank You: Crashbandi

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 0
  • Hikashop Business
2 months 2 weeks ago #304493

That's great, thanks.

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 0
  • Hikashop Business
2 months 2 weeks ago #304494

Hi,

I've opted for the CSS solution. Can you let me know how to remove the space between the currency symbol and the price. Also how to add spacing between the 2 prices?

Regards,
Colin.

Please Log in or Create an account to join the conversation.

  • Posts: 65715
  • Thank you received: 9593
  • MODERATOR
2 months 2 weeks ago #304502

Hi,

To customize the display of each price, you want to edit the currency via the menu System>Currencies. You'll find display options to say if you want the symbol before or after the price, etc.

There are many ways in CSS to add spacing between the two prices.
For example, with such CSS:

span.hikashop_product_price_before_discount {
	margin-right: 10px;
}

The following user(s) said Thank You: Crashbandi

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 0
  • Hikashop Business
2 months 2 weeks ago #304529

Thank you so much. It looks perfect now.

Regards,
Colin.

Please Log in or Create an account to join the conversation.

  • Posts: 346
  • Thank you received: 7
  • Hikashop Business
2 months 1 week ago #304854

would like to check if there is any upgraded version than this method after several version

is it possible to have strike thru price and discounted price based on assigned discount category or product in discount feature?

Please Log in or Create an account to join the conversation.

  • Posts: 65715
  • Thank you received: 9593
  • MODERATOR
2 months 1 week ago #304857

Hi,

I'm not sure what you mean. Having discounts on prices based on the category/product and have the original price striken-through is possible since like 7 years ago in HikaShop.

Please Log in or Create an account to join the conversation.

  • Posts: 346
  • Thank you received: 7
  • Hikashop Business
2 months 1 week ago #304872

The previous method is to enter the price at Retail Price (if i am wrong please let me know @@)

But when we have like 1000+ product it is impossible for us to enter Retail Price 1 by 1

Is there a method to display strike thru price base on Discount setting?

Please Log in or Create an account to join the conversation.

  • Posts: 65715
  • Thank you received: 9593
  • MODERATOR
2 months 1 week ago #304875

Hi,

You're wrong. The previous method, which is still current, has always been to enter the full price in the price field of the product and then create a discount on the product via the Orders>Discounts menu so that it can apply on that price.
The retail price is only indicative information when you sell things lower than the manufacturer's suggested retail price.

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 0
  • Hikashop Business
3 weeks 4 days ago #306186

Hi,

My display has been working fine, but I have added a new category and it displays differently. I have attached screen shots. 005 is fine, but 006 doesn't appear to include the css?
Here is my current css:
span.hikashop_product_price_before_discount {
color: #000000;
font-size: 20px;
text-decoration:line-through;
white-space:nowrap;
}

span.hikashop_product_name_main {
color: #000000;
font-size: 20px;
white-space:nowrap;
}

span.hikashop_product_price_before_discount {
margin-right: 10px;
}



Regards,
Colin.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 65715
  • Thank you received: 9593
  • MODERATOR
3 weeks 3 days ago #306190

Hi,

On your second screenshot, it displays the discount amount and then the discounted price while on the first you have the price before discount and then the price after discount.
So it's normal that the CSS doesn't apply in the second case.
It's actually not a CSS issue. The issue is that in the settings of that second listing, (a menu item or a module), you have the discounted price setting configured to display the discount value instead of displaying the price before the discount. So check the settings of your second products listing.

The following user(s) said Thank You: Crashbandi

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 0
  • Hikashop Business
3 weeks 3 days ago #306198

Hi Nicolas,

Yes it was the menu setting.
Thank you very much for your help.

Regards,
Colin.

Please Log in or Create an account to join the conversation.

Time to create page: 0.093 seconds
Powered by Kunena Forum