Hikashop product listing icons

  • Posts: 54
  • Thank you received: 7
2 years 8 months ago #340184

Hi,

I'm currently styling my product divs in my product listing page.
I would like to place icons (Images) infront of my custom fields (shown in screenshot below).
How can i do this?

Attachments:

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

  • Posts: 82868
  • Thank you received: 13375
  • MODERATOR
2 years 8 months ago #340189

Hi,

You can do that with CSS. For example:

.hikashop_products_listing .hikashop_product_custom_product_hashrate_line dd.hikashop_product_custom_value:before {
    content: url('url of the icon');
}
where hashrate is the column name of the custom field.

The following user(s) said Thank You: ismael

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

  • Posts: 54
  • Thank you received: 7
2 years 8 months ago #340194

Hi,

This works, thanks.
Im now trying to adjust the size of the image since its too big right now. I dont know how to do this though.
Im trying:
dd.hikashop_product_custom_value:before{
width: 10px!important;
height: 10px!important;
}
But nothings happening. Can you help me?

This message contains confidential information

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
2 years 8 months ago #340197

Hello,

In order to better understand the context and better help you, can you provide the Url link to your relative page ?
Awaiting your return to progress on your subject.

Regards

Last edit: 2 years 8 months ago by Philip.

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

  • Posts: 54
  • Thank you received: 7
2 years 8 months ago #340219

hi,

This message contains confidential information

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
2 years 8 months ago #340231

Hello,

Unfortunately, the localhost will not be accessible for us, we have try to use we have tried with urls that you have provided us in another subject, but without being able to find your added images there.

So to be able to help you precisely we will need the context of intervention.
Awaiting your returns to progress.

Regards

Last edit: 2 years 8 months ago by Philip.

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

  • Posts: 2143
  • Thank you received: 747
2 years 8 months ago #340234

Hi,

It's pretty simple. Instead of the CSS Nicolas provided here above, just use this:

.hikashop_products_listing .hikashop_product_custom_product_hashrate_line dd.hikashop_product_custom_value:before {
    background: url('url of the image') no-repeat center center / 10px auto;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    content: "";
}
As previously, replace "hashrate" with the column name of your custom field.
And, of course, you may want to replace the 10px and 5px values with your own.

Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )
The following user(s) said Thank You: Philip, ismael

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

  • Posts: 54
  • Thank you received: 7
2 years 8 months ago #340241

Hi,

Thanks, its working!

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

Time to create page: 0.082 seconds
Powered by Kunena Forum