For example, you want to change the size and the color of the price on a product listing.
To do that, you need your browser console or an add-on like “Firebug” for FireFox to see the HTML and CSS of your page.

Usually you have to press the F12 key to have the console show up. You should have something like that displayed:

CSS Edition in HikaShop

In this case, I am using Firebug.

To find the element to edit, you can right click on it then choose “inspect the element”.

The window should display the HTML of the desired element, and you can find its class and/or id.

CSS Edition in HikaShop

To edit the price display you have to edit the class “hikashop_product_price”.

Step 1: Log into your Joomla Dashboard

Step 2: In the top menu, hover over Components and click HikaShop to access the HikaShop Dashboard.

Step 3: Go to the System and click Configuration HikaShop menu in order to access the payment management screen.

In HikaShop > Configuration > Display > CSS, you can edit the Front-end CSS File to set your custom properties.

CSS Edition in HikaShop

Step 4: Go to the Display and click CSS part and you can edit the Front-end CSS File to set your custom properties.

Step 5: To change the color and the size of the price you can use a property like:

.hikashop_product_price{ color: #99cc00;font-size: 14px;}

If you need to edit the class in, for example, only one module, you can prepend the id of the module to the CSS code.

When using the CSS code:

#module_25 .hikashop_product_price{ color: #99cc00;font-size: 14px;}

The color and the size of the price will be changed only in the module with the id “module_25”.
Remember that “#” is used for the IDs and “.” for the classes.

Rate for post
Document Team
All-In-One Membership Access PRO version of all 500+ all Joomla! templates and WordPress themes. Just from $7.25/MO Learn more
🎉 Merry xMas & Happy New Year sale! Grab 50% Off for everything on today, don't miss it. Coupon code: XMASNEWYEAR Redeem Now