Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #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.

    #1478636

    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

    #1478692

    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?

    #1478717

    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

    #1479111

    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

    #1479112

    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.

    #1479127

    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

    #1479450

    I 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!

    #1479514

    Hi,

    We added the filter and adjusted the css code.

    View post on imgur.com

    Best regards,
    Ismael

    #1479892

    It 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

    #1480013

    Hi,

    It is displaying correctly on our end. Please make sure to purge the cache before checking the page.

    View post on imgur.com

    Best regards,
    Ismael

    #1480106

    Site 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.
    #1480111

    View post on imgur.com

    This 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?

    #1480491

    Hi,
    When I check your site, this category widget is created by a plugin, to move it’s position please ask the plugin developer for a PHP function to do so.
    Screen Shot 2025 03 30 at 2.37.06 PM

    Best regards,
    Mike

    #1483558

    You 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.

    #1483566

    Hi,
    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,
    Mike

    #1483577

    The 2nd reply on this post:

    March 5, 2025 at 7:03 am reply #1478636

    #1483587

    Hi,

    The script seems to be working, as shown in the screenshot below.

    View post on imgur.com

    Best regards,
    Ismael

    #1484416

    Hi, 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,
    -Daniel

    #1484431

    Hi,

    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,
    Ismael

    #1484666

    I 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?

    #1484812

    Hi,

    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

Viewing 22 posts - 1 through 22 (of 22 total)
  • You must be logged in to reply to this topic.