
-
AuthorPosts
-
March 4, 2025 at 9:31 pm #1478610
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 #1478636Hey 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,
IsmaelMarch 5, 2025 at 7:53 pm #1478692Thank 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 #1478717Hi,
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”?
Best regards,
IsmaelMarch 11, 2025 at 9:12 pm #1479111The CSS worked, thank you.
And no, it was more like this:
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 #1479112Also, 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 #1479127Hi,
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,
IsmaelMarch 16, 2025 at 4:05 am #1479450I just tried it, it didn’t seem to work. I left login details on my original post, perhaps you can troubleshoot?
Also for the 2nd part, how do I move the Sale Shop Category up to the top on mobile as well?
Thank you so much!
March 17, 2025 at 10:34 am #1479514March 21, 2025 at 11:30 pm #1479892It still doesn’t work on Mobile, it disappears completely. On tablet, it shifts, and looks weird. I guess we have to manually adjust it for every screen size?
I’m pretty sure back in the day there were banners, and they were attached to the physical images, making this easier. I just wish I knew how I removed them, cause I didn’t want them at the time.
Also, with the categories, I want “Items with Promos” to show up at the top, but its only doing so on desktop. Its not doing so on mobile. Can you also check on tablet?
Thank you so much
March 24, 2025 at 5:47 am #1480013Hi,
It is displaying correctly on our end. Please make sure to purge the cache before checking the page.
Best regards,
IsmaelMarch 25, 2025 at 7:59 am #1480106Site is broken completely
All I did was change “Sale!” to “20% OFF” in the PHP code you gave me, and everything just went down and is malfunctioning.
Please help
*Was able to fix with hosting company.
Is there a way to make “Items with Promos” category appear at the top on mobile as well?
-
This reply was modified 2 months, 1 week ago by
Dzimnikov.
March 25, 2025 at 8:54 am #1480111This screenshot shows which category I want to move on top on mobile.
Also, is there a way to put a divider in the section above, for only tablet and mobile (not desktop) – between the 420 discount and free shipping?
March 30, 2025 at 8:38 pm #1480491May 3, 2025 at 10:32 pm #1483558You guys previously gave me the code to move it up. It works on desktop, just not on mobile for some reason. Was just wondering if there was a way to add onto the code, to make it work on mobile as well.
May 4, 2025 at 12:13 pm #1483566Hi,
Reading the above thread, it looks like we said to contact the plugin developer, perhaps that is where you got the code from.
Otherwise, please link to the thread with the code that we gave you.Best regards,
MikeMay 4, 2025 at 4:20 pm #1483577The 2nd reply on this post:
March 5, 2025 at 7:03 am reply #1478636
May 5, 2025 at 5:29 am #1483587Hi,
The script seems to be working, as shown in the screenshot below.
Best regards,
IsmaelMay 18, 2025 at 11:17 pm #1484416Hi, happy Sunday, just following up. A few minor issues I still need some help with:
1) At least on chrome mobile “Items with Promos” is still showing up at the bottom. I know different browsers are coded slightly different, could that be a reason why?
2) Also, with the categories, the number next to each one is showing the total amount of items in each category, including items that are hidden from results. This confuses customers, as they end up seeing less items than the number shows. Would it be possible to have that number reflect only the items that are displayed for each category?
I guess I can just move the hidden items to other categories, but I may want to move them back in the future. If the above isn’t possible, I guess I’ll do this.
3) I love the 20% OFF Green boxes that are on the shop page currently, but I have to input the 20% on my own, and I then it affects all the items that are for sale. Would it be possible for the number to be based of the Sale amount on each individual product, automatically? So (reg price – sales price)/reg price?
Thank you so so soooo much for all your help. I get compliments all the time on the website, and I wouldn’t be able to do it without your help!
Cheers,
-DanielMay 19, 2025 at 9:44 am #1484431Hi,
1.) We can’t reproduce the issue on our end. Have you tried using a difference device?
2.) Unfortunately, this will require modifications that are beyond the scope of support.
3.) You can replace the previous woocommerce_sale_flash filter with the following code to automatically calculate and display the percentage discount:
add_filter('woocommerce_sale_flash', 'avf_woocommerce_sale_badge', 10, 3); function avf_woocommerce_sale_badge($badge, $post, $product) { if ($product->is_on_sale()) { $regular_price = floatval($product->get_regular_price()); $sale_price = floatval($product->get_sale_price()); if ($regular_price > 0 && $sale_price > 0) { $percentage = round((($regular_price - $sale_price) / $regular_price) * 100); return '<span class="av-custom-sale-badge">-' . $percentage . '%</span>'; } } return $badge; }
If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.
Thanks!
Best regards,
IsmaelMay 26, 2025 at 6:39 am #1484666I still need help with the above code, so is it ok if I keep it in this thread?
I tried putting in the code, but it didn’t work for me. It made the percentage box bigger, and broke the product pages.
I put in the old code back, but the percentage box is still bigger than it was before.
I’m not too familiar with php, so odds are I missed something somewhere. Can you please help me with this final step?
May 29, 2025 at 3:08 am #1484812Hi,
Sorry for the delay. We adjusted the code in the functions.php file to render the sales badge for simple and variable products. Please make sure to purge the cache before checking.
This is the updated code.
add_action( 'woocommerce_before_shop_loop_item_title', 'avf_woocommerce_sale_badge', 20 ); function avf_woocommerce_sale_badge() { global $product; if ( $product->is_type('simple') ) { $regular_price = floatval( $product->get_regular_price() ); $sale_price = floatval( $product->get_sale_price() ); if ( $regular_price > 0 && $sale_price > 0 && $sale_price < $regular_price ) { $percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 ) . '%'; echo '<span class="av-custom-sale-badge">-' . esc_html( $percentage ) . '</span>'; } } elseif ( $product->is_type('variable') ) { $percentage = get_variable_sale_percentage( $product ); if ( $percentage ) { echo '<span class="av-custom-sale-badge">-' . esc_html( $percentage ) . '</span>'; } } } function get_variable_sale_percentage( $product ) { $variation_min_regular_price = floatval( $product->get_variation_regular_price( 'min', true ) ); $variation_max_regular_price = floatval( $product->get_variation_regular_price( 'max', true ) ); $variation_min_sale_price = floatval( $product->get_variation_sale_price( 'min', true ) ); $variation_max_sale_price = floatval( $product->get_variation_sale_price( 'max', true ) ); $percentages = []; if ( $variation_min_regular_price > 0 && $variation_min_sale_price > 0 && $variation_min_sale_price < $variation_min_regular_price ) { $percentages[] = round( ( ( $variation_min_regular_price - $variation_min_sale_price ) / $variation_min_regular_price ) * 100 ); } if ( $variation_max_regular_price > 0 && $variation_max_sale_price > 0 && $variation_max_sale_price < $variation_max_regular_price ) { $percentages[] = round( ( ( $variation_max_regular_price - $variation_max_sale_price ) / $variation_max_regular_price ) * 100 ); } if ( empty( $percentages ) ) { return false; } sort( $percentages ); if ( count($percentages) === 2 && $percentages[0] !== $percentages[1] ) { return $percentages[0] . '% - ' . $percentages[1] . '%'; } else { return $percentages[0] . '%'; } }
Best regards,
Ismael -
This reply was modified 2 months, 1 week ago by
-
AuthorPosts
- You must be logged in to reply to this topic.