Help with some shop elements - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
March 4, 2025 at 9:31 pm #1478610

Dzimnikov
Participant

Hi team,

Need some quick help with my site here: https://www.bonjiglass.com/shop/

The shop categories are currently in alphabetical order, which overall I like, but I would like the Sale one to be at the top and in Bold, so people can see it first. Outside of Sales being on top, the rest being in alphabetical order is fine. Please see: https://imgur.com/a/GIq4Doo

Also, there used to be a setting where product images would have banners when they were on sale. I used to have everything on sale, so I disabled it, but now want to turn it back on. I don’t remember if its a setting (i cant find one), or if I killed it with CSS display: none (also can’t find).

Thank you so much for all your help.

March 5, 2025 at 7:03 am #1478636
Ismael
Moderator
Hey Dzimnikov,

Thank you for the inquiry.

We added this script in the functions.php file to relocate the last item in the category list:
```
function ava_custom_script_sale_cat()
{ ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
			const list = document.querySelector(".woof_list");

			if (list && list.children.length > 1) {
				const lastItem = list.lastElementChild;
				if (lastItem.tagName.toLowerCase() === 'li') {
					list.prepend(lastItem);
				}
			}
		});
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_sale_cat', 99);
```
There might be a slight delay in the script execution.

Best regards,
Ismael
March 5, 2025 at 7:53 pm #1478692

Dzimnikov
Participant

Thank you so much. Is there a way to make it bold?

Also, for my other question, is there a way to bring back those sales banners?

March 6, 2025 at 6:00 am #1478717
Ismael
Moderator
Hi,

The text is already bold, but you can try this css code to make it blacker.
```
.woof li.woof_term_116  .woof_checkbox_label {
    color: black !important;
}
```
How did you enable the sale banner before, and where did you place it? Are you referring to the “sale! badge”?

View post on imgur.com

Best regards,
Ismael
March 11, 2025 at 9:12 pm #1479111

Dzimnikov
Participant

The CSS worked, thank you.

And no, it was more like this:

View post on imgur.com

Where I drew in the electric green. They would be like banners hanging over the product photos. Something like that. I pretty sure the store defaults to them, but I somehow turned them off, and I can’t find how at all.

Thank you so so much

March 11, 2025 at 9:15 pm #1479112

Dzimnikov
Participant

Also, just realized something. The Sale thing category shows up at the top on desktop, but not on mobile for some reason. Not sure why.

March 12, 2025 at 6:34 am #1479127
Ismael
Moderator
Hi,

Try to add this code in the functions.php file to add a custom sales badge above the product image.
```
add_filter('woocommerce_sale_flash', 'avf_woocommerce_sale_badge', 10, 3);
function avf_woocommerce_sale_badge($badge, $post, $product) {
    if ($product->is_on_sale()) {
        return '<span class="av-custom-sale-badge">Sale!</span>';
    }
    return $badge;
}
```
Then apply this css code:
```
.av-custom-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #7E9A47;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 10;
}
```
Best regards,
Ismael
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.