Change size, bold, strikethrough of the "sale" and "normal price"

  • Posts: 92
  • Thank you received: 0
  • Hikashop Essential
5 years 10 months ago #293831

-- HikaShop version -- : 3.4.0
-- Joomla version -- : 3.8.8
-- Browser(s) name and version -- : All

I need to change the text and sale price formatting currently the font size is too small, and is grey in color which makes it difficult to see. Also I would like to strikethrough the "Normal price". Also I have options for the product that are also grey and too small of text to stand out as they should. Where do I go to modify these things I have searched for quite some time and found nothing. Thanks!

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

  • Posts: 4510
  • Thank you received: 611
  • MODERATOR
5 years 10 months ago #293878

Hello,

For this you have some Css command especially to modify your text, see this Css references .
And read this tutorial to add some custom Css to your front end files.

Hope this will help you.

Regards

Last edit: 5 years 10 months ago by Philip.

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

  • Posts: 92
  • Thank you received: 0
  • Hikashop Essential
5 years 10 months ago #293891

Philip,

I both of the links and tried to apply the changes however with 600 lines of code I couldnt find a way to figure out which of those was the specific part that I needed to edit. Can you give me a little direction with what the line of code as I couldnt find the "sale price" or "normal Price" I even did a Control+F to find "price" and came with nothing. Can you let me know what I am looking for as far as the title of the code, or something to search for? I would like to edit the following: "Normal Price" with a stikethrough and change size and color, as well as "sale price" Change size and color. As well as the Size, Bold, Color of the options text below. Example from my site:

Normal price: $129.99 Sale price: $99.99 each
Add Vehicle Hardware Kit?

Add Vehicle Upholstery Removal Tools?

Price with options: $99.99

All of the text above I would like to modify. Please direct me as to where to find this code in the 600 lines. Thanks!

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

  • Posts: 4510
  • Thank you received: 611
  • MODERATOR
5 years 10 months ago #293895

Hello,

You don't have to change the default Css command (from HikaShop), you just have to add your custom Css at the end of your css file & with a good selector your custom command will override previous.

To define a powerful selector, you can use your navigator inspector tool (point html element on your website page and right-clic), like on this screenshot to find the good html class :



I advice in order to increase selector priority, add the concerned class page, as by example something like this :
.html_page_class .html_price_class {
    font-size: 1.3em;
    font-weight: bold;
    color: red;
}

Hope this will help you.
Regards

Last edit: 5 years 10 months ago by Philip.

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

  • Posts: 92
  • Thank you received: 0
  • Hikashop Essential
5 years 10 months ago #293959

I understand a little better but still not the complete picture as some steps were skipped in the example.

I found the section of code to edit.

<span class="hikashop_product_msrp_price hikashop_product_price_full">
<span class="hikashop_product_msrp_price_title">Normal price:</span><span class="hikashop_product_price">$129.99</span>

<div></div></span>

I dont see where you put in your extra code or how you applied it to the code above. I dont see it in your example. Can you give me an example of how to strikethrough on the example above, where exactly to put the code then I can replicate that with all the other things I want to do. I have reviewed all of the links and firefox guide to the inspector tool but cant figure out where to put the code to get desired result. Please give me an example and show where you added the code.

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

  • Posts: 4510
  • Thank you received: 611
  • MODERATOR
5 years 10 months ago #293968

Hello,

As this tutorial show you, you have to put your code at the end of your front end css file, as shown in this picture :



When you see this :



You will be able to add every css command needed, you have to save it, and that will create a "frontend_custom.css"
Hope this will help you.

Regards

Last edit: 5 years 10 months ago by Philip.

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

Time to create page: 0.066 seconds
Powered by Kunena Forum