Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1473855

    Hi, here is the website I’m working on: https://www.bonjiglass.com/shop/

    As you can see, I added “Free Shipping on All Orders to the area below the review slider.

    Ideally, I’d love to give its own section below, where the breadcrumbs section currently is. Is there a way for me to do this? I want to make it abundantly clear to people coming to the shop page that shipping is free!

    Thank you so much in advance!

    #1473870

    Hey Dzimnikov,

    Thank you for the inquiry.

    Try to add this script in the functions.php file to create another container below the product description or shop banner :

    function ava_custom_add_shipping_text_script() { 
        if (is_shop()) { 
        ?>
            <script>
                (function ($) {
                    $(document).ready(function () {
                        var newContainer = $('<div class="av-custom-shipping-container"><p>Free Shipping on All Orders!</p></div>');
                        $('#av_product_description .container').after(newContainer);
                    });
                }(jQuery));
            </script>
        <?php 
        }
    }
    add_action('wp_footer', 'ava_custom_add_shipping_text_script', 99);
    

    Then add this css code to adjust the style of the new container:

    #top .av-custom-shipping-container {
        background: red;
        padding: 20px;
    }
    
    #top .av-custom-shipping-container p {
        color: #ffffff;
        font-size: 40px;
    }

    Best regards,
    Ismael

    #1473961

    Thank you. I almost got it, but it appears like this section was built over that overall section with the rotating slider… and so is inheriting the black overlay.

    Is there a way to remove that overlay from just this new Free Shipping Section.. so that it pops. Its super dull atm:
    https://www.bonjiglass.com/shop/

    Also, on mobile, the words overlap… needs spacing between the lines I think.

    • This reply was modified 4 days, 2 hours ago by Dzimnikov.
    #1474017

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .av-custom-shipping-container {
        z-index: 9;
        position: relative;
    }
    @media only screen and (max-width: 735px) { 
    	#top .av-custom-shipping-container {
    	line-height: 65px;
    	}
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1474097

    Amazing, thank you, thank you, thank you!!!

    #1474098

    One more question. If I want to add an extra line of text below “Don’t Forget to Use Your Discount Codes”, how would I do that?

    I don’t know PHP code at all, I don’t want to break anything

    #1474106

    Hi,
    Try changing your script to this:

    function ava_custom_add_shipping_text_script() { 
        if (is_shop()) { 
        ?>
            <script>
                (function ($) {
                    $(document).ready(function () {
                        var newContainer = $('<div class="av-custom-shipping-container"><p>Free Shipping on All Orders!</p><p>Don’t Forget to Use Your Discount Codes</p></div>');
                        $('#av_product_description .container').after(newContainer);
                    });
                }(jQuery));
            </script>
        <?php 
        }
    }
    add_action('wp_footer', 'ava_custom_add_shipping_text_script', 99);

    Best regards,
    Mike

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