Return to previous page

Change Image on “Spotlight Categories” New, Sale, Show All

This topic has 6 replies, 3 voices, and was last updated 5 months ago ago by Andrew Mitchell

Corrado Zanetti

Participant

May 14, 2024 at 17:05

Hi

I would like to know how to customize the three buttons “Shop All” – “New Arrivals” and “Sale” in the widget “Spotlight Categories”
I would like to add a custom icon (or a jpg image like for categories) to each of these three items.

For the related translation, however, I need to proceed via Loco Translate, correct?

Thank you

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#395135 Copied Theme version: 9.3.9

5 Answers
Jack Richardson

Support staff

May 15, 2024 at 09:58
Dear @Corrado Zanetti,

Thank you for your interest in our services.

You are the first to inquire about modifications for the “All/New/Sale” elements within the Spotlight Categories Elementor widget. We are pleased to provide a solution that involves adding custom CSS globally. This will allow you to display different images for each of your categories, achieving the desired effect as shown in the example -> https://prnt.sc/wjVyq1-i3UZX.

Please find the necessary CSS below:
```
.etheme-category-grid-image[data-type=all] {
    background-image: url("https://placehold.co/100x100/red/blue/png");
    background-position: center;
    font-size: 0;
}

.etheme-category-grid-image[data-type=new] {
    background-image: url("https://placehold.co/100x100/red/blue/png");
    background-position: center;
    font-size: 0;
}

.etheme-category-grid-image[data-type=sale] {
    background-image: url("https://placehold.co/100x100/red/blue/png");
    background-position: center;
    font-size: 0;
}
```
You can add this custom CSS by navigating to Theme Options -> Theme Custom CSS -> Global CSS in your admin panel. Please note that the images used in the example are placeholders. You should replace them with your own images to suit your specific needs.

Should you require any further assistance or have additional questions, please do not hesitate to contact us.

Best Regards,
Jack Richardson
The 8Theme Team
#395233 Copied
Corrado Zanetti

Participant

May 15, 2024 at 12:48

Hello everyone

I did as described but on mobile and desktop (safari + Chrome) the first icon works correctly but the second and third do not.
In the preview of the customize on the other hand, where beside I enter the css, it displays correctly.

How can I solve it? I attach screenshot

Thanks

Files is visible for topic creator and
support staff only.

#395280 Copied

Jack Richardson

Support staff

May 15, 2024 at 13:12

Hello @Corrado Zanetti,
We have modified your custom with next changes:
.etheme-category-grid-image[data-type=sale] was changed with higher priority
body .etheme-category-grid-image[data-type=sale]

Now each your ghost categories (All/Sale/New) have own images you set -> https://prnt.sc/YaIsQFlm-s4g

Kind regards, Jack Richardson

#395291 Copied

Corrado Zanetti

Participant

May 15, 2024 at 15:26

Thank you!

#395311 Copied

Andrew Mitchell

Support staff

May 15, 2024 at 15:26

Dear Corrado Zanetti,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#395312 Copied
Tagged: change image, sale, show all, spotlight categories, woocommerce templates, wordpress
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Change Image on “Spotlight Categories” New, Sale, Show All’' has been successfully resolved, and the topic is now closed for further responses

Change Image on “Spotlight Categories” New, Sale, Show All

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection